Cómo usar: Color Converter
- Type or paste a color into Color value — any CSS format works — or choose one with the color 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 color converter?
A color converter translates one color 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 color. 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 colors | tomato, rebeccapurple | All 148 CSS keywords are recognized; the tool also shows the nearest name for any color. |
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 (colorfulness) and H is the hue angle. That makes it ideal for generating consistent shades, hover states and accessible color pairs. OKLCH can also describe colors 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 color’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 color’s chroma, which is reduced where needed so every swatch stays inside sRGB. With Keep my exact color enabled, your input replaces the step whose lightness is closest, so the brand color 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 colors in Webflow
Paste the HEX value into Webflow’s color 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.
También se busca como: hex to rgb, rgb to hex, hex to hsl, oklch converter, color picker, colour converter, cmyk, hwb.
Herramientas que combinan con: Color Converter
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
- 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.
- Imagen a Base64 — Convierte un archivo PNG, JPEG, SVG, WebP o GIF en un URI de datos Base64 con código CSS y HTML listo para copiar, o pega una cadena Base64 para ver una vista previa y descargar la imagen.
Preguntas frecuentes
How do I convert HEX to RGB by hand?
#4F46E5: 4F = 79, 46 = 70, E5 = 229, so the color is rgb(79 70 229). A 3-digit code like #f60 doubles each digit first (#ff6600).What does an 8-digit HEX color 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 color pickers.