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 it 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 it

  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

Real input, real output

#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.

04 — FAQ

Frequently asked

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

05 — More

Tools that pair well

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

Glassmorphism Generator

Visual builder for frosted-glass cards. Sliders for blur, opacity, saturation, border — copy CSS or Tailwind.

Color/glassmorphism