How to use the Color Converter
- Type or paste a colour into Colour value — any CSS format works — or choose one with the colour picker.
- Adjust Opacity if you need transparency; 8-digit HEX and
/ alphavalues update automatically. - Click Copy next to the format you need. Switch to Legacy syntax if your codebase uses
rgba(…, …)with commas. - Scroll to the palette to get 11 tints and shades; pick CSS variables, Tailwind v4, SCSS or JSON output and copy or download it.
What is a colour converter?
A colour converter translates one colour into the different notations CSS and design tools use. The same indigo can be written as #4f46e5, rgb(79 70 229), hsl(243.4 75.4% 58.6%) or oklch(51.06% 0.2301 276.97) — they all describe one sRGB colour. Designers hand over HEX from Figma, a component library wants HSL channels, and a modern design system may be written in OKLCH, so converting quickly (and correctly) is an everyday job.
Supported formats
| Format | Example | Good for |
|---|---|---|
| HEX (3, 4, 6, 8 digits) | #4f46e5, #4f46e580 | The most common hand-off format. The optional 4th/8th digit pair is alpha: 80 ≈ 50%. |
| RGB / RGBA | rgb(79 70 229 / 0.5) | Channel maths, canvas, legacy rgba() code. |
| HSL / HSLA | hsl(243 75% 59%) | Quick manual tweaks of hue, saturation and lightness. |
| HWB | hwb(243 27% 10%) | Mixing a pure hue with white and black — intuitive for pickers. |
| OKLCH | oklch(51% 0.23 277) | Perceptually even palettes and design tokens (Tailwind CSS v4 ships its palette in OKLCH). |
| CMYK | cmyk(66%, 69%, 0%, 10%) | A rough starting point for print — see the note below. |
| Named colours | tomato, rebeccapurple | All 148 CSS keywords are recognised; the tool also shows the nearest name for any colour. |
Why OKLCH is worth learning
In HSL, “50% lightness” yellow looks far brighter than 50% blue, because HSL is a simple geometric transform of RGB. OKLCH is built on the OKLab model, designed so that equal steps in L (lightness) look like equal steps to the eye, C is chroma (colourfulness) and H is the hue angle. That makes it ideal for generating consistent shades, hover states and accessible colour pairs. OKLCH can also describe colours outside sRGB (e.g. Display P3); when you enter one, this tool clips it into sRGB and flags it.
How the 50–950 palette is generated
The palette keeps your colour’s hue and works in OKLCH: each step gets a fixed lightness target (from very light 50 to very dark 950) and a share of your colour’s chroma, which is reduced where needed so every swatch stays inside sRGB. With Keep my exact colour enabled, your input replaces the step whose lightness is closest, so the brand colour appears unchanged in the scale. Need to check pairs from the palette for accessibility? Use the Contrast Checker.
A note on CMYK
Screen-to-print conversion depends on ink, paper and the ICC profile your printer uses. The CMYK values here use the standard uncalibrated formula (K = 1 − max(R, G, B)), which is fine for mock-ups but not for brand-critical print work — ask your printer for a profiled conversion.
Using the colours in Webflow
Paste the HEX value into Webflow’s colour picker or into a Color variable (Variables panel). Creating one variable per palette step — e.g. Brand 50 … Brand 950 — gives you the same token structure as the CSS-variables output, so classes can reference shades instead of hard-coded values.
Tools that pair well with the Color Converter
- CSS Gradient Generator — Design a gradient visually — drag colour stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback colour.
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- Number Base Converter — Type a number in any base and see it in all the others instantly.
- Image to Base64 — Turn a PNG, JPEG, SVG, WebP or GIF into a Base64 data URI with copy-ready CSS and HTML — or paste a Base64 string to preview and download the image.
Frequently asked questions
How do I convert HEX to RGB by hand?
#4F46E5: 4F = 79, 46 = 70, E5 = 229, so the colour is rgb(79 70 229). A 3-digit code like #f60 doubles each digit first (#ff6600).What does an 8-digit HEX colour mean?
00 (fully transparent) to ff (opaque). #4f46e580 is the indigo at 128/255 ≈ 50% opacity. All modern browsers support 4- and 8-digit HEX.Should I use OKLCH instead of HEX or HSL?
Why does my HSL value change slightly after converting?
What is the difference between HSL and HWB?
hwb(0 0% 0%) is pure red and hwb(0 50% 0%) is red mixed with 50% white (pink). HWB is often easier to reason about in colour pickers.