Introducing Color Format Converter: HEX, RGB, HSL, HWB & OKLCH in One Tool
Convert any CSS color between HEX, RGB, HSL, HWB, OKLCH and more instantly in your browser. Visual picker, one-click copy, alpha support, 140+ named colors. 100% client-side.
Introducing Color Format Converter: Every CSS Color Format, Instantly
Figma exports HEX. Your CSS design tokens are HSL. Tailwind wants RGB. The new color spec recommends OKLCH. And your team's Slack message just said "what's the rgba for that pink?"
Color Format Converter solves this with a single paste. Enter any color in any format and get all eight CSS formats back at once — with one-click copy for each.
The Conversion Loop Nobody Talks About
Every designer and developer hits this wall eventually. You have a color. You need it in a different format. So you open a conversion tool, paste the value, get one output, paste that output into another tool to get the next format, and so on.
It wastes maybe 90 seconds. But you do it fifty times a week.
The problem isn't just time — it's precision loss. Each manual round-trip is an opportunity to copy the wrong digits, misread a percentage, or truncate a decimal. Color values are exact; approximations break things.
Color Format Converter eliminates the loop entirely: paste once, get everything.
What It Converts
The tool accepts any valid CSS color as input and outputs eight formats simultaneously:
Input — any of these:
#ec4899— 3, 4, 6, or 8 digit HEXrgb(236, 72, 153)or modernrgb(236 72 153)rgba(236, 72, 153, 0.8)— with alphahsl(330 81% 60%)— both syntaxesoklch(63.49% 0.2437 0deg)— perceptual color spacehwb(330 18% 7%)— modern CSS HWBhotpink,rebeccapurple,cornflowerblue— all 140+ named CSS colors
Output — all eight formats at once:
HEX #EC4899
HEX+alpha #EC4899FF
RGB rgb(236 72 153)
RGBA rgba(236, 72, 153, 1)
HSL hsl(330 81.2% 60.4%)
HSLA hsla(330, 81.2%, 60.4%, 1)
HWB hwb(330 18.0% 7.8%)
OKLCH oklch(63.49% 0.2437 0.00)
Every card has a copy button. One click, value on clipboard, green checkmark, done.
The Color Picker
The swatch on the left of the input isn't decorative. Click it and your browser's native color picker opens. Select any color visually and the text input updates with the HEX value. Every output format updates in sync.
This is useful when you don't have a value yet — you just know what the color looks like. Pick it visually, get all the formats in one step.
Why OKLCH?
You'll notice OKLCH in the output list. It's not a legacy format — it's where CSS is heading.
OKLCH (Oklab Lightness-Chroma-Hue) is a perceptually uniform color space, meaning equal numerical steps produce equal-looking changes in color. This makes it significantly better than HSL for:
- Design tokens — predictable lightness values across different hues
- Color scales — generating tints and shades that look consistent
- Accessibility — lightness values that map to actual perceived brightness
Modern browsers support oklch() natively. If you're building a design system today, OKLCH is worth understanding. This tool shows you the OKLCH representation of any color so you can see how your existing palette maps to the new space.
The Math Behind It
No external color library is used. All conversions are implemented from scratch using the CSS Color Level 4 specification:
- HEX ↔ RGB: direct bit manipulation
- RGB ↔ HSL: standard min/max algorithm
- RGB ↔ HWB: derived from HSL hue with whiteness/blackness components
- RGB ↔ OKLCH: full pipeline — linear RGB → LMS via the Björn Ottosson matrices → OKLab → LCH
The intermediate representation is always { r, g, b, a } in 0–255 / 0–1 space. Every input format converts to this, then every output format converts from it. This means there's one conversion chain to get right, not 56 pairwise conversions.
Use Cases
Design Token Migration
You're converting a color palette from HEX to HSL (or OKLCH). Paste each HEX value, copy the HSL output, done. No rounding errors from manual calculation, no intermediate conversions.
Tailwind Config
Tailwind v3 uses --color-brand: 236 72 153 (bare RGB values for opacity support). Paste your HEX, copy the RGB, strip the rgb() wrapper. Two seconds.
Debugging Rendered Colors
A color isn't rendering as expected. Paste the rgba() from DevTools to see the clean HEX and verify the alpha channel is what you intended.
CSS Custom Properties
You want to define a color as an HSL custom property so you can manipulate the lightness:
:root {
--brand-h: 330;
--brand-s: 81.2%;
--brand-l: 60.4%;
--brand: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
}Paste your HEX, copy the HSL components, done.
Named Color Lookup
Type cornflowerblue. Instantly see #6495ED, rgb(100 149 237), hsl(219 79.0% 66.1%) — whatever format you need for your context.
Try It
👉 color-format-converter.tools.jagodana.com
Free. No account. No uploads. Works offline once the page loads.
More Free Developer Tools from Jagodana
- Theme Contrast Checker — Test color combinations against WCAG contrast ratios
- Color Palette Explorer — Extract palettes from any image
- Color Blindness Simulator — Preview designs across 8 color vision types
- CSS Gradient Generator — Build linear, radial, and conic gradients visually
- CSS Variables Generator — Generate a complete CSS custom properties system
All client-side. All free. No signup.
