Color Picker & Converter

Pick or paste a color, get every format — hex, RGB, HSL, OKLCH, CMYK, and the closest named color.

Preview

#ff7a59

HEX#ff7a59
RGBrgb(255, 122, 89)
HSLhsl(12, 100%, 67%)
OKLCHoklch(72.9% 0.170 35.1)
CMYKcmyk(0%, 52%, 65%, 0%)
Namedcoral

01 — Overview

How the Color Picker & Converter works

A single-color workbench: enter any format, see all the others. Includes hex, RGB, HSL, OKLCH, CMYK, and the closest CSS named color. Pick from a native color picker or type a value. Conversions are deterministic and run entirely in the browser.

02 — Use cases

When to use the Color Picker & Converter

  1. 01

    Convert a hex code from a screenshot into RGB for a print spec

  2. 02

    Get the OKLCH equivalent of a Figma color for use in Tailwind v4

  3. 03

    Find the closest CSS named color for a hex value

  4. 04

    Sanity-check a CMYK value before sending to a printer

03 — Examples

Color Picker & Converter examples

#ff7a59

ex 01

rgb(255, 122, 89) · hsl(11, 100%, 67%) · oklch(73% 0.18 30)

Same color in three different formats.

rgb(48, 209, 88)

ex 02

#30d158 · hsl(135, 63%, 50%) · closest named: limegreen

Apple's system green, with its named-color neighbor.

rebeccapurple

ex 03

#663399 · rgb(102, 51, 153) · hsl(270, 50%, 40%)

A CSS named color resolved into the three most common notations.

oklch(72% 0.19 30)

ex 04

#ff7a59 · rgb(255, 122, 89) · hsl(11, 100%, 67%)

Going the other direction — a modern OKLCH value converted back to legacy formats.

04 — FAQ

Color — frequently asked questions

Is OKLCH lossless from sRGB?

Within the sRGB gamut, yes. Some OKLCH values lie outside sRGB (wide-gamut displays) — the tool flags those and shows the clamped sRGB equivalent.

How accurate is the CMYK conversion?

CMYK is device-dependent and requires a color profile for true accuracy. The tool uses a naive sRGB→CMYK formula that's fine for screen reference but should not be used in place of a print-side conversion.

What does 'closest named color' mean?

CSS defines about 150 named colors (red, dodgerblue, lavenderblush, etc). The tool finds the one with the smallest perceptual distance to your input using ΔE in OKLCH.

Which color format should I actually use in CSS?

Hex is fine for one-off static values and is still the most portable. Use OKLCH for anything you generate a scale from — tints, shades, hover states — because equal lightness steps look equal to the eye. OKLCH has been supported in all major browsers since 2023.

How is the contrast ratio calculated?

As (L1 + 0.05) / (L2 + 0.05), where L is the relative luminance of the lighter and darker color. The result runs from 1:1 for identical colors to 21:1 for black on white. WCAG 2.2 asks for at least 4.5:1 for body text, and 3:1 for large text (24px regular or 18.66px bold) and for UI component boundaries.

Can hex codes include transparency?

Yes — eight-digit hex adds an alpha byte, so #ff7a5980 is the same color at 50% opacity. It's supported in every current browser. Four-digit shorthand (#f7a8) works the same way as three-digit shorthand does for opaque colors.

05 — Reference

Specs and further reading

The primary sources this tool follows. Where behaviour is defined by a specification, we link the specification rather than a summary of it.

07 — More

Tools that pair with Color

AI

Color Palette Generator

Type a vibe — 'desert at dusk', 'cyberpunk lab' — and get a 5-color palette with hex, RGB, HSL, and OKLCH for every swatch.

Color/palette

CSS Gradient Generator

Build linear and radial gradients visually. Pick stops, angle, and direction; copy as CSS or Tailwind arbitrary value.

Color/gradient

CSS Box Shadow Generator

Build CSS shadows with sliders for offset, blur, spread, color, and opacity. Live preview, multi-shadow stacking, copy as CSS or Tailwind.

Color/box-shadow

Last updated .