Color

Color Tools

Color converters for every notation a design tool might ask for: HEX, RGB, HSL, CMYK, LAB and color temperature in kelvin.

40
Tools in color
0
Accounts needed
Accessibility Color Checker
Text colour, Background colour → Contrast ratio, WCAG verdict, Nearest colour that passes AA
Analogous Color Generator
Base colour → Palette (HEX)
Box Shadow Color Generator
Offset X px, Offset Y px → CSS
CMYK Converter
Pick a colour → CMYK, HEX, RGB
CMYK to RGB Converter
Cyan %, Magenta % → HEX, RGB
Color Blindness Simulator
Colour to test → Protanopia (no red cone), Deuteranopia (no green cone), Tritanopia (no blue cone)
Color Distance Calculator
Colour A, Colour B → ΔE (CIEDE2000)
Color Harmony Generator
Base colour → Palette (HEX)
Color Mixing Calculator
Colour A, Colour B → Mixed HEX
Color Name Finder
Colour → Nearest name
Color Overlay Generator
Overlay colour, Opacity % → CSS
Color Palette Generator
Seed colour, Scheme → Palette
Color Picker
Pick a colour → HEX, RGB, HSL
Color Shade Generator
Base colour → Palette
Color Space Converter
Pick a colour → HEX, RGB, HSL
Color Temperature Converter
Temperature (K) → HEX
Color Tint Generator
Base colour → Palette
Color Tone Generator
Base colour → Palette
Complementary Color Finder
Base colour → Palette (HEX)
Contrast Checker
Text colour, Background colour → Contrast ratio, WCAG verdict, Nearest colour that passes AA
CSS Color Generator
Pick a colour → HEX, RGB, HSL
CSS Filter Generator
Brightness %, Contrast % → CSS filter
CSS Gradient Generator
From colour, To colour → CSS
Delta-E Calculator
Colour A, Colour B → ΔE (CIEDE2000)
HEX to HSL Converter
Pick a colour → HSL, HEX, RGB
HEX to RGB Converter
Pick a colour → RGB, HEX, HSL
HSL Converter
Pick a colour → HSL, HEX, RGB
HSL to HEX Converter
Hue, Saturation % → HEX
HSL to RGB Converter
Hue, Saturation % → RGB
Kelvin to RGB Converter
Temperature (K) → HEX
LAB Color Converter
Pick a colour → CIELAB, HEX, RGB
Monochromatic Palette Generator
Base colour → Palette
Random Color Generator
Type, How many → Palette
RGB to CMYK Converter
Red, Green → CMYK
RGB to HEX Converter
Red, Green → HEX
RGB to HSL Converter
Red, Green → HSL
Tetradic Color Generator
Base colour → Palette (HEX)
Triadic Color Generator
Base colour → Palette (HEX)
WCAG Contrast Checker
Text colour, Background colour → Contrast ratio, WCAG verdict, Nearest colour that passes AA
XYZ Color Converter
Pick a colour → CIE XYZ, HEX, RGB

What the colour tools cover

The same colour can be written half a dozen ways and design tools rarely agree on which. The converters here move between HEX and RGB, HSL, CMYK, LAB and colour temperature in kelvin. The palette tools build complementary, analogous, triadic and monochromatic schemes, plus tints, shades and tones of a base colour. The contrast checker reports the WCAG 2.x ratio and pass or fail at AA and AAA, and the colour blindness simulator shows how a palette reads under the common deficiencies. CSS generators cover gradients, filters and box shadows.

Conversions between HEX, RGB and HSL are exact in both directions. Conversions that cross a gamut boundary, such as RGB to CMYK or LAB, are approximate at the edges, and the same values will look different on two uncalibrated screens. The numbers are right; the appearance is not guaranteed.

Accessibility first

  • WCAG AA needs 4.5:1 for body text and 3:1 for large text and interface components. Treat a ratio between 4.4 and 4.6 as failing rather than rounding it up.
  • Around 8 percent of men have some red-green colour vision deficiency. Never let colour be the only thing that carries a meaning.
  • Grey text on white is the most common failure on the web and the easiest to fix.