Color Picker
Pick a color or type a HEX, RGB or HSL value to get the other two, the CSS and CMYK forms, and its WCAG contrast ratio on white, black or a second color. How it works
Use the Color Picker
HSL is rounded to whole numbers; HEX and RGB are exact.
Contrast
WCAG 2.x contrast ratio of #3B82F6 against white, black and a second color. AA needs 4.5 (normal text) or 3 (large text); AAA needs 7 or 4.5.
| Against | Ratio | AA normal (4.5) | AA large (3) | AAA normal (7) | AAA large (4.5) |
|---|---|---|---|---|---|
| On white #FFFFFF | 3.68:1 | Fail | Pass | Fail | Fail |
| On black #000000 | 5.71:1 | Pass | Pass | Fail | Pass |
| On your second color #0F172A | 4.85:1 | Pass | Pass | Fail | Pass |
About the Color Picker
Pure red is #FF0000 in HEX, rgb(255, 0, 0) in RGB and hsl(0, 100%, 50%) in HSL: three ways of writing one color. Pick a color or type any of the three forms into this color picker and it fills in the other two, the CSS and CMYK forms, and the WCAG contrast ratio against white, black and a second color.
The 16 basic web colors: HEX, RGB, HSL and contrast
| Color | HEX | RGB | HSL | Contrast on white | AA text on white | Contrast on black | AA text on black |
|---|---|---|---|---|---|---|---|
| black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | 21.00:1 | Pass | 1.00:1 | Fail |
| silver | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | 1.82:1 | Fail | 11.54:1 | Pass |
| gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | 3.95:1 | Fail | 5.32:1 | Pass |
| white | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | 1.00:1 | Fail | 21.00:1 | Pass |
| maroon | #800000 | rgb(128, 0, 0) | hsl(0, 100%, 25%) | 10.95:1 | Pass | 1.92:1 | Fail |
| red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | 4.00:1 | Fail | 5.25:1 | Pass |
| purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | 9.42:1 | Pass | 2.23:1 | Fail |
| fuchsia | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) | 3.14:1 | Fail | 6.70:1 | Pass |
| green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) | 5.14:1 | Pass | 4.09:1 | Fail |
| lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | 1.37:1 | Fail | 15.30:1 | Pass |
| olive | #808000 | rgb(128, 128, 0) | hsl(60, 100%, 25%) | 4.20:1 | Fail | 5.01:1 | Pass |
| yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | 1.07:1 | Fail | 19.56:1 | Pass |
| navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) | 16.01:1 | Pass | 1.31:1 | Fail |
| blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | 8.59:1 | Pass | 2.44:1 | Fail |
| teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | 4.77:1 | Pass | 4.40:1 | Fail |
| aqua | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) | 1.25:1 | Fail | 16.75:1 | Pass |
The names and HEX values are the 16 basic CSS color keywords. “AA text” is the WCAG level AA test for normal-size text, which needs at least 4.5:1. For a color you enter, the picker also shows AA for large text (3:1) and AAA for normal and large text (7:1 and 4.5:1). The picker takes HEX, RGB or HSL input, not color names.
Frequently asked questions
- How do I convert HEX to RGB?
- Split the six digits into three pairs and read each pair as a base-16 number from 0 to 255. #FF8800 is FF = 255, 88 = 136 and 00 = 0, so rgb(255, 136, 0). A three-digit code doubles each digit: #fff is #ffffff.
- What is the difference between RGB and HSL?
- RGB gives the amounts of red, green and blue, each from 0 to 255. HSL describes the same color as a hue angle from 0 to 360, a saturation and a lightness from 0 to 100%. #1E90FF is rgb(30, 144, 255) or hsl(210, 100%, 56%). HSL is the easier one to adjust by hand, because lowering the last number darkens the color without changing its hue.
- What contrast ratio does text need?
- WCAG 2.2 level AA asks for at least 4.5:1 for normal text and 3:1 for large text, meaning 18 point, or 14 point bold. Level AAA asks for 7:1 and 4.5:1. The picker shows pass or fail for all four.
- Does #777777 pass contrast on white?
- No. #777777 on white is 4.48:1, just under the 4.5:1 that AA needs for normal text. #767676 is 4.54:1 and passes. WCAG says the computed ratio is not to be rounded up to meet a threshold.
- Can I enter a color with transparency?
- Yes. Paste rgba(), hsla() or a 4- or 8-digit HEX value and the alpha, kept to two decimals, appears in three extra rows: #3b82f680 gives #3B82F680, rgba(59, 130, 246, 0.5) and hsla(217, 91%, 60%, 0.5). The swatch, the HEX, RGB and HSL fields and the contrast figures use the opaque color.
- How is CMYK calculated?
- With the plain formula: K = 1 − the largest of R, G and B as a fraction, then C, M and Y from what is left. #3B82F6 gives cmyk(76%, 47%, 0%, 4%). No color profile is applied, so do not use the figures for print proofs.
Related Tools
View all toolsRGB to Hex
Convert RGB to a hex color code and back: rgb(255, 136, 0) is #FF8800. Paste #abc, ff8800 or 255,136,0; each channel is a whole number 0 to 255.
Hex to RGBA Converter
Convert hex to rgba(): #007BFF is rgba(0, 123, 255, 1). Reads 3, 4, 6 and 8-digit hex or rgb()/rgba(), sets the opacity, and gives hsla() and 8-digit hex.
Color Contrast Checker
Enter a text and a background color, with opacity, to get the WCAG contrast ratio and AA and AAA pass or fail for normal and large text.
Color Palette Generator
Make a 5-color palette from one hex color: monochromatic, complementary, analogous, triadic or split-complementary, with WCAG contrast for each swatch.
Color Mixer
Mix two to four hex colors by weight in OKLab, sRGB or linear light: red and blue at 50% give #8c53a2 in OKLab. Copy HEX, RGB, HSL, OKLCH or CSS color-mix().
CSS Gradient Generator
Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.