Pick a color from the wheel or from an image, and see its color codes and name.

Steps

On the Color tab, pick a color with the ring and the diamond.
- Open Adjust color to set it with numbers.
- Select Add to put the color in your palette.
- Select Codes to copy its color code in the format you need.
On the Image tab, load an image and drag it until the color you want is in the center.
On the Scheme tab, see colors that go with yours, such as its complementary and analogous colors. Select Add all to put them all in your palette.
On the Palette tab, rename your colors, add notes and reorder them. You can also copy them all from Data.

Notes

Your palette is saved only on this device, and clearing your browser data deletes it. To keep important colors, copy them from Data.

Images you load stay on your device and are never uploaded.

Color code formats

There are several ways to represent a color as numbers, and different tools and workflows favor different formats. Codes shows these nine.

HEX
The most familiar format on the web. A HEX code like #FF5733 uses six hexadecimal digits after a # — two for red, two for green, two for blue, each ranging from 00 to FF. You'll see HEX codes in CSS, design specs, and style guides everywhere.

RGB
Stands for Red, Green, Blue — the three values (0–255) that match how screens actually produce color by mixing light. In CSS you can write rgb(255, 87, 51). HEX and RGB are really the same thing in different notation, so converting between them doesn't change the color at all.

HSL
Describes color as Hue (0°–360°), Saturation (0%–100%), and Lightness (0%–100%). It's intuitive for adjustments — "make it a bit brighter" or "tone down the saturation" — because each axis maps to how we naturally think about color. CSS supports hsl(14, 100%, 60%) directly.

HSV
Similar to HSL, but Value replaces Lightness. Most color pickers in tools like Photoshop and Figma use HSV, and so do this tool's wheel and diamond. The key difference: in HSL, white is at L=100%; in HSV, pure vivid colors sit at V=100%.

HWB
Hue, Whiteness, Blackness — think of it as mixing white or black paint into a pure hue. It became an official part of CSS Color Level 4, and its mental model can feel more natural than percentages of saturation and lightness.

CMYK
Cyan, Magenta, Yellow, Key (black) — the ink model used in printing. Screens mix light (RGB); printers mix ink (CMYK), which is why on-screen colors don't always match what comes off the printer. The CMYK values here are a guide, worked out without a print color profile.

CIE Lab
A color space modeled on human perception: L for lightness, a for green-to-red, b for blue-to-yellow. Its main strength is measuring how different two colors look — the delta-E (ΔE) metric — which makes it standard in industrial quality control and color science.

OKLab & OKLCH
An improved successor to CIE Lab with better perceptual uniformity. OKLCH uses Lightness, Chroma, and Hue in cylindrical coordinates, so it feels a lot like HSL but with more accurate gradients. CSS now supports oklch(), and designers are adopting it for smoother color transitions.