Specify color values
Adjust the sliders, enter a HEX code, or use the color picker. Values, contrast and harmonies update as you go.
Input mode
Presets
Color values
- HEX
-
- RGB
-
- HSL
-
- OKLCH
-
- CMYK
-
Contrast
| Ratio Contrast ratio: the brightness difference between two colors, from 1:1 to 21:1. Higher is easier to read. | APCA (Lc) APCA: a newer perceptual contrast measure from the WCAG 3 draft. Lc runs about 0–106; higher is easier to read. The sign shows polarity (dark text on light, or light on dark). | |
|---|---|---|
| As background | ||
| White text | ||
| Black text | ||
| As text | ||
| White background | ||
| Black background | ||
Color harmonies
Usage preview
As background (black text)
As background (white text)
As text (white background)
As text (black background)
Try a combination
Background Text