Color Picker Lab

HEX Color Picker

Pick any color and copy every format — HEX, RGB, HSL, OKLCH and more — plus shades, palettes, harmonies and a live WCAG contrast check. Free, no signup; your colors never leave your browser.

From image

Shades, tints & tones

Tints

Shades

Tones

OKLCH ramp

Perceptual 50→950 scale, computed in OKLCH. Copy it as CSS custom properties using relative-color syntax — each stop keeps the base hue and chroma.

  1. 50
  2. 100
  3. 200
  4. 300
  5. 400
  6. 500
  7. 600
  8. 700
  9. 800
  10. 900
  11. 950
--color-50: oklch(from #3B82F5 0.97 c h);
--color-100: oklch(from #3B82F5 0.94 c h);
--color-200: oklch(from #3B82F5 0.87 c h);
--color-300: oklch(from #3B82F5 0.78 c h);
--color-400: oklch(from #3B82F5 0.68 c h);
--color-500: oklch(from #3B82F5 0.58 c h);
--color-600: oklch(from #3B82F5 0.5 c h);
--color-700: oklch(from #3B82F5 0.42 c h);
--color-800: oklch(from #3B82F5 0.34 c h);
--color-900: oklch(from #3B82F5 0.26 c h);
--color-950: oklch(from #3B82F5 0.18 c h);

Saved colors

Saved colors

No saved colors yet. Pick a color and tap Save to keep it here.

Recent

Colors you pick will show up here.

Formats

HEX
#3B82F5
HEX8
#3B82F5FF
HEX8 (Android)
#FF3B82F5
RGB
rgb(59, 130, 245)
RGB (%)
23%, 51%, 96%
HSL
hsl(217, 90%, 60%)
HSV / HSB
hsv(217, 76%, 96%)
CMYK
cmyk(76%, 47%, 0%, 4%)
OKLCH
oklch(0.6224 0.1867 259.7)
OKLCH (%)
oklch(62.24% 0.1867 259.7)
Decimal
3900149

Contrast & accessibility

A 5.7:1 vs black
A 3.69:1 vs white
  • AA normal ≥ 4.5 Pass
  • AA large ≥ 3 Pass
  • AAA normal ≥ 7 Fail
  • AAA large ≥ 4.5 Pass

Recommended text color: black

CSS contrast-color() contrast-color(#3B82F5) → black
APCA Lc experimental 69.5 Lc · large / secondary text (white text)

WCAG 2.1 AA/AAA is the compliance floor; APCA is an optional readability metric.

Harmonies

Complementary

Analogous

Triadic

Split-complementary

Tetradic

Square

Monochromatic

Color blindness

Roughly 1 in 12 men and 1 in 200 women have some color-vision deficiency. Here is how this color looks under the eight common types.

Dichromacy

Protanopia
#5A5AD9 SlateBlue
Deuteranopia
#5650D3 SlateBlue
Tritanopia
#3FC3BE MediumTurquoise

Anomalous trichromacy

Protanomaly
#5A5AD9 SlateBlue
Deuteranomaly
#5650D3 SlateBlue
Tritanomaly
#3FC3BE MediumTurquoise

Monochromacy

Achromatopsia
#858585 Gray
Achromatomaly
#858585 Gray

Make colorblind-safe

Adjusted for deuteranomaly — the most common deficiency — so it stays distinguishable.

#3BA1FF DodgerBlue

Drag the picker, type any code (HEX, RGB, HSL, or OKLCH), or use the eyedropper to grab a color from anywhere on screen.

How to use the color picker

Drag inside the color field to choose saturation and brightness, and move the hue slider to change the base color. Prefer numbers? Type any value — #3B82F6, rgb(59, 130, 246), hsl(217, 91%, 60%), or oklch(0.62 0.19 260) — into any field and every other format updates instantly. Use the alpha slider to add transparency. Click any code to copy it. Hit the eyedropper to sample a color from anywhere on your screen, or load an image to pick a color from a photo or screenshot.

What is a HEX color code?

A HEX color code is a six-digit, hexadecimal representation of a color, written as #RRGGBB. Each pair of characters sets the intensity of one channel — Red, Green, and Blue — from 00 (none) to FF (full), which is 0 to 255 in decimal. For example, #FF0000 is pure red (red at maximum, green and blue at zero). Because each of the three channels has 256 possible values, HEX codes describe exactly 16,777,216 colors (256 × 256 × 256). HEX is the most common way to specify color on the web because it’s compact and unambiguous — every modern browser, design tool, and CSS file understands it.

HEX, RGB, HSL, HSV, CMYK & OKLCH — which format should you use?

They all describe the same color in different number systems. Pick the one that fits the job:

FormatLooks likeBest for
HEX#3B82F6The web default — CSS, HTML, design tools
HEX8#3B82F680A web color with transparency (last pair = alpha)
RGB / RGBArgb(59, 130, 246)Screens, code that manipulates channels, transparency via RGBA
HSL / HSLAhsl(217, 91%, 60%)Adjusting a color by hue, saturation, and lightness
HSV / HSBhsv(217, 76%, 96%)Color pickers and image editors (the “brightness” model)
CMYKcmyk(76%, 47%, 0%, 4%)Print — cyan, magenta, yellow, black inks
OKLCHoklch(0.62 0.19 260)Modern CSS — perceptually even lightness and clean shade scales

HEX and RGB are the same information in different bases — #3B82F6 is exactly rgb(59, 130, 246). HSL and HSV make a color easier to adjust by hand. CMYK is for ink on paper and can’t reproduce every screen color (bright screen colors often print duller). OKLCH is the newest and is now supported in every major browser; it’s perceptually uniform, so equal changes in its lightness value look like equal changes to your eye — which makes it the best format for building consistent shade scales and accessible palettes.

Adding transparency: 8-digit HEX and alpha

To make a web color semi-transparent, add a fourth value — the alpha channel — where 00 is fully transparent and FF is fully opaque. In HEX that becomes an 8-digit code, #RRGGBBAA: for example #3B82F680 is blue at about 50% opacity (80 hex ≈ 128 ≈ 50%). The same transparency in RGB is rgba(59, 130, 246, 0.5) and in HSL is hsla(217, 91%, 60%, 0.5). The native browser color input can’t do alpha — Color Picker Lab can. Drag the alpha slider and copy any of the three transparent formats.

Shades, tints, and tones

These are the three ways to vary a color:

  • A tint is the color mixed with white — lighter and softer.
  • A shade is the color mixed with black — darker and deeper.
  • A tone is the color mixed with gray — muted and calmer.

Color Picker Lab generates a full scale of each from whatever color you pick, with the code under every swatch. Tints, shades, and tones are how you build a usable range — backgrounds, borders, hover states, and text — from a single brand color.

Color harmonies

Color harmonies are sets of colors that look good together because of where they sit on the color wheel. The common rules:

  • Complementary — the color directly opposite (highest contrast).
  • Analogous — the neighbors on either side (calm, cohesive).
  • Triadic — three colors evenly spaced (balanced and vibrant).
  • Split-complementary — a color plus the two neighbors of its opposite.
  • Tetradic / square — four colors forming a rectangle on the wheel.
  • Monochromatic — one hue at different lightness and saturation.

Pick any color and Color Picker Lab shows each harmony with copyable codes, so you can build a palette in seconds.

Color accessibility and contrast (WCAG)

If text and background don’t contrast enough, people can’t read it — so the Web Content Accessibility Guidelines (WCAG 2.1) set minimum contrast ratios. The thresholds:

  • AA: at least 4.5:1 for normal text, 3:1 for large text (≈ 18px bold or 24px regular) and for user-interface elements.
  • AAA: at least 7:1 for normal text and 4.5:1 for large text.

Color Picker Lab shows the contrast ratio of your color against black and white right next to the picker, with a clear pass/fail for each level — and can nudge a failing color to the nearest shade that passes. Use it before you ship so your colors are readable by everyone, including the roughly 1 in 12 men and 1 in 200 women with color-vision deficiency.

Exporting colors to code

When you’ve got a color or a palette, export it the way your project expects — CSS custom properties, SCSS variables, a Tailwind theme (v4 @theme or a v3 config), JSON, or W3C design tokens — all available from the export menu, with OKLCH included. Copy a single value, or download the whole palette.

Frequently asked questions

What is the HEX code for a color?
A HEX code is the color written as #RRGGBB, where each pair of characters is the red, green, and blue intensity from 00 to FF. Pick a color above and Color Picker Lab shows its HEX code; click to copy it.
How do I get the HEX code from an image?
Use “Pick from image,” load your photo or screenshot, and click the pixel you want — Color Picker Lab returns its HEX, RGB, and HSL codes and can pull a full palette from the image.
Is Color Picker Lab free?
Yes. Every feature is free, there’s no signup, and your colors are processed entirely in your browser — nothing is uploaded.
What’s the difference between HEX and RGB?
None, mathematically — they’re the same red/green/blue values in different number systems. #FF0000 and rgb(255, 0, 0) are identical.
What is OKLCH and should I use it?
OKLCH is a modern color format now supported in all major browsers. It’s perceptually uniform, so it’s the best choice for consistent shade scales and accessible color systems. Color Picker Lab outputs OKLCH for every color.
Can I add transparency to a HEX color?
Yes — use an 8-digit HEX code (#RRGGBBAA) or RGBA/HSLA. Drag the alpha slider and copy any transparent format.