Common Color workflows
Color values describe the same color in different models, but palettes and contrast depend on the model you work in. Lightening in HSL changes perceived brightness unevenly, and a contrast ratio applies to one foreground and background pair, not to a whole interface.
Choose readable colors
Convert a color or sample it from an image, check the contrast pair and adjust the shade until it passes for your text size.
- Color Converter — Convert colors between HEX, RGB, HSL and OKLCH.
- Image Color Picker — Pick colors from an image and extract its palette.
- Contrast Checker — Check WCAG contrast and find the closest passing color.
- Tint and Shade Generator — Mixes the chosen CSS color with black and white in sRGB channels to generate six shades, the base color and six tints.
Build a palette from one color
Generate tints and shades from a base color, desaturate them for neutral surfaces and invert them to test a dark theme.
- Tint and Shade Generator — Mixes the chosen CSS color with black and white in sRGB channels to generate six shades, the base color and six tints.
- Desaturate Color — Blends clamped sRGB channels toward weighted grayscale at the selected amount.
- Invert Color — Inverts the three clamped sRGB channels and preserves alpha.
Contrast ratios need the real background
WCAG contrast is calculated from the final rendered colors. Semi-transparent text, gradients and images behind text change the result, so check the component in the browser as well.
Frequently asked questions
Does passing a contrast check make my site accessible?
No. It confirms one color pair at one text size. Focus indicators, states, images behind text and the rest of the interface need their own checks.
Are my images uploaded when I pick a color?
No. The image is decoded in your browser and pixels are read locally.
Tools process your input on this device. Read the privacy policy, or save the tool library for offline use.