Color Format Converter

Convert colors between 18+ formats with channel breakdown and code snippets

Convert colors between 18+ formats instantly. Enter a color in HEX, RGB, HSL, HSV, CMYK, HWB, LAB or CSS name and get all conversions with channel breakdown and ready-to-copy code snippets.

Input Color

≈ mediumslateblue(≈ ΔE 24.3)

Quick Colors

#6366F1

mediumslateblue

🌐 Web / CSS

HEX

#6366f1

HEX8 (RGBA)

#6366f1ff

RGB

rgb(99, 102, 241)

RGBA

rgba(99, 102, 241, 1)

HSL

hsl(239, 84%, 67%)

HSLA

hsla(239, 84%, 67%, 1)

CSS Name

≈ ΔE 24.3

mediumslateblue

🎨 Design

HSV/HSB

hsv(239, 59%, 95%)

HWB

hwb(239 39% 5%)

RGB %

39%, 40%, 95%

🖨️ Print

CMYK

cmyk(59%, 58%, 0%, 5%)

🔬 Perceptual

CIE LAB

lab(50.1 38.69 -70.49)

LCH

lch(50.1 80.41 298.76)

💻 Code / Dev

CSS Variable

--color: #6366f1;

Tailwind

bg-[#6366f1]

Swift UIColor

UIColor(red: 0.388, green: 0.400, blue: 0.945, alpha: 1.00)

Android

Color.rgb(99, 102, 241)

RGB Decimal

0.3882, 0.4000, 0.9451

Integer

6514417

How it works

Color formats are different ways to represent the same color. This tool supports 18+ formats organized into 5 categories: Web/CSS, Design, Print, Perceptual, and Code.

Web / CSS Formats

HEX / HEX8

6-digit hexadecimal format (#FF5733) or 8-digit with alpha (#FF5733FF). The standard in CSS and web design.

RGB / RGBA

Additive light model. Each channel ranges 0-255. RGBA adds transparency (0-1). Example: rgba(255, 87, 51, 0.8)

HSL / HSLA

Hue (0°-360°), Saturation and Lightness (0%-100%). The most intuitive format for programmatic color adjustment. Example: hsl(11, 100%, 60%)

CSS Named Color

The tool automatically detects the closest CSS named color from the 148 standard named colors, showing the ΔE distance.

Design Formats

HSV / HSB

Similar to HSL but uses Value/Brightness instead of Lightness. The native model in Adobe Photoshop and Figma.

HWB (Hue, Whiteness, Blackness)

Modern CSS format that describes colors by mixing a hue with white and black. More intuitive than HSL for humans. Example: hwb(11 20% 0%)

Perceptual Formats

CIE LAB

Perceptually uniform color space. L = lightness (0-100), a = green-red axis, b = blue-yellow axis. Used in color science and Delta E calculations.

LCH (Lightness, Chroma, Hue)

Cylindrical version of LAB. Combines LAB's perceptual uniformity with hue intuitivenes. CSS Color Level 4 supports it natively.

When to use each format?

HEX: CSS, web design, compact code
RGB/RGBA: Screens, JavaScript, canvas
HSL: Creating variations, adjusting hue/saturation
HSV: Photoshop, Figma, Illustrator
HWB: Modern CSS, intuitive mixing
CMYK: Professional printing
LAB/LCH: Color science, perceptual differences

💡 Practical Use Cases

Case 1: Brand color → CSS Variables

A client sends you #1E90FF. Use the "Code" tab to get CSS variables, SCSS and Tailwind config ready to copy.

Case 2: Cross-platform mobile app

You need the same color in iOS (Swift UIColor), Android (Kotlin) and Flutter (Dart). The code tab generates snippets for all 3 platforms.

Case 3: Analyzing color composition

Use the "Channels" tab for a visual RGB and HSL breakdown with animated bars, plus CMYK, LAB, LCH and HWB values at a glance.

Case 4: Finding the closest CSS name

Enter any color and the tool finds the closest CSS named color (from 148 available) with the ΔE distance to know how similar it is.

Frequently Asked Questions

How many formats does this tool support?

It supports 18+ formats in 5 categories: Web/CSS (HEX, HEX8, RGB, RGBA, HSL, HSLA, CSS name), Design (HSV, HWB, RGB %), Print (CMYK), Perceptual (CIE LAB, LCH), and Code (CSS Variable, Tailwind, Swift, Android, RGB decimal, integer).

How do I convert HEX to RGB?

Simply enter a HEX color (e.g., #FF5733) and you'll automatically see conversions to all formats including RGB. Click any format to copy it.

What is CIE LAB and what is it used for?

CIE LAB is a perceptually uniform color space. The distance between two colors in LAB (Delta E) corresponds to how humans perceive the difference. It's used in quality control, color science, and accessibility.

What is HWB and why is it useful?

HWB (Hue, Whiteness, Blackness) is a modern CSS format that describes colors as a hue mixed with white and black. It's more intuitive than HSL because it reflects how we mix paints.

Why do colors look different on screen vs print?

Screens use RGB (additive light) while printing uses CMYK (subtractive ink). Some bright RGB colors cannot be exactly reproduced in CMYK, which is called "out of gamut".

Can I get code snippets for my platform?

Yes! The "Code" tab generates ready-to-copy snippets for CSS, SCSS, Tailwind Config, JavaScript, Swift (UIColor), Android (Kotlin), Flutter (Dart) and Python.