Search for a command to run...
Pick or paste a color and instantly see it in HEX, RGB, HSL, HSV, and CMYK. Sliders, eyedropper, and contrast checks — all local in your browser.
#3B82F6
rgb(59, 130, 246)
#3b82f6#3b82f6ffrgb(59, 130, 246)hsl(217, 91%, 60%)hsv(217, 76%, 96%)cmyk(76%, 47%, 0%, 4%)bg-[#3b82f6]Use the native color picker, drop in any HEX, rgb(), hsl(), or even a CSS color name like "tomato". Invalid input is highlighted instead of guessed.
Drag the H, S, L, and α sliders to fine-tune the value. Each slider's track shows the gradient you're moving along, so the next step is always visible.
Hover any row in the formats panel and click the copy icon. HEX, RGB, HSL, HSV, CMYK, and a Tailwind arbitrary class are generated from one source — they always agree.
The contrast strip shows the WCAG ratio on white and on black, with AA / AAA / Fail badges, so you can pick a color that's actually readable.
A color model is a way to describe a color as a small set of numbers. The web speaks several at once: HEX and RGB describe how much red, green, and blue light to mix; HSL and HSV describe a hue and how vivid or dark it is; CMYK describes how much ink to lay down on paper. The same color can be written in any of these — this tool keeps them in sync from a single source so you never lose precision when copying between design tools, code, and print.
Convert a HEX from a Figma file to an HSL value when you need to programmatically lighten or darken it in CSS, or grab a Tailwind arbitrary class to drop straight into JSX.
Translate a brand palette between print (CMYK) and screen (RGB / HEX) so the same color is communicated correctly to designers, developers, and printers.
Verify a foreground/background pair meets WCAG AA (4.5:1) or AAA (7:1) contrast before shipping. The strip below the formats grades the color against pure white and pure black.
Build a color reference for a design system: paste a token, copy every common format at once, and document it next to the swatch with a known-good value.
Three or four byte pairs (#RRGGBB or #RRGGBBAA). Compact and case-insensitive — the most common format in CSS, design tools, and code.
Each channel as 0–255 (or a percentage). The native representation of pixels on a screen — what GPUs and image formats actually store.
Hue in degrees around the color wheel, saturation and lightness as percentages. Easier than RGB for tweaks like "a slightly lighter blue".
Same hue as HSL but "value" is the brightness of the most lit channel. The model most painting and image-editing tools expose in their pickers.
Subtractive percentages for ink. Use it whenever a color leaves the screen and goes to a printer — values may differ from RGB for vivid colors outside the print gamut.
Transparency from 0 (invisible) to 1 (opaque). Appended to RGB, HSL, or HEX as a fourth channel — the swatch above shows it composited over a checker.
Format megabytes of JSON in milliseconds.
Data never leaves your browser for maximum privacy.
Works perfectly even without an internet connection.