Ttooleras
🎨

Color Converter

Converters

Convert between HEX, RGB, HSL, HSV, CMYK, Lab, LCH color formats. Free, private — all processing in your browser.

R:99 G:102 B:241H:239° S:84% L:67%
White text
Black text
On white: 4.47:1 ✗ FailOn black: 4.70:1 ✓ AA
HEX#6366f1
RGBrgb(99, 102, 241)
RGB %rgb(39%, 40%, 95%)
HSLhsl(239, 84%, 67%)
HSV/HSBhsv(239, 59%, 95%)
CMYKcmyk(59%, 58%, 0%, 5%)
CSS Variable--color: #6366f1;
Tailwind[#6366f1]
Integer6514417
Filterbrightness(0) saturate(100%) invert(67%)
Advertisement

Pick a color (or paste a hex value) and get it in every format you actually use: HEX, RGB, HSL, HSV/HSB, and CMYK, plus ready-to-paste snippets for a CSS variable, a Tailwind arbitrary value, and the raw integer. It also shows the color's contrast ratio against black and white and whether that clears the WCAG AA threshold — a quick check before you put text on it.

Everything updates live as you drag the picker, and it all runs in your browser. It's the tool for the small, constant job of "I have this color in one format and need it in another."

Step by step

  1. 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. 2

    See all conversions

    The same color appears in every format simultaneously. Copy the one you need with one click.

  3. 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. 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. 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. 6

    Copy the CSS value

    Click the Copy button next to your preferred format. Paste into your CSS, Tailwind config, Figma, or design system.

Color Converter in practice

HEX to all other formats

Starting from a HEX value, see every equivalent.

Input
#FF5733
Output
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.

Input
rgba(52, 152, 219, 0.75)
Output
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.

Input
hsl(210 50% 60%)
Output
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.

Input
Need 5 colors at 70% lightness
Output
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.

Input
color(display-p3 1 0 0)
Output
Pure display-p3 red — more saturated than sRGB #FF0000 on supported displays
Fallback: rgb(255 0 0)

WCAG contrast check

Test text on background.

Input
Text: #333333 on background: #FFFFFF
Output
Contrast ratio: 12.63:1
AA large text: ✓ Pass (3:1)
AA normal text: ✓ Pass (4.5:1)
AAA: ✓ Pass (7:1)

Features at a glance

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.

When to use 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.

Technical details

Each model exists for a different reason:
- HEX / RGB — how screens actually mix light (red, green, blue). Interchangeable; HEX is just RGB in compact hexadecimal. Use these for web and app colors.
- HSL — hue, saturation, lightness. The one to reach for when *adjusting* a color: nudge lightness for a hover state, drop saturation for a muted variant. Far more intuitive than editing raw RGB.
- HSV/HSB — what most color pickers use internally (the square-plus-hue-slider layout).
- CMYK — subtractive inks for print. Note the honest caveat below.

Contrast and WCAG. The tool computes relative luminance and the contrast ratio against pure white and pure black. WCAG AA wants 4.5:1 for normal text (3:1 for large text). Use it as a fast gate; for a specific foreground/background pair, a dedicated contrast checker is more precise.

Why the CMYK value is approximate. RGB (light) to CMYK (ink) has no single correct answer without a color profile (ICC) and the specific paper/press. The formula here is the standard math conversion — fine for a rough sense, but never send it to a printer expecting an exact match. Get real CMYK from your print shop's profile.

Common problems and solutions

⚠Trusting the CMYK value for printing

RGB-to-CMYK without a color profile is only approximate. Bright screen colors are often out of gamut and print duller. Get exact CMYK from your printer's ICC profile — use this for a rough idea only.

⚠Editing raw RGB to make a lighter/darker shade

Adjusting three RGB channels by eye shifts the hue. Switch to HSL and change only L (lightness) to get a clean lighter or darker version of the same color.

⚠Assuming the contrast check covers your real design

It measures contrast against pure black and pure white. Your actual text sits on a specific background — check that exact pair (and remember AA needs 4.5:1 for body text).

⚠Confusing HSV and HSL

They share hue but differ on the third axis. A 50% lightness in HSL is the pure hue; 100% value in HSV is the pure hue. Don't copy an HSV number into an hsl() function.

⚠Expecting web colors to match print

Monitors emit light; paper reflects it. Even with perfect conversion, the gamuts differ, so a design will look somewhat different printed. Proof on the actual medium before committing.

Alternatives and comparisons

HEX vs RGB. Identical information, different notation. #6366f1 is rgb(99, 102, 241). HEX is compact and the web default; RGB is handy when you need an alpha channel (rgba) or want to compute with the channels.

RGB/HEX vs HSL. Store and ship colors as HEX/RGB, but *design* with HSL. Want a darker shade of the same color? In HSL you drop the L and keep H and S. In HEX you'd be guessing at three hex pairs.

RGB vs CMYK. Screens emit light (additive RGB); print absorbs it (subtractive CMYK). Vivid screen colors — bright blues, neon greens — often can't be reproduced in CMYK at all ("out of gamut"), which is why a design can look duller in print. Convert for print with a real profile, not a web formula.

HSV vs HSL. Similar but not the same: HSL's lightness runs pure color at 50% (0% black, 100% white), while HSV's value runs 0% black to 100% full color. Pickers favor HSV; CSS uses HSL.

Frequently asked questions about the Color Converter

▶Which format should I use in CSS?

HEX or RGB for setting colors, HSL when you want to tweak them (shades, hover states). All three are valid CSS. The tool gives you a copy-ready CSS variable and Tailwind arbitrary value too.

▶Is the CMYK value accurate for printing?

No — treat it as approximate. Accurate CMYK depends on a color profile and the specific paper and press, which a formula can't know. Use your print shop's ICC profile for anything that must match.

▶What is HSL good for?

Adjusting colors. Because it separates hue, saturation, and lightness, you can make a darker or more muted version by changing one number without shifting the underlying color — much easier than editing RGB.

▶What does the contrast ratio tell me?

How readable text will be on that color. WCAG AA needs 4.5:1 for normal text and 3:1 for large text. The tool checks against pure black and white; for a specific pairing, verify that exact combination.

▶Is my color sent anywhere?

No. All conversions run in your browser instantly. Nothing is uploaded — it's just math on the value you enter.

▶Why does my bright screen color look dull in print?

Screens emit light (RGB) and can show vivid colors that ink (CMYK) physically can't reproduce — they're 'out of gamut.' The conversion clamps them to the nearest printable color, which looks duller.

Further reading

Advertisement

Related tools

All Converters
👁️

Color 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

Why a single emoji breaks string length

26 min read

Git Commands Cheat Sheet: Every Command You Actually Need

19 min read

CSS Colors: HEX, RGB, HSL Explained — When to Use Each Format

15 min read

Explore more tools

200+ free tools that run in your browser.

Browse all tools →