Which color formats can I copy?

Six: hex, rgb, rgba, hsl, hsla, and oklch. They all describe the same color, so you copy whichever your stylesheet, framework, or design tool expects. The alpha is shown as fully opaque in the rgba and hsla strings.

What do the AA and AAA badges mean?

They report WCAG contrast compliance. AA passes at a ratio of 4.5 to 1 for normal text, and AAA at 7 to 1, which is stricter. The badges flip to pass once your color clears each threshold against the given background, white or black.

Why work in HSL instead of hex?

HSL separates hue, saturation, and lightness into independent dials, so you can lighten, darken, or desaturate a color predictably without recomputing channels by hand. Hex and rgb mix those qualities together, which makes deliberate adjustments much harder to reason about.

What is oklch and why is it included?

oklch is a modern CSS color space (lightness, chroma, hue) built to be perceptually uniform, meaning equal numeric steps look like equal visual steps. It makes generating even tints and accessible palettes more reliable than HSL, and it is supported in current browsers.

Is the contrast checked against my real background?

It is checked against pure white and pure black, the two extremes most interfaces sit near. If your actual background is a specific mid-tone, treat these as a guide and verify the exact pairing, since contrast depends on both colors involved.

FREE - COLOR - CONTRAST

Color Picker

Pick colors with native color input and HSL sliders, then copy hex, RGB, HSL, and OKLCH values with contrast checks.

Native color picker

Hue210

Saturation82

Lightness52

hex

#2085e9

rgb

rgb(32, 133, 233)

rgba

rgba(32, 133, 233, 1)

hsl

hsl(210 82% 52%)

hsla

hsla(210, 82%, 52%, 1)

oklch

oklch(61.41% 0.1745 253.0)

Contrast vs White3.75:1

AA failAAA fail

Contrast vs Black5.59:1

AA passAAA fail

Choosing a color format

Use hex for quick handoff to most design tools and CSS snippets, RGB or RGBA when you need channel values, HSL when you are adjusting hue or lightness, and OKLCH when you want a more perceptual color model for modern CSS.

The contrast readout is a practical guardrail, not a full accessibility audit. Check the final color against the actual text size, weight, background, hover state, and dark-mode surface where it will appear.

About the Color picker

This color picker lets you choose a color with a native swatch or with hue, saturation, and lightness sliders, then gives you its value in six formats at once: hex, rgb, rgba, hsl, hsla, and oklch. Alongside the codes it shows the WCAG contrast ratio of your color against both white and black, with AA and AAA pass or fail badges, so you can judge readability while you pick rather than after.

Use it to nail down a brand or UI color and copy it in whatever syntax your stylesheet, design file, or code expects, or to check whether text in that color will be legible on a light or dark background. Working in HSL makes deliberate adjustments easy: nudge lightness for a tint or shade, or shift hue without disturbing how vivid the color is.

How to use it

Pick a starting color with the native picker, or set it precisely with the hue, saturation, and lightness sliders.
Read the live preview swatch and the six format strings beside it.
Copy the exact syntax you need, hex, rgb, rgba, hsl, hsla, or oklch, with its copy button.
Check the contrast panels against white and black to see the ratio and AA/AAA result.
Adjust lightness or saturation to push a failing combination over the threshold it needs.

Examples

Get one color in six syntaxes

Land on a blue and instantly see it as a hex like #2563eb, as rgb(37, 99, 235), as hsl(217 91% 53%), and as an oklch value, among others. You copy whichever your context wants: hex for quick CSS, hsl for readable tweaking, oklch for a modern perceptual workflow.

Check text contrast before you ship it

Pick a light grey for body text. The panel shows its contrast ratio against white, and the AA badge fails because the ratio is under 4.5 to 1. You drag lightness down until the badge turns to pass, confirming the text will meet the standard for normal-size copy.

Make a tint by moving lightness

Start from a saturated brand color, then raise the lightness slider while leaving hue and saturation fixed. You get a paler tint of the same color for a hover state or a background, with the new hex and rgb values ready to copy. Lowering lightness instead yields a darker shade.

Frequently asked questions

Which color formats can I copy?: Six: hex, rgb, rgba, hsl, hsla, and oklch. They all describe the same color, so you copy whichever your stylesheet, framework, or design tool expects. The alpha is shown as fully opaque in the rgba and hsla strings.
What do the AA and AAA badges mean?: They report WCAG contrast compliance. AA passes at a ratio of 4.5 to 1 for normal text, and AAA at 7 to 1, which is stricter. The badges flip to pass once your color clears each threshold against the given background, white or black.
Why work in HSL instead of hex?: HSL separates hue, saturation, and lightness into independent dials, so you can lighten, darken, or desaturate a color predictably without recomputing channels by hand. Hex and rgb mix those qualities together, which makes deliberate adjustments much harder to reason about.
What is oklch and why is it included?: oklch is a modern CSS color space (lightness, chroma, hue) built to be perceptually uniform, meaning equal numeric steps look like equal visual steps. It makes generating even tints and accessible palettes more reliable than HSL, and it is supported in current browsers.
Is the contrast checked against my real background?: It is checked against pure white and pure black, the two extremes most interfaces sit near. If your actual background is a specific mid-tone, treat these as a guide and verify the exact pairing, since contrast depends on both colors involved.

Good to know

Contrast ratio is the heart of readable color. WCAG defines it from the relative luminance of two colors, with thresholds of 4.5 to 1 for normal text and 3 to 1 for large or bold text at AA, rising to 7 to 1 at AAA. Because luminance weights green far more heavily than blue, two colors that look similarly bright can have very different contrast, which is why measuring beats eyeballing.

Pick the format that fits the task: hex is compact and ubiquitous, rgb and rgba are easy to script, hsl and hsla are friendliest for hand-tuning, and oklch is the strongest choice for perceptually even tints and accessible color steps. One caveat: the AA and AAA checks here cover luminance contrast for legibility, the dominant accessibility concern, but they do not simulate color blindness. If your design relies on distinguishing hues, test it separately with a color-vision simulator.