Got feedback?
@erikdevries_nl
UI
Colors
Hue
Hue
Hue shift
Saturation
Lightest shade
Middle shade
Darkest shade
Perceived Brightness
Lightest shade
Darkest shade
{{ color.originalHex }} hsl({{ color.originalHue }}, {{ color.originalSaturation }}%, {{ color.originalLightness }}%)
{{ tailwindShades[index] }}
{{ shade.hex }}
H: {{ shade.hue }}
S: {{ shade.saturation }}
L: {{ shade.lightness }}
App Illlustration Alerts Buttons Color info Image Export
{{ color.name }}

Important information

Make sure you read this information before you continue.

Important information

Make sure you read this information before you continue.

Important information

Make sure you read this information before you continue.

{{ color.name }}
Button
Button
Button
Button
Button
Button
{{ color.name }}
{{ color.name }}
Beta
Home
Goodmorning
Alex
Search
+
Messages
5
Joseph Adams
8:44
How are you doing?
Madison George
Yesterday
Having plans for this weekend?
Jill Hopkins
2 days ago
I couldn't go because
{{ color.name }}
Shade Hexcode H S L P.B. Contrast
{{ tailwindShades[shade] }} {{ color.shades[shade].hex }} {{ color.shades[shade].hue }} {{ color.shades[shade].saturation }} {{ color.shades[shade].lightness }} {{ color.shades[shade].perceivedBrightness }}
{{ color.shades[shade].contrastOnWhite }}
{{ color.shades[shade].contrastOnBlack }}
Pick colors from an image to create shades
Pick a color to generate shades
or
Tailwind SCSS CSS SVG 

'{{ color.nameForExport }}': {
    '{{ tailwindShades[index] }}': '{{ shade.hex }}',
},


--{{ color.nameForExport }}-{{ tailwindShades[index] }}: {{ shade.hex }};


${{ color.nameForExport }}-{{ tailwindShades[index] }}: {{ shade.hex }};

<svg width="{{ shades.length * 100 }}" height="{{ colors.length * 100 + ((colors.length - 1 )* 20) }}" viewBox="0 0 {{ shades.length * 100 }} {{ colors.length * 100 + ((colors.length - 1 )* 20) }}" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" fill="{{ shade.hex }}" x="{{ (shadeIndex - 10) * 10}}" y="{{ colorIndex * 120 }}"/>
</svg>
Create shades from hexcode
Type or paste a hexcode to generate shades.
Cancel
Generate shades from Coolors.co palette
Paste a Coolors.co palette URL.
Cancel
Select a color palette
These color palettes do not correspond 100% to the original, but they are very close.
Tailwind CSS 2
Import palette from Coolors.co URL
Cancel