Color Converter
ConvertersConvert between HEX, RGB, HSL, HSV, CMYK, Lab, LCH color formats. Free, private — all processing in your browser.
#6366f1rgb(99, 102, 241)rgb(39%, 40%, 95%)hsl(239, 84%, 67%)hsv(239, 59%, 95%)cmyk(59%, 58%, 0%, 5%)--color: #6366f1;[#6366f1]6514417brightness(0) saturate(100%) invert(67%)The Color Converter translates colors between every format that modern web development uses: HEX (#FF5733), RGB / RGBA (rgb(255 87 51)), HSL / HSLA (hsl(11 100% 60%)), HSV (hue/saturation/value), CMYK (for print), Lab and LCH (perceptually uniform), and the new OKLCH / OKLAB formats introduced in CSS Color Level 4. Pick any color, switch between formats instantly, and copy the exact CSS value you need — whether for a Tailwind config, a Figma design token, a CSS variable, a print-ready palette, or a color accessibility audit.
Color format choice matters more than developers realize. HEX is compact and universally supported but hard to edit manually — tweaking saturation or lightness is nearly impossible. HSL makes color relationships intuitive — same hue with different lightness produces shade variations. OKLCH is the modern perceptually-uniform format recommended for design systems, where a 10% lightness change looks the same to human eyes regardless of hue (unlike HSL where yellow and blue at the same "lightness" look wildly different). This converter shows you the same color in every format side-by-side, so you can pick the right one for each use case.
Color Converter — key features
All major color formats
Convert between HEX, RGB, RGBA, HSL, HSLA, HSV/HSB, CMYK, Lab, LCH, OKLAB, OKLCH, and Display P3. See the same color in every format at once.
Live color preview
A large swatch shows the selected color. Change any value and the preview updates instantly.
Visual color picker
Pick colors with a saturation/lightness square plus a hue slider. Or paste a value in any format to start from a known color.
Alpha channel support
Set transparency from 0 (fully transparent) to 100% (opaque). Works in all formats that support alpha (RGBA, HSLA, 8-digit HEX).
Copy CSS-ready values
One-click copy in the exact format your CSS, SCSS, or design tool needs — including modern syntax without legacy commas.
Accessibility checks
See WCAG contrast ratio against white and black backgrounds. Know instantly if a color has enough contrast for AA or AAA compliance.
Display P3 wide gamut
Work with colors outside sRGB gamut using the modern Display P3 color space, supported by Safari and Chrome on macOS/iOS.
100% client-side
All color math happens in your browser. No uploads, no tracking.
How to use the Color Converter
- 1
Enter a color
Type or paste a color value in any format — HEX, RGB, HSL, or others. The tool auto-detects the format.
- 2
See all conversions
The same color appears in every format simultaneously. Copy the one you need with one click.
- 3
Adjust with the visual picker
Use the saturation/lightness square and hue slider to tweak the color interactively. All formats update in real-time.
- 4
Set alpha if needed
Adjust the opacity slider for colors with transparency. Formats that support alpha show the transparent value; others show the opaque base.
- 5
Check accessibility
View the contrast ratio against white and black. For text on a background, aim for at least 4.5:1 (WCAG AA) or 7:1 (WCAG AAA).
- 6
Copy the CSS value
Click the Copy button next to your preferred format. Paste into your CSS, Tailwind config, Figma, or design system.
Common use cases for the Color Converter
Web design and development
- →Build a design system palette: Define primary, secondary, and accent colors in a unified space (OKLCH is ideal). Generate tints and shades by varying lightness.
- →Match a brand color: Client provides a Pantone or CMYK color — convert to HEX/RGB for web use, with awareness that screen colors may not exactly match print.
- →Use CSS custom properties: Define colors as CSS variables in a format that supports modification (HSL or OKLCH) so you can adjust alpha or lightness dynamically.
- →Implement dark mode: Dark mode often flips lightness; OKLCH makes this easier than HEX by letting you adjust L independently.
Design tools
- →Transfer colors between Figma and CSS: Figma uses HEX/RGB by default. Export your palette, convert, and use in code with the appropriate format.
- →Sketch, Adobe XD, Affinity Designer: Each tool has its own color format preferences. Convert between formats when moving designs between tools.
- →Print and web: A design system often has both print (CMYK) and web (HEX/RGB) variants. Convert carefully — remember CMYK and RGB have different gamuts.
Accessibility
- →Check text contrast: WCAG requires at least 4.5:1 contrast for normal text (AA). Use this tool to verify your colors meet the standard.
- →Audit a color palette: Check every color combination in your palette against WCAG. Identify pairs that fail and adjust.
- →Design for color blindness: OKLCH's hue axis lets you pick colors that remain distinguishable across different types of color vision deficiency.
Development
- →Convert hex to rgba for transparency: Need `rgba(255, 87, 51, 0.5)` from `#FF5733`? One click with the converter.
- →Parse colors from CSS: If your code reads CSS color strings, this tool shows how each format parses and converts.
- →Generate color data for APIs: Need an array of [r, g, b] or [h, s, l]? Get them in any number format without manual math.
Color Converter — examples
HEX to all other formats
Starting from a HEX value, see every equivalent.
#FF5733
RGB: rgb(255 87 51) HSL: hsl(11 100% 60%) HSV: hsv(11 80% 100%) CMYK: cmyk(0% 66% 80% 0%) Lab: lab(62.24 53.73 53.01) LCH: lch(62.24 75.47 44.63) OKLCH: oklch(0.67 0.187 43.12)
RGB with alpha
Semi-transparent color in multiple formats.
rgba(52, 152, 219, 0.75)
HEX: #3498DBBF RGB: rgb(52 152 219 / 0.75) HSL: hsl(204 70% 53% / 0.75)
HSL to other formats
HSL is intuitive; see how it maps.
hsl(210 50% 60%)
HEX: #6699CC RGB: rgb(102 153 204) OKLCH: oklch(0.65 0.088 235.99)
OKLCH design palette
Uniform lightness across hues for design system colors.
Need 5 colors at 70% lightness
oklch(0.7 0.15 0) → red oklch(0.7 0.15 60) → orange oklch(0.7 0.15 120) → green oklch(0.7 0.15 240) → blue oklch(0.7 0.15 300) → magenta
Display P3 wide gamut
Colors outside sRGB gamut shown with P3.
color(display-p3 1 0 0)
Pure display-p3 red — more saturated than sRGB #FF0000 on supported displays Fallback: rgb(255 0 0)
WCAG contrast check
Test text on background.
Text: #333333 on background: #FFFFFF
Contrast ratio: 12.63:1 AA large text: ✓ Pass (3:1) AA normal text: ✓ Pass (4.5:1) AAA: ✓ Pass (7:1)
Technical details
Modern web color is more than HEX and RGB. Understanding color spaces is essential for design systems, accessibility, and print.
sRGB family (common in web):
- HEX — 3 or 6 hex digits per color, optional alpha: #RRGGBB or #RRGGBBAA. Universally supported.
- RGB / RGBA — rgb(255 87 51) or rgb(255 87 51 / 0.5) (modern CSS, uses spaces). Older comma syntax also valid.
- HSL / HSLA — Hue (0-360°), saturation (0-100%), lightness (0-100%). Intuitive for hue shifts and shade variations.
- HSV / HSB — Hue, saturation, value/brightness. Common in design tools (Photoshop, Figma).
Perceptually uniform (CSS Color 4):
- Lab — CIE L*a*b*. L* = lightness, a* = green-red, b* = blue-yellow. Designed so equal distances look equally different to humans.
- LCH — Polar version of Lab. L = lightness, C = chroma, H = hue. Better for choosing and interpolating colors.
- OKLAB / OKLCH — Björn Ottosson's improved versions of Lab/LCH (2020). Fix known issues with Lab's perceptual uniformity. Recommended for modern design systems.
- Display P3 — Wide gamut color space for modern displays (iPhones since 2015, recent Macs). color(display-p3 R G B) in CSS.
Print color:
- CMYK — Cyan, Magenta, Yellow, Key (black). Subtractive color for printing. Conversion from screen RGB to CMYK is imperfect because monitors and printers have different gamuts — designers typically specify CMYK separately for print.
Conversion math:
- HEX ↔ RGB: trivial (hex digit pairs for R, G, B).
- RGB ↔ HSL: well-defined algorithm, reversible.
- RGB ↔ Lab: requires converting through XYZ color space using a reference white point (D65 for web).
- RGB ↔ CMYK: approximate only — proper print workflows use ICC profiles for each specific printer.
Alpha channel:
- HEX supports 8-digit form (#RRGGBBAA).
- All CSS formats support alpha via rgb(... / 0.5) or legacy rgba(...) syntax.
- Alpha is independent of the color space — compositing happens after conversion.
Common problems and solutions
⚠HSL lightness is not perceptual
In HSL, `hsl(60 100% 50%)` (yellow) and `hsl(240 100% 50%)` (blue) have the same L=50%, but yellow looks much brighter than blue. Use OKLCH for perceptually uniform lightness — same L value looks equally bright across all hues.
⚠sRGB vs Display P3 confusion
Same HEX code renders differently on sRGB vs Display P3 displays. A vibrant red on a P3 iPhone is more saturated than on an sRGB laptop. For accurate color, specify the color space: `color(display-p3 ...)` vs default sRGB.
⚠CMYK conversion is approximate
RGB cannot exactly represent all CMYK colors and vice versa — different gamuts. For professional print, specify CMYK values separately (from the print shop's color guide) rather than converting from RGB.
⚠Alpha compositing confusion
`rgba(255 0 0 / 0.5)` on white background looks different from `rgba(255 0 0 / 0.5)` on black. Alpha blends with whatever is behind. Test colors in their actual context.
⚠Using HEX for interpolation
Interpolating between two HEX colors (e.g., for gradients) in sRGB produces muddy middle colors. Interpolate in LCH or OKLCH for clean, saturated transitions.
⚠Color contrast against images or gradients
WCAG contrast is measured between solid colors. Text over images needs additional techniques (text shadows, overlays, fallback background). The tool's contrast check applies only to solid backgrounds.
⚠Forgetting gamma correction
sRGB is non-linear. Blending colors in sRGB (without converting to linear RGB first) produces dull mid-tones. For gradients and transitions, work in linear space or use LCH/OKLCH.
⚠Old RGB comma syntax
`rgb(255, 87, 51)` still works but `rgb(255 87 51)` is the modern CSS syntax. Both are valid — some linters flag the old form. Most formatters converge to the new form.
Color Converter — comparisons and alternatives
HEX vs RGB: HEX is compact (6-8 characters) and widely recognized. RGB is human-readable with explicit values. Both represent the same sRGB space — pick based on context. HEX for CSS/HTML/tokens, RGB when you need alpha or programmatic manipulation.
HSL vs OKLCH: HSL is older and intuitive (hue/saturation/lightness). OKLCH is newer and perceptually uniform — lightness values produce equal visual lightness across all hues. Use HSL for quick tweaks, OKLCH for design systems that need consistent brightness across color swatches.
Lab vs OKLAB: Lab (CIE 1976) is the classic perceptually uniform color space but has known issues (blue-yellow artifacts near primaries). OKLAB (Björn Ottosson, 2020) fixes these issues. Modern CSS supports both; prefer OKLAB/OKLCH for new code.
sRGB vs Display P3: sRGB is the web standard, supported everywhere. Display P3 is a wider gamut used by modern Apple devices and some Androids. P3 can show more saturated reds, greens, and blues. Fall back gracefully: @supports (color: color(display-p3 0 0 0)).
CMYK vs RGB: CMYK is subtractive (for printing), RGB is additive (for screens). Conversion is imperfect because the two gamuts overlap but do not match. Professional print uses CMYK values from Pantone or spec; web uses RGB exclusively.
HSB vs HSL vs HSV: HSB (Hue/Saturation/Brightness) and HSV (Hue/Saturation/Value) are the same thing — common in Photoshop, Figma. HSL (Hue/Saturation/Lightness) is different — used in CSS. Moving between tools often requires conversion.
Frequently asked questions about the Color Converter
▶How do I convert HEX to RGB?
Split the 6-digit HEX into three 2-digit pairs, one each for red, green, blue. Convert each pair from hexadecimal to decimal (0-255). Example: #FF5733 → FF=255, 57=87, 33=51 → rgb(255, 87, 51). This tool does it instantly.
▶Which color format should I use in CSS?
For static colors: HEX or RGB — simplest, widely supported. For design systems: HSL or OKLCH — easy to generate variants by tweaking one value. For wide gamut: Display P3 via color() function. For modern CSS: space-separated RGB (no commas): rgb(255 87 51).
▶What is OKLCH and why should I use it?
OKLCH is a modern color format (CSS Color Level 4) that is perceptually uniform — equal changes in L produce equal visual differences regardless of hue. Perfect for design systems where you want consistent contrast across brand colors. Supported in modern browsers (2023+).
▶How do I check if a color has enough contrast?
Measure the contrast ratio between foreground and background. WCAG requires: 4.5:1 for normal text (AA), 3:1 for large text (AA), 7:1 for AAA compliance. The tool shows contrast against white and black — use it to verify your color choices meet accessibility standards.
▶Why does my color look different in different apps?
Color space. Safari and Chrome on macOS can display Display P3; Windows browsers typically use sRGB. The same HEX code may render more saturated on P3. Also, your display calibration affects how colors appear. For accuracy, use soft proofing and calibrated monitors.
▶Can I convert to CMYK for print?
Yes, but with caveats. CMYK conversion depends on the specific printer, paper, and ink (an ICC profile). The generic CMYK values shown here are approximate. For production print, work with your print shop to get exact values or use a dedicated design tool (InDesign, Affinity Publisher) that supports ICC profiles.
▶What does alpha mean?
Alpha is the transparency channel — a value from 0 (fully transparent) to 1 (fully opaque). rgba(255, 0, 0, 0.5) is 50% transparent red. When displayed, the color blends with whatever is behind it. Alpha is stored in the 4th byte of 8-digit HEX: #FF000080 = red with ~50% alpha.
▶How do I darken or lighten a color?
Easiest in HSL or OKLCH — just change the lightness value. hsl(11 100% 60%) becomes hsl(11 100% 40%) for a darker version. In HEX, you would have to convert, adjust, and convert back. This tool does that automatically.
▶What are tints, shades, and tones?
Tint = original color + white (lighter, pastel). Shade = original color + black (darker). Tone = original color + gray (less saturated). In HSL/OKLCH, tints increase lightness, shades decrease lightness, tones reduce saturation. Design systems often define color palettes with 10-11 steps from tint to shade.
▶Can I use colors outside the sRGB gamut?
Yes, via Display P3 or Rec2020 color spaces. Safari on iOS/macOS and recent Chrome support P3. Declare with CSS: color(display-p3 R G B). Always provide an sRGB fallback for browsers that do not support wide gamut: background: red; background: color(display-p3 1 0 0);.
Additional resources
- CSS Color Module Level 4 — W3C specification for modern CSS color formats including OKLCH and Display P3.
- Oklab color space (Björn Ottosson) — Original research behind OKLAB and OKLCH.
- WCAG Contrast Minimum — W3C Web Content Accessibility Guidelines for color contrast.
- MDN — CSS Colors — Comprehensive CSS color value reference.
- OKLCH Color Picker — Interactive OKLCH picker to explore the color space.
Related tools
All ConvertersColor Blindness Simulator
Simulate how colors and images appear to users with protanopia, deuteranopia, tritanopia, achromatopsia, and other color vision deficiencies.
Color Contrast Checker
Check color contrast ratios between foreground and background for WCAG 2.1 AA and AAA compliance with live preview.
Color Name Finder
Find the nearest named color for any hex, RGB, or HSL value from CSS web colors, X11 standard colors, and Pantone approximations.
Color Palette Generator
Generate harmonious color palettes from any base color with complementary, analogous, triadic, and monochromatic schemes.
Color Shades Generator
Generate tints (lighter), shades (darker), and tones (desaturated) from any base color for design systems and UI states.
CSS Gradient Generator
Create linear, radial, and conic CSS gradients with live preview
Learn more
Explore more tools
200+ free tools that run in your browser.
Browse all tools →