Pick a color, get every code
Drag to choose any color and read its HEX, RGB, HSL, HSV, OKLCH and CMYK values instantly. Build harmonies, shades and tints, then export to CSS, Tailwind or Figma — all free, no signup.
#f54927, rgb(245,73,39), hsl(10,91%,56%), oklch(0.65 0.21 33), tomatoColor codes
Click any value to copy it.
Shades
Tints
Tones
Design token scale OKLCH
A perceptually-even 50–950 scale from your colour — ready to paste into Tailwind, CSS or your design system. Every shade shows its WCAG contrast, checked for you.
Each badge shows the WCAG contrast of that shade against its most legible text colour, checked for you — so you can see at a glance which steps are safe for body text.
How the color picker works
The large square sets two things at once: drag left and right to change saturation, and up and down to change brightness. The rainbow slider below it sets the hue. Every code on the right updates the instant you move, so you always see the exact HEX, RGB, HSL, HSV, OKLCH and CMYK values for your color.
Prefer to type? Paste any code into the input box. The picker understands #f54927, rgb(245, 73, 39), hsl(10, 91%, 56%), hsv(10, 84%, 96%), oklch(0.65 0.21 33) and even named colors like tomato — and jumps straight to that color.
HEX, RGB, HSL, HSV and OKLCH — which to use
HEX and RGB describe the same thing: how much red, green and blue make up a color. HEX is just a shorter way to write it, which is why you see it most in CSS and design tools.
HSL and HSV describe color the way people think — by hue, then how vivid and how light or dark it is. They make it easy to find a "slightly lighter" or "less saturated" version of a color.
OKLCH is the modern CSS format. Because it is built around human perception, changing its lightness or chroma produces results that look consistent across different hues — something HSL struggles with. It is supported in all current browsers and is becoming the default for serious design systems.
Building a palette: shades, tints and tones
From any single color you can derive a full palette. A shade is the color mixed with black, a tint is the color mixed with white, and a tone is the color mixed with gray. The three strips on this page generate these automatically — click any swatch to make it your new base color.