RGB Color Picker

Set red, green and blue channels and copy the rgb() or rgba() value — with instant HEX, HSL, HSV, CMYK and OKLCH conversion.

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 #EF4444 0.97 c h);
--color-100: oklch(from #EF4444 0.94 c h);
--color-200: oklch(from #EF4444 0.87 c h);
--color-300: oklch(from #EF4444 0.78 c h);
--color-400: oklch(from #EF4444 0.68 c h);
--color-500: oklch(from #EF4444 0.58 c h);
--color-600: oklch(from #EF4444 0.5 c h);
--color-700: oklch(from #EF4444 0.42 c h);
--color-800: oklch(from #EF4444 0.34 c h);
--color-900: oklch(from #EF4444 0.26 c h);
--color-950: oklch(from #EF4444 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
#EF4444
HEX8
#EF4444FF
HEX8 (Android)
#FFEF4444
RGB
rgb(239, 68, 68)
RGB (%)
94%, 27%, 27%
HSL
hsl(0, 84%, 60%)
HSV / HSB
hsv(0, 72%, 94%)
CMYK
cmyk(0%, 72%, 72%, 6%)
OKLCH
oklch(0.6368 0.2078 25.33)
OKLCH (%)
oklch(63.68% 0.2078 25.33)
Decimal
15680580

Contrast & accessibility

A 5.58:1 vs black
A 3.76: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(#EF4444) → black
APCA Lc experimental 69.3 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
#A5A344 DarkKhaki
Deuteranopia
#AFBC44 DarkKhaki
Tritanopia
#E64444 IndianRed

Anomalous trichromacy

Protanomaly
#A5A344 DarkKhaki
Deuteranomaly
#AFBC44 DarkKhaki
Tritanomaly
#E64444 IndianRed

Monochromacy

Achromatopsia
#848484 Gray
Achromatomaly
#848484 Gray

Make colorblind-safe

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

#EF0071 DeepPink

What is RGB?

RGB is the additive color model screens use: every color is mixed from red, green and blue light, each from 0 to 255. A value looks like rgb(59, 130, 246), and rgba() adds transparency.

RGB and HEX are the same color

A HEX code is just RGB written in base-16: #3B82F6 is exactly rgb(59, 130, 246). Use RGB when your code manipulates channels or needs rgba() transparency; use HEX for compact CSS. Pick a color above to copy either.

Frequently asked questions

What is the RGB value of a color?
Three numbers from 0 to 255 giving the intensity of the red, green and blue channels. For example pure red is rgb(255, 0, 0).
How do I convert RGB to HEX?
Pick a color or type an rgb() value into the picker and Color Picker Lab shows the matching HEX code instantly — they are the same red/green/blue values in different number systems.
How do I add transparency to an RGB color?
Use rgba() with a fourth value — the alpha — from 0 (transparent) to 1 (opaque). Drag the alpha slider in the picker and copy the rgba() value.