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.
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 }}
|
'{{ 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>