Color and CSS Unit Converter
Runs locallyConvert between HEX, RGB and HSL, and between px, rem, em and pt.
Color Converter
Convert between HEX, RGB and HSL.
CSS Unit Converter
Convert pixels to rem / em / pt using a root font size.
Why two colors with the same lightness look nothing alike
HEX, RGB and HSL are three spellings of the same sRGB color (colour, if you write British English) — converting between them changes nothing but the notation. HSL is easier to reason about because hue, saturation and lightness map to words, but its lightness channel is a geometric construct, not a measure of how bright a color looks. A hex color is also just a number — the number base converter shows #FF8800 as decimal and binary.
Pure yellow and pure blue are both hsl(… 100% 50%). One is nearly unreadable on white and the other is nearly unreadable on black. That is why accessibility rules are written in contrast ratios, which are computed from relative luminance, rather than in anything you can read off an HSL value.
Same lightness
hsl(60 100% 50%) yellow hsl(240 100% 50%) blue
Contrast against white
yellow 1.07 : 1 fails everything blue 8.59 : 1 passes AAA WCAG needs 4.5:1 for body text, 3:1 for large text and UI borders.
| Unit | Relative to | Use it for |
|---|---|---|
| px | Nothing — a fixed device pixel | Borders and shadows; not font sizes |
| rem | The root font size | Almost everything: type, spacing, breakpoints |
| em | The font size of the element itself | Padding that should scale with its own text |
| pt | 1/72 inch | Print stylesheets only |
| % | The parent value for that property | Widths and line heights |
Where people get caught
HSL lightness is not perceived brightness
Picking a palette by holding lightness constant gives you colors that look wildly uneven. OKLCH was designed to fix exactly this, and is worth reaching for when a palette has to look consistent.
em compounds, rem does not
Nested elements each multiply their parent, so 0.9em three levels deep is 0.73 of the base. rem is always measured from the root, which is why it is the safer default for type scales.
The 62.5% trick breaks user settings
Setting html { font-size: 62.5% } to make 1rem equal 10px overrides the font size the user chose in their browser. It makes the arithmetic nicer and the site less accessible.
px ignores the reader entirely
A font size in px does not respond to the browser font-size setting, which is the main accessibility control people with low vision actually use. Use rem for anything textual.
Round-tripping shifts values
HEX stores 8 bits per channel; HSL is computed in floats. HEX to HSL and back can land one step away from where it started, which is why a color pasted between two tools sometimes stops matching the brand value exactly.
A translucent color is not one color
#00000080 over white and over a photo are two different results. If a value has to meet a contrast ratio, compute it against the actual background, not against the swatch.
About the color and CSS unit converter
How it works in 4 steps · 4 common use cases · 3 questions answered
About the color and CSS unit converter
How it works in 4 steps · 4 common use cases · 3 questions answered
How it works
- 1.Pick a color with the picker, or paste a HEX, RGB or HSL value.
- 2.All three representations update together, and each field stays editable so you can nudge one and watch the others follow.
- 3.For CSS units, enter a value and the root font size your project uses.
- 4.Copy the representation you need.
Common use cases
- •Translating a HEX value from a design handoff into the HSL your stylesheet uses
- •Adjusting lightness or saturation to derive a hover state from a base color
- •Converting a pixel spacing scale into rem against a 16px root
- •Working out what an em value resolves to inside a nested component
FAQ
What is the difference between rem and em here?
rem is always relative to the root font size, so one conversion answers it. em is relative to the font size of the element itself, so the converter uses the context size you supply rather than the root.
Why convert to HSL at all?
HSL separates hue from saturation and lightness, so a hover or disabled variant is a change to one number instead of a new value guessed by eye.
Are alpha values supported?
The picker works with opaque colors. For a translucent variant, take the RGB values and add the alpha channel yourself as rgba() or an eight-digit HEX.