A small toolkit for a colorful web
A little room
for color.
Find the right shade. Get the right values.
Give your next idea a color that works.
Start with a color
01 / EXPLOREUse 3 or 6 hex digits, with or without #.
One color, three languages
COPY & GOMeet the whole family
02 / SHADESSame hue and saturation. Eleven lightness steps.
Select a shade to explore it.
03 / The readable part
Looks good.
Reads well?
Your selected color becomes the text. Choose a background to see how the pair measures up.
WCAG 2.2 text thresholds: AA 4.5:1 / 3:1 large; AAA 7:1 / 4.5:1 large. Large text means at least 24px regular or about 18.67px bold. This checks color contrast only.
A LIVE LITTLE PREVIEW
Make room for bright ideas.
A thoughtful color can set the tone. Good contrast helps the words come through.
Field notes
A bit of color clarity.
Three ways to describe a color, a scale to explore it, and one useful check before you ship.
When should I use HEX, RGB or HSL?
HEX is compact and common in design handoffs. RGB describes red, green and blue channels from 0 to 255. HSL describes hue, saturation and lightness, making it easier to reason about shade variations. These values describe the same opaque sRGB color; HSL values are rounded for copying.
How are these shades made?
Huevia keeps your color’s HSL hue and saturation, then sets lightness from 98% down to 8%. The labels 50–950 are convenient scale names, not a guarantee of equal visual spacing. Your original color may sit between the steps. Check each intended text and background pair separately.
What does a contrast pass mean?
The ratio compares the relative luminance of two opaque colors. A pass means this pair reaches the specified WCAG text contrast threshold. It does not certify a page’s accessibility. Font size, weight, focus indicators, color use and the rest of the interface still matter. Ratios shown are rounded; pass labels use the unrounded value.
Do my colors go anywhere?
All calculations happen in this page, in your browser. Huevia sends no color values to a server and uses no cookies, analytics or local storage. There is no account or saved history. Copy a value or the CSS variables before you close the page.