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
Learn how this works
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.

About the Color Picker

The Color Picker gives you a fast, free answer for colour and design work without sending anything off your device. 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.

How it works

Type in what you have, and the answer shows up right away. Change anything and it updates by itself. Everything runs in your browser, so it is fast and nothing you type is sent away.

Want the deeper story? The Knowledge Base explains the ideas behind the tools in more detail.

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.

Can I paste a color in directly?

Yes — paste any format (hex, rgb(), hsl(), oklch(), or a CSS color name) into the search box or any of the format fields, and every other field updates to match. There is nothing to convert manually.

How do I use the Color Picker?

Just type your numbers. The answer shows up right away — there is no button to press. Change anything and it updates by itself.

Does it cost anything or need an account?

No. The tool is completely free, there is no account to create, and it keeps working offline after the page first loads.

Is anything I type uploaded?

No. The tool works entirely on your device, so the values you enter never leave your browser.

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: