A specimen room for colors. Every color has its own page with HEX, RGB, HSL and CMYK values, WCAG luminance and contrast, color harmonies and an impression.
Where do the color names come from?
The 148 CSS named colors defined in CSS Color Module Level 4. Colors without a CSS name are shown by their HEX code.
How is contrast judged?
By WCAG 2: relative luminance gives a contrast ratio (1:1–21:1), and AA/AAA pass marks follow the WCAG thresholds (4.5:1 / 7:1 for normal text, 3:1 / 4.5:1 for large text). The swatch text color (white or black) follows the same standard.
How are the impression tags decided?
From a color's hue, saturation and lightness — for example warm, calm or vivid.
Can I use these colors freely?
Yes. Colors and the CSS color names are open Web standards, so you can use them freely.
What do HEX, RGB, HSL and CMYK mean?
HEX is the hexadecimal web code (e.g. #3498db). RGB mixes red, green and blue light. HSL describes hue, saturation and lightness. CMYK is an approximate conversion to print inks (cyan, magenta, yellow, key/black).
How do I find a specific color?
Use "Specify color values" to enter a HEX code or build a color with the picker, browse by hue or impression, or open the color picker on the home page. Harmony and scale swatches link to each color's page.