Large text, 24 px
Normal body text at 15 px. The quick brown fox jumps over the lazy dog.
Convert HSL to a HEX code: hsl(210, 100%, 50%) is #0080FF, a pure azure. HSL is easy to reason about when designing, and HEX is what most style guides and tools ask for, so convert once and copy it.
How to use
- Tap the big swatch to open the color picker, use the eyedropper to grab a color from your screen, or type in any field.
- Paste any CSS color (#hex, rgb(), hsl(), hwb(), oklch(), lab(), a color name…) into any field, or anywhere on the page.
- Tap the copy button next to a format to copy it. Drag Opacity to add transparency.
- In the palette, tap a swatch to make it the current color; long-press (or right-click) a swatch to copy its HEX. On Contrast, set text and background colors and tap a suggestion to fix a failing pair.
- WCAG 2.1 asks for 4.5:1 for normal text (AA) and 7:1 for AAA. Large text (24 px, or 18.66 px bold) needs 3:1 for AA and 4.5:1 for AAA. UI components and graphics need 3:1.
- Suggestions keep the hue and saturation and change only the lightness (in OKLCH) to reach the nearest passing value.
- Semi-transparent colors are blended over the background before the ratio is calculated.
- CMYK values are a simple device-independent conversion; for print, use your printer’s color profile.
- Your recent colors are stored only in this browser.
The color formats explained
HEX is the six-digit code used in CSS and design tools, where #1E88E5 means red 1E (30), green 88 (136) and blue E5 (229). RGB writes the same values in decimal, from 0 to 255. HSL describes hue (0–360°), saturation and lightness, which makes it easy to darken or soften a color. HSV is the model behind most picker squares.
OKLCH is a newer CSS format built on the perceptual Oklab space: equal steps in lightness look equally different, so it is well suited to building scales and accessible palettes. CMYK describes ink coverage for print; the values here are a simple device-independent conversion, so use your printer’s profile for exact print colors.
Converting by hand
To turn HEX into RGB, split the code into three pairs and convert each from base 16: #FF6347 becomes 255, 99, 71. CMYK from RGB is K = 1 − max(R, G, B) / 255, then C = (1 − R/255 − K) / (1 − K) and the same for M and Y; pure orange rgb(255, 165, 0) is cmyk(0%, 35%, 100%, 0%). The tool does all of this instantly and accepts names, rgb(), hsl(), hwb(), lab() and oklch() input.
Building a palette
Tints mix the color with white and shades with black, giving lighter and darker steps for backgrounds, borders and hover states. Harmony palettes rotate the hue: complementary (180°), analogous (±30°), triadic (120°) and tetradic (90° steps). Your recent colors are kept in this browser only.
Frequently asked questions
How do I convert HEX to RGB?
Paste the HEX code into any field and copy the RGB value. By hand, split the code into pairs and convert each from hexadecimal: #1E88E5 is rgb(30, 136, 229).
How do I pick a color from my screen?
Tap the eyedropper and click anywhere on your screen. It works in browsers that support the EyeDropper API, such as Chrome and Edge on desktop.
What is OKLCH and why use it?
OKLCH is a CSS color format with lightness, chroma and hue based on the Oklab model. Changing only the lightness gives evenly spaced steps that keep the same hue, which plain HSL does not.
Are the CMYK values accurate for printing?
They are a mathematical conversion without a color profile. Printed colors depend on paper, ink and press, so use the CMYK values from your printer’s profile for brand-critical work.
Can I add transparency?
Yes. Drag Opacity and every format updates: HEX gets an alpha pair (#RRGGBBAA) and the CSS functions get an alpha value.
Is my color history saved?
Recent colors are stored only in this browser on your device. Nothing is sent to a server.