Color Converter
Convert colors between HEX, RGB, and HSL formats.
About This Tool
Convert any color between HEX, RGB, and HSL formats with a live preview swatch. Enter a value in any format and see all three representations update instantly. Includes a visual color picker for quick exploration. Essential for web developers translating design specs into CSS, designers ensuring color consistency across tools, and anyone who needs precise color format conversions. All processing runs client-side in your browser.
What you provide
Color value in HEX, RGB, or HSL format
What you get
Color converted to all three formats with preview
How to Use
- Enter a color in any format: HEX (#ff6600), RGB (rgb(255, 102, 0)), or HSL (hsl(24, 100%, 50%)).
- All three representations update instantly with a live color preview.
- Click on any output value to copy it to your clipboard.
Choosing the Right Color Format
HEX is the format most designers reach for first because it is compact and universally understood. #ff6600 is faster to type than its equivalents and pastes cleanly between Figma, CSS, and Tailwind config files. It is the right choice for quick prototyping, hard-coded brand colors, and any context where brevity matters. The limitation is that HEX is opaque: looking at #3d9a4f tells you nothing about whether it is a muted green or a saturated one.
RGB shines when you need to manipulate colors programmatically. Linearly interpolating between two RGB values for a gradient, adjusting brightness by scaling all three channels, or mixing colors via alpha compositing are all more natural in RGB space. It is also the format closest to how screens physically emit light, which matters when doing color science calculations.
HSL is the format design systems teams reach for when building theme variants. Keeping hue constant while varying lightness (e.g. from 10% to 90%) produces a coherent tonal palette. Adjusting saturation alone controls vibrancy without shifting the underlying hue. For dark mode support, inverting lightness in HSL is far more predictable than manipulating HEX values. Modern CSS now also supports oklch() — a perceptually uniform space where equal numerical steps produce equally visible changes in color, making it the best choice for accessibility-aware palettes and smooth gradients in CSS Color Level 4.
Color Format Comparison
| Format | Syntax | Alpha Support | Human Readable | Best For |
|---|---|---|---|---|
| HEX | #rrggbb / #rgb | Via #rrggbbaa | Low | Design handoff, Tailwind config, quick copy-paste |
| RGB | rgb(r, g, b) | Via rgba() | Medium | Programmatic manipulation, canvas, WebGL |
| HSL | hsl(h, s%, l%) | Via hsla() | High | Design systems, theme variants, dark mode |
| oklch | oklch(l c h) | Via oklch(l c h / a) | Medium | Perceptually uniform gradients, CSS Color Level 4 |
| HWB | hwb(h w% b%) | Via hwb(h w% b% / a) | High | CSS Color Level 4, intuitive hue+whiteness+blackness model |
Accessibility Color Tips
- WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold).
- WCAG 2.1 AAA requires 7:1 for normal text — target this for body copy on critical content like legal or medical interfaces.
- Use tools like WebAIM Contrast Checker or the browser DevTools accessibility panel to verify contrast ratios before shipping.
- Never rely on color alone to convey information — always pair color with a secondary cue like an icon, pattern, or text label for color-blind users.
- Dark mode palettes should be re-checked for contrast, not just inverted — a color that passes AA in light mode may fail in dark mode.
- oklch() gradients maintain perceived brightness across hue shifts, making them a better choice than HSL gradients for accessible UI components.
Frequently Asked Questions
- What color formats are supported?
- HEX (e.g. #ff6600 or #f60), RGB (e.g. rgb(255, 102, 0) or just 255, 102, 0), and HSL (e.g. hsl(24, 100%, 50%) or 24, 100, 50).
- Can I use shorthand HEX codes?
- Yes. Both 3-character (#f60) and 6-character (#ff6600) HEX codes are supported and automatically expanded.
- How accurate are the conversions?
- Conversions use standard mathematical formulas and are precise. RGB values are rounded to integers (0-255), HSL hue to integers (0-360), and saturation/lightness to one decimal place.
- What is the difference between RGB and HSL?
- RGB (Red, Green, Blue) defines color by mixing light intensities from 0 to 255 per channel. HSL (Hue, Saturation, Lightness) describes color in terms humans find more intuitive: hue is the color angle on the wheel (0-360), saturation is the intensity (0-100%), and lightness is how bright or dark the color appears (0-100%).
- Can I use this for CSS colors?
- Yes. The output formats are directly usable in CSS. Copy the HEX value for background-color, or use the rgb() or hsl() notation. All modern browsers support all three formats.
Learn More
Color Spaces Explained: HEX vs RGB vs HSL and When to Use Each
Understand HEX, RGB, and HSL color formats, CSS color functions, WCAG contrast ratios, and when each format is the right choice.
6 min read