Color Formats Explained
Colors on screens can be represented in several different formats, each useful in different contexts:
- HEX (
#ff6b35): A 6-character hexadecimal code, the most common format in web design and CSS. The three pairs of digits represent the red, green, and blue components. - RGB (
rgb(255, 107, 53)): Expresses the red, green, and blue channels as numbers from 0 to 255. Widely used in CSS and design tools. - HSL (
hsl(20, 100%, 60%)): Represents colors as Hue (the color angle on a color wheel, 0–360°), Saturation (how vivid, 0–100%), and Lightness (how light or dark, 0–100%). More intuitive for humans — easy to adjust brightness or saturation without guessing RGB values.
Each format represents the same color, just written differently.
What Does This Tool Do?
This tool converts colors between HEX, RGB, and HSL formats instantly. Enter a color in any format and see all three representations at once, along with a live preview of the color.
How to Use This Tool
- Enter a color value in any format — HEX, RGB, or HSL.
- All three formats update instantly.
- A color swatch shows a live preview.
- Copy any format with a single click.
Common Use Cases
- Web and UI design: Your design tool gives you HEX, but your CSS framework uses HSL — convert in seconds.
- Adjusting colors: Use HSL to easily make a color lighter, darker, or more saturated without trial and error.
- Matching colors: Copy a color from one tool and convert it to the format another tool expects.
- Accessibility: Check color values when verifying contrast ratios for accessible design.
Same Color, Three Notations
| Color | HEX | RGB | HSL |
|---|---|---|---|
| White | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Red | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Orange | #ff6b35 | rgb(255, 107, 53) | hsl(16, 100%, 60%) |
| Teal | #10b981 | rgb(16, 185, 129) | hsl(160, 84%, 39%) |
| Slate gray | #64748b | rgb(100, 116, 139) | hsl(215, 16%, 47%) |
When to Prefer Each Format
- HEX is the most compact and universally understood — ideal for design handoffs, brand guidelines, and anywhere a color is stored as a single token.
- RGB maps directly to how screens produce color. Use it when you’re manipulating channels programmatically or reading values from an image editor’s color picker.
- HSL is the format to think in. Want a hover state 10% darker? Reduce lightness. Want a muted version of your brand color? Lower saturation. A complementary accent? Rotate hue by 180°. These operations are painful in HEX or RGB but trivial in HSL.
A practical workflow: define your palette’s hues in HSL, derive light/dark variants by adjusting lightness, then convert to HEX for the final stylesheet.
Reading a Hue Angle
The hue value in HSL is a position on the color wheel: 0° red, 30° orange, 60° yellow, 120° green, 180° cyan, 240° blue, 270° purple, 300° magenta, wrapping back to red at 360°. Once you internalize these anchors, you can roughly picture any HSL color from its numbers alone — a skill that makes palette tweaking dramatically faster.
Frequently Asked Questions
What about RGBA and HSLA (with transparency)?
RGBA and HSLA add an alpha channel for transparency. This tool currently handles fully opaque colors (RGB and HSL without alpha).
Why do some HEX colors have only 3 characters?
A 3-character HEX like #f60 is shorthand for #ff6600. Each digit is doubled. Both are equivalent.
Is my data private?
Yes. All conversion happens locally in your browser.
What are OKLCH and other modern color spaces?
CSS now supports perceptually uniform color spaces like OKLCH and OKLAB, where equal numeric changes look like equal visual changes — something HSL only approximates. They’re excellent for generating accessible palettes. Support for them in this tool is on our roadmap.
How do I check if two colors have enough contrast?
WCAG accessibility guidelines require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Contrast is computed from the relative luminance of the two colors — as a rule of thumb, if you squint and the text blends into the background, it fails. Convert both colors here to compare their lightness values as a first approximation.