⌘ K
hex · rgb · hsl · oklch · cmyk · live · local

Pick a color, get every format

A complete color picker. Type a HEX or use the native swatch, then copy HEX, RGB, HSL, HSV, HWB, CMYK or OKLCH. Runs locally in your browser.

Color Picker
HEX
#3b82f6
primary
RGB
59,130,246
byte
OKLCH lightness
62.31%
perceptual
Status
valid
live
Mode:
input · color
Live sample
output · preview
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217.2, 91.2%, 59.8%)
HSV
hsv(217.2, 76%, 96.5%)
HWB
hwb(217.2 23.1% 3.5%)
CMYK
cmyk(76%, 47.2%, 0%, 3.5%)
OKLCH
oklch(62.31% 0.188 259.8)
Tints & Shades
Color Harmony
Complementary#f6af3b
Analogous L#3be0f6
Analogous R#513bf6
Triadic L#f63b82
Triadic R#82f63b
Quick Start

How to pick and copy a color

Pick visually or paste a HEX. The picker computes every common CSS format and one click copies it.

  1. 01

    Pick or paste

    Use the OS-native color swatch to sample visually, or paste a HEX literal like #3b82f6 into the field. The tool accepts 3-, 6-, and 8-digit HEX (with alpha) and normalises shorthand to the full form for downstream conversion.

    HEX values map directly to sRGB, the gamut of every common monitor — for wide-gamut work see the Display P3 equivalent shown alongside OKLCH below.

    HEXsRGB8-digit alphaDisplay P3color picker
    input · HEX literal#RRGGBB · sRGB
    #3b82f6
    7 chars · validsRGB · D65
  2. 02

    Inspect formats

    Every CSS color notation refreshes as you type: HEX, RGB, HSL, HSV, HWB, CMYK, and OKLCH. The OKLCH row is the modern recommendation — it’s perceptually uniform, so equal numeric steps look like equal visual steps, unlike HSL.

    For accessibility work, the lightness component (the L in HSL or OKLCH) is a quick proxy for WCAG contrast — large gaps in lightness usually clear AA against a neutral background.

    OKLCHHSLWCAG contrastperceptualCSS Color 4
    output · 7 formatsOKLCH · perceptual
    hsl(217, 91%, 60%)
    7 rows · liveWCAG-aware
  3. 03

    Copy one or all

    Click any row to copy that single format to your clipboard. Use the Download menu to grab every format at once as a .txt snapshot — handy for design-token PRs, palette files, or a Slack message to a designer.

    For round-trips through other color spaces, hop to the Color Converter or the OKLCH Converter.

    clipboarddesign tokenspalettedesign systemround-trip
    row · copiedOKLCH · clipboard
    copied
    1 of 7 · readynavigator.clipboard
  4. 04

    Drop into CSS

    Paste into your stylesheet, design token JSON, Tailwind config, Figma, or any tool that speaks CSS color. Modern frameworks favour oklch(...) for tokens because mixing and lightening behave predictably.

    Everything stays in the browser — no swatch is uploaded, and the file download is generated locally via a Blob.

    CSSTailwinddesign tokensFigmaprivacy-first
    export · CSS variabletoken · ready
    color: var(--c)
    ready to ship0 outbound
Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Related toolsColor ConverterHEX ↔ RGBOKLCHColor InfoColor NameTailwind Finder
Use Cases

When to use a color picker

From quick CSS tweaks to building a design system.

CSS authoring

Paste HEX or HSL into stylesheets without leaving the browser. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Design tokens

Copy OKLCH to add perceptually-uniform tokens. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Theming

Pick brand primaries and exact variants for dark mode. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Code colors

Embed HEX values in source code or config files. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Quick conversion

Translate between HEX, RGB and HSL on the fly. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Web prototypes

Iterate on color quickly with live previews. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token
FAQ

Frequently asked questions

HEX, RGB, HSL, HSV, HWB, CMYK and OKLCH — the seven most common CSS color notations.
Yes — RGBA / HSLA alpha can be parsed from 8-digit HEX (#RRGGBBAA) input.
A modern perceptually-uniform color space supported by every evergreen browser. Best for design tokens.
They're a math approximation. Use printer ICC profiles for production print.
No — everything runs locally in your browser, nothing is uploaded.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!