Category · 7 tools
Color Utilities
Seven small tools for working with color: convert it, name it, check a pair against the accessibility thresholds, or put one on the whole screen.
Work with a color
Start from one value and convert it, name it, or build a set around it.
- Color ConverterHEX, RGB and HSL in step with each other, with a live swatch as you type.FindsHEX · RGB · HSL, in step
- Color Name FinderThe closest standard CSS color name to any value, with the distance.FindsThe closest CSS color name
- Palette GeneratorA set of related colors from one starting value, by a stated rule.FindsRelated colors from one value
Check a pair
Two colors, one number, and the thresholds it is measured against.
Make something
A gradient you can copy, and a look at how an image reads to other eyes.
Guides for these tools
What a result means, and what to do next.
- ExplainerColor Blindness: Types and TestingThe kinds of color vision deficiency, how common each is, what causes it and how an eye doctor tests for it, from the National Eye Institute and MedlinePlus.
- ExplainerColor Contrast and AccessibilityWhat WCAG's contrast ratios mean: 4.5:1 and 3:1 for text, 7:1 at AAA, 3:1 for controls and graphics, how the ratio is worked out and how to check a pair.