Color Converter - HEX, RGB, HSL & OKLCH Color Codes
Convert any CSS color between HEX, RGB, HSL, and OKLCH with a live swatch and copy-ready values.
Paste a HEX code, an rgb(…) triple, or an hsl(…) value — or just use the picker — and click Convert to get the same color in all four notations.
Color Converter - HEX, RGB, HSL & OKLCH Color Codes
Convert any CSS color between HEX, RGB, HSL, and OKLCH with a live swatch and copy-ready values.
About the color converter
Modern web work constantly juggles color notations. Design tools hand you HEX codes, JavaScript APIs speak in RGB channel values, hand-written stylesheets often lean on HSL for readable hue adjustments, and the newest CSS color functions favour OKLCH for its perceptual uniformity. This color converter translates freely between all four so you can take a value from anywhere — a brand guide, a screenshot eyedropper, a Figma inspector, an old stylesheet — and drop it into your codebase in whichever notation the project uses.
Input is flexible: paste a three- or six-digit HEX code with the leading hash, an rgb(…) function with channel values from 0 to 255, or an hsl(…) function with a hue angle and percentage saturation and lightness. If you prefer to work visually, the native color picker beside the input lets you choose a color with your pointer and instantly fills the field. A live swatch previews the parsed color so you can confirm by eye that the value you pasted is the color you meant, and each output row has its own copy button for quick transfer into CSS, design tokens, or code.
The first three conversions use the standard, exact formulas: HEX is simply the three sRGB bytes in hexadecimal, and HSL is derived from the same channels through the familiar max/min lightness and chroma relationships. The OKLCH output goes further. The tool first undoes the sRGB gamma curve to obtain linear-light channels, transforms them through the OKLab matrices developed by Björn Ottosson, and then expresses the result in polar form: L for perceptual lightness on a 0–1 scale, C for chroma, and H for the hue angle in degrees. Because OKLab was designed so that equal numeric steps look like equal visual steps, OKLCH is the notation of choice for building accessible color scales and predictable hover or dark-mode variants, and it is now supported natively in every major browser.
All parsing and math run locally in your browser; no value is sent to any server. Typical uses include normalising a legacy stylesheet to one notation, converting brand palettes into design tokens, checking what a JavaScript-generated RGB value looks like as HEX, and migrating a color system toward modern OKLCH-based CSS. Note that alpha channels are out of scope: the converter works with opaque colors, so strip any transparency component before pasting.
Color conversion examples
A few conversions across the four notations.
| Input | Converted | Notes |
|---|---|---|
| #1e90ff | rgb(30, 144, 255) | The classic dodger blue: each HEX byte pair maps directly to one RGB channel. |
| hsl(120, 50%, 40%) | #339933 | A muted green — HSL input is converted to sRGB channels first, then formatted as HEX. |
| #369 | rgb(51, 102, 153) | Three-digit HEX shorthand expands each digit, so 3 becomes 33 and 6 becomes 66. |
| rgb(255, 255, 255) | oklch(1.000 0.000 0.0) | Pure white has maximum perceptual lightness and zero chroma, so its hue angle is moot. |
How to use the color converter
- Paste a color into the value field — HEX with a leading #, an rgb(…) triple, or an hsl(…) value — or choose one with the color picker.
- Click Convert to parse the input and compute all four notations.
- Check the swatch to confirm the parsed color matches what you expected.
- Use the per-row copy buttons to grab the HEX, RGB, HSL, or OKLCH string for your stylesheet or design tokens.
Color converter FAQ
Which input formats does the converter accept?
Three- and six-digit HEX codes with a leading hash, rgb(…) with integer channels from 0 to 255, and hsl(…) with a hue angle plus percentage saturation and lightness. The native picker provides a fourth, visual way to set the color.
What is OKLCH and why should I use it?
OKLCH is the polar form of the OKLab color space: perceptual lightness (L), chroma (C), and hue angle (H). Equal numeric changes produce roughly equal visual changes, which makes palettes, tints, and dark-mode variants far more predictable than tweaking HSL. It is supported in all modern browsers via the CSS oklch() function.
How is the OKLCH value computed?
The sRGB channels are linearised by inverting the gamma curve, multiplied through the OKLab transform matrices, and the resulting a/b components are converted to chroma and hue. L is rounded to three decimals on a 0–1 scale, C to three decimals, and H to one decimal place.
Why do HSL and OKLCH hue angles differ for the same color?
They measure hue in different spaces. HSL derives its angle directly from sRGB channel geometry, while OKLCH measures hue in a perceptually uniform space, so the same color legitimately reports different angles in the two systems.
Does the converter support alpha (transparency)?
Not currently — it handles opaque colors only. If you have rgba(…) or an eight-digit HEX code, drop the alpha component, convert the base color, and reapply the transparency in your CSS.
Is my color data sent anywhere?
No. Parsing and all conversion math run in your browser with plain JavaScript. Nothing is uploaded, which also means the tool works offline once the page is loaded.