Instantly convert colors between HEX, RGB, and HSL color formats. Enter a value in any format and see all other representations. Useful for web design, CSS, and graphic design work.
Colors on the web are written in at least four different ways depending on the tool you're in: hex codes (#4285F4) in CSS, RGB triplets (rgb(66, 133, 244)) in JavaScript and design tools, HSL (hsl(217, 89%, 61%)) for programmatic manipulation, and lately newer formats like LCH and OKLCH for perceptually uniform color manipulation. They all represent the same colors — they're just different coordinate systems for the same three-dimensional space.
This converter lets you enter a color in any of those formats and instantly see the equivalents. That matters because different formats are useful in different contexts: hex is the most compact for CSS, RGB lets you adjust individual channels, HSL is the easiest for "make this 10% darker," and OKLCH gives you predictable perceptual brightness across different hues.
Understanding the conversions also explains some of the gotchas: why "#FFF" and "#FFFFFF" are the same (the short form doubles each digit), why "rgb(255, 0, 0)" and "hsl(0, 100%, 50%)" both render as the same pure red, and why a CSS gradient between two colors in RGB space sometimes looks muddy in the middle while the same gradient in OKLCH looks clean.
**Scenario:** Your brand color is #4285F4. You need lighter and darker variants for hover states and disabled buttons. **Calculation:** #4285F4 = hsl(217, 89%, 61%). Hover (slightly darker): hsl(217, 89%, 55%) = #1E6BF1. Disabled (lighter, desaturated): hsl(217, 30%, 80%) = #BBC8DD. Working in HSL keeps the same hue but adjusts brightness/saturation predictably. **Result:** HSL is ideal for systematic palette work. Hex is what ships to CSS. Convert at the boundary, design in HSL, deliver in hex.
**Scenario:** Text color #767676 on white background — does it meet WCAG AA for normal text (contrast ratio ≥4.5:1)? **Calculation:** Convert #767676 → rgb(118, 118, 118). Relative luminance ≈ 0.183. White luminance = 1.0. Contrast = (1.0 + 0.05) / (0.183 + 0.05) = 4.51:1. **Result:** #767676 on white passes WCAG AA (just barely) for body text. #757575 would fail. Use the converter to check exact values before committing to a body-text color.
**Scenario:** You see a color you like in a screenshot and pick it up with an eyedropper: #FF6B35. **Calculation:** #FF6B35 = rgb(255, 107, 53) = hsl(16, 100%, 60%) = a saturated, warm orange. The hue at 16° tells you it leans slightly red of pure orange (which sits at 30°). For a brand exploration, you might try variations: hsl(16, 100%, 50%) = darker, hsl(30, 100%, 60%) = more orange. **Result:** Knowing the HSL breakdown lets you "talk" the color. "A warm orange around 15° hue with full saturation" is more designerly than "FF six B three five."
**Use color conversion when you need to:**
- **Match colors across tools**: design files use hex, CSS uses any format, data viz libraries often want RGB arrays, print specs use CMYK or LAB. - **Build systematic palettes**: lighter/darker/muted variants are easier to generate in HSL or OKLCH than in hex. - **Programmatically generate colors**: data viz, theming engines, and gradient generators all need to interpolate between colors — HSL gives smoother results than RGB for hue transitions. - **Check accessibility**: contrast ratios use relative luminance, which comes from RGB → linear RGB → luminance. Free WCAG checkers do this automatically. - **Debug rendering differences**: a hex code that looks different on Mac vs Windows is often a color profile issue (sRGB vs Display P3), not a math issue. - **Work in OKLCH**: modern CSS supports `oklch()` natively; it gives perceptually uniform color manipulation that RGB and HSL can't.
**Format use cases at a glance:**
- **Hex (#RRGGBB)**: CSS, design tokens, brand specs, the most universal format. - **RGB**: image processing, canvas/WebGL, when you need to do channel math. - **HSL / HSV**: design tool color pickers, systematic palette generation, lightness sliders. - **LCH / OKLCH**: perceptually uniform manipulation, gradient generation, modern accessibility-aware palettes. - **CMYK**: print only — never use in web design unless preparing for print output.
Generate secure random passwords with customizable length and character types.
Calculate subnet mask, network address, broadcast, and usable host range from CIDR.
Calculate download time from file size and internet speed.
Calculate aspect ratio from width and height, or find missing dimensions.
Convert between bytes, KB, MB, GB, TB, and PB.
Calculate pixels per inch from screen resolution and display size.
HEX
#4285F4
RGB
rgb(66, 133, 244)
HSL
hsl(217, 89%, 61%)
| Format | Value |
|---|---|
| HEX | #4285F4 |
| RGB | rgb(66, 133, 244) |
| HSL | hsl(217, 89%, 61%) |
| Red | 66 |
| Green | 133 |
| Blue | 244 |
| Hue | 217 degrees |
| Saturation | 89% |
| Lightness | 61% |