Color wheel, palettes and contrast checker
Pick harmonies on a color wheel, convert between HEX, RGB, HSL and OKLCH, generate palettes and shades, check WCAG contrast and how colors look with color blindness, build gradients and pick colors from the screen, a photo or the camera. Everything stays on your device.
Current color
Harmony
Colors
Drag any marker: the others follow the rule. With the keyboard: Tab to a marker, arrows turn the hue and change saturation, Shift for bigger steps.
About this color
Every format
Type or paste any of these into the field at the top: hex, rgb(), hsl(), hwb(), oklch(), oklab(), lab(), lch(), color(display-p3 …), a CSS name or three numbers.
Palette from a photo
Shades 50–950
Lightness falls in equal OKLCH steps, so 400 and 600 look equally far from 500; the current color lands on the nearest step, and chroma fades towards the ends the way hand-made scales do. Every step is inside sRGB.
Tints, tones and shades
Mixed in OKLab with white (tints), grey (tones) and black (shades): even steps, no muddy middle.
Neutrals with a hint of the color
Code
The quick brown fox jumps over the lazy dog. Body text, 16 px.
Large text, 24 px
Large bold text, 18.7 px
APCA (reference only)
Nearest passing color
Contrast of the whole palette
Rows are text, columns are backgrounds. AA: 4.5 or more; AA large: 3 or more, also enough for icons, borders and other graphics; AAA: 7 or more. Tap a cell to check that pair above.
Your palette
Colors that merge
A picture
Stops
Interpolation
CSS
The camera picture is read on this device only, a few times a second, and never recorded. Colors from a camera depend on the light and the white balance: good for matching paint or fabric roughly, not for exact values.
Move over the picture (or drag a finger) to see the pixels; click or lift the finger to take the color.