Color Converter & Picker
Pick a color or type HEX, RGB, or HSL — every format updates instantly, plus shades, tints, harmonies, and WCAG contrast ratios.
Shades — mixed with black, 10%–100%
Tints — mixed with white, 10%–100%
Color harmonies
Complementary +180°
Analogous ±30°
Triadic 120° apart
One color, three notations
This converter keeps HEX, RGB, and HSL in sync as you type into any one of them or drag the native color picker, so you never have to run a value through a separate converter mid-design. Past straight conversion it also builds ten-step shade and tint ladders, complementary/analogous/triadic harmony swatches, and WCAG contrast scores against white and black text — everything you'd normally check across three or four separate tools, in a single pass, entirely in your browser.
Worked examples
Matching a brand red across design tools
A designer receives a brand red as a swatch labeled #FF0000 and needs the exact RGB and HSL equivalents to hand off to a developer writing CSS custom properties.
- HEX
- #FF0000
- RGB
- rgb(255, 0, 0)
- HSL
- hsl(0, 100%, 50%)
Pure red sits at hue 0°, full saturation, mid lightness — a textbook primary color.
Picking readable button text on a UI blue
A frontend developer styles a "Save" button with the blue #2563EB and needs to know whether white or black label text clears the WCAG AA contrast minimum of 4.5:1.
- HEX
- #2563EB
- RGB
- rgb(37, 99, 235)
- HSL
- hsl(221, 83%, 53%)
White text scores 5.17:1 — passes; black text scores only 4.06:1 and fails, so the button should use white text.
How the conversions work
HEX is just RGB written in base 16: each of the three channels — red, green, blue — is a number from 0 to 255, and HEX packs each one into a two-digit hexadecimal pair (00–FF) so the whole color fits in a compact 6-character code. #4F46E5 and rgb(79, 70, 229) are the exact same color; only the base changes.
HSL re-describes that same color using hue (an angle around a 360° color wheel), saturation (how far from gray), and lightness (how far from black or white) instead of raw channel intensities — which is why it's the format most people reach for when adjusting a color by feel. Lightness comes straight from the RGB extremes:
Shades and tints move only the lightness axis: a shade blends the color toward black, a tint blends it toward white, and both preserve the original hue and saturation. Harmonies move only the hue axis by rotating around the color wheel — complementary sits directly opposite at +180°, analogous colors sit close by at ±30° for a gentle, coordinated palette, and triadic colors are spaced a full third of the wheel apart (120°) so all three carry roughly equal visual weight.
The contrast badges use the WCAG 2.1 formula: convert each color to a linearized "relative luminance" between 0 and 1, then divide the lighter luminance by the darker one, both padded by 0.05 so pure black against pure white always comes out to exactly 21:1.
20 common CSS named colors
| Swatch | Name | HEX | RGB |
|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | |
| White | #ffffff | rgb(255, 255, 255) | |
| Red | #ff0000 | rgb(255, 0, 0) | |
| Green | #008000 | rgb(0, 128, 0) | |
| Blue | #0000ff | rgb(0, 0, 255) | |
| Yellow | #ffff00 | rgb(255, 255, 0) | |
| Cyan | #00ffff | rgb(0, 255, 255) | |
| Magenta | #ff00ff | rgb(255, 0, 255) | |
| Gray | #808080 | rgb(128, 128, 128) | |
| Silver | #c0c0c0 | rgb(192, 192, 192) | |
| Maroon | #800000 | rgb(128, 0, 0) | |
| Olive | #808000 | rgb(128, 128, 0) | |
| Lime | #00ff00 | rgb(0, 255, 0) | |
| Teal | #008080 | rgb(0, 128, 128) | |
| Navy | #000080 | rgb(0, 0, 128) | |
| Purple | #800080 | rgb(128, 0, 128) | |
| Orange | #ffa500 | rgb(255, 165, 0) | |
| Pink | #ffc0cb | rgb(255, 192, 203) | |
| Brown | #a52a2a | rgb(165, 42, 42) | |
| Gold | #ffd700 | rgb(255, 215, 0) |
These are 20 of the 148 CSS Level 4 named colors — any of them can be used directly in CSS (e.g. color: teal;) with no HEX or RGB needed.
Frequently asked questions
Why do HEX, RGB, and HSL all describe the same color?
They're three different notations for identical data. HEX packs the red, green, and blue channels into a base-16 string (#RRGGBB); RGB writes the same three channels out as base-10 numbers from 0 to 255; and HSL re-expresses the color by hue angle, saturation, and lightness instead of channel intensities. Converting between them is pure math with no loss — the color itself never changes, only how it's written.
What's the difference between a shade and a tint?
A shade mixes the color with black, which darkens it while keeping the same hue — useful for hover states, borders, or shadows. A tint mixes the color with white, which lightens it — useful for backgrounds or disabled states. This tool generates ten steps of each so you can pick a step that matches the contrast or mood you need without guessing at percentages by hand.
How is the contrast ratio calculated, and why 4.5:1?
The WCAG formula first converts each color to a 'relative luminance' — a 0 to 1 brightness value that weights green highest and blue lowest, matching how human eyes perceive brightness — then divides the lighter luminance by the darker one, both padded by 0.05. A ratio of 4.5:1 is the WCAG 2.1 AA minimum for normal body text; large text (roughly 18pt/24px, or 14pt/18.66px bold) only needs 3:1, and the stricter AAA level asks for 7:1.
Why ±30° for analogous colors and 120° apart for triadic?
Both come from splitting the 360° hue wheel into visually balanced steps. Analogous colors sit close together (±30°) so they share enough hue that they read as a coordinated palette rather than clashing. Triadic colors are spaced a full third of the wheel apart (120°) so all three carry roughly equal visual weight — a scheme designers reach for when they want variety without one color dominating the other two.
Can I paste a value straight from Figma or a CSS file?
Yes. The RGB and HSL fields accept the value with or without the rgb()/hsl() wrapper — "rgb(37, 99, 235)" and plain "37, 99, 235" both work the same way, and the HSL field reads the percent signs on saturation and lightness whether they're included or not. The HEX field accepts 3- or 6-digit codes, with or without the leading #.