Color Converter
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.
Inputs
Results
Color Preview
HEX
#4285F4
RGB
rgb(66, 133, 244)
HSL
hsl(217, 89%, 61%)
Color Values
| 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% |
Formula
How to use this calculator
- Enter RGB values (0–255 for each channel) or use the eyedropper to sample a color.
- Read the matching hex, HSL, and RGB representations simultaneously.
- For CSS: use hex for static colors, HSL when you want to tweak lightness/saturation programmatically.
- For design tools (Figma, Sketch): they usually accept hex or RGB.
- For accessibility checks: convert to LCH or OKLCH to evaluate perceptual contrast more accurately than WCAG's sRGB formula.
- For brand palettes: store hex as the canonical reference; derive variants (lighter/darker, tints/shades) in HSL or OKLCH.
Worked examples
Building a palette from a brand color
**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.
Checking color contrast for accessibility
**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.
Decoding a UI screenshot 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."
When to use this calculator
**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.
Common mistakes to avoid
- Treating hex like a string. "#0F0" and "#00FF00" are the same color (lime green). The short form doubles each digit.
- Forgetting alpha when copying colors between formats. "rgb(66, 133, 244)" and "rgba(66, 133, 244, 0.5)" are not the same.
- Using HSL for accessibility checks. WCAG contrast uses RGB-derived luminance; converting through HSL adds rounding error.
- Assuming RGB and HSL gradients look the same. Interpolating in RGB between red and green passes through muddy brown around the middle; HSL or OKLCH interpolation stays in the spectrum.
- Mixing color spaces silently. Image colors in Display P3 look different from sRGB hex codes when viewed without color management — common gotcha on iPhone screenshots.
- Specifying CMYK colors as hex. CMYK is subtractive (for ink); hex is additive (for screens). The same numeric color triple represents different physical colors in each space.
- Reading screenshot colors as truth. Antialiasing, screenshot compression (JPEG), and OS color filters can shift colors slightly — sample multiple pixels and average if precision matters.