Color Picker

Interactive HSV color picker with live conversion across HEX, RGB(A), HSL(A), HSV/HSB, HWB, CMYK, LAB, LCH, OKLAB, OKLCH, and 148 CSS named colors. Paste any format, search by name, copy any value.

Picker Color & Design Updated May 23, 2026
X Facebook LinkedIn Reddit Email
How to Use
  1. Drag on the saturation/value canvas to pick how vivid and how bright the color should be.
  2. Drag the hue slider for the rainbow rotation, the alpha slider for transparency.
  3. Type or paste in any format field — HEX, rgb(), hsl(), hsv(), oklch() etc. — every other field syncs.
  4. Search by name (red, salmon, cornflowerblue…) — 148 CSS color names are matched as you type.
  5. Click any output to copy it. Recent colors are saved in the strip at the bottom.
Recent
——

Color formats explained

HEX
#RRGGBB or #RRGGBBAA
Compact static CSS. 3-digit and 4-digit shorthand also accepted.
RGB / RGBA
rgb(R G B) or rgb(R G B / A)
Universal. Comma or space separated; modern slash-alpha syntax supported.
HSL / HSLA
hsl(H S% L%)
Hue is angular, S/L are perceptual but uneven across hue.
HSV / HSB
Photoshop / Figma native
Saturation × Value (Brightness). 100% V = white at 0% S, full color at 100% S.
HWB
hwb(H W% B%)
Hue + how much white + how much black. Reads naturally for tinting/shading.
CMYK
cmyk(C% M% Y% K%)
Subtractive ink mix for print. Approximation of sRGB.
LAB / LCH
lab(L a b), lch(L C H)
CIE 1976 perceptual space. LCH is LAB in polar form.
OKLAB / OKLCH
Modern perceptual
2020 successor to LAB with much better hue uniformity. The recommended choice for design systems.
Named colors
148 CSS keywords
red, salmon, cornflowerblue, papayawhip, rebeccapurple — every standard name.

Frequently Asked Questions

Why so many formats?

Each has a use case. HEX is compact for static CSS. RGB(A) is universal. HSL is theme-friendly. HSV/HSB matches Photoshop. HWB reads well. LAB / LCH are perceptually uniform. OKLAB / OKLCH (CSS Color 4) are the modern perceptual choice with better hue uniformity. CMYK is for print.

What is OKLCH and should I use it?

OKLCH is a perceptually uniform color space designed in 2020. Equal numeric changes in lightness look like equal visual steps — unlike HSL where 50% lightness blue looks much darker than 50% yellow. It is the recommended choice for design-system palettes if you support modern browsers (Chrome 111+, Safari 15.4+, Firefox 113+).

Are LAB/OKLAB values accurate?

They are accurate within sRGB. Wide-gamut (P3) colors will get clamped to sRGB when you copy the hex/rgb output. The LAB/OKLCH outputs themselves stay in their native space.

Does it support paste from the global FAB?

Yes — the HEX field has data-paste-accept, and you can also paste any format into any of the input fields directly.

Common Use Cases

Design system tokens

Pick a base hue then read off the LAB/OKLCH values for systematic lightness scales.

CSS color refactor

Paste a hex from legacy CSS, get the modern oklch() equivalent.

Print prep

Pick a screen color and read off the CMYK approximation for print specifications.

Cross-tool sharing

Copy from Figma in rgba() format, paste here, get hex for Tailwind arbitrary values.

Last updated: