Color Converter

Convert Colors Fast

This Color Converter helps you translate colors between the most common formats used in design and development: HEX, RGB, HSL, HWB, CMYK, and many named colors.

It’s built for real workflow:

• Live conversion as you type
• Batch conversion (one color per line)
• Active-line color picker for building palettes quickly
• Swap formats to flip your direction instantly
• Copy output in one click

---

Quick Start

1. Choose Input format (or leave on Auto-detect)
2. Choose Output format
3. Paste your color(s)
4. Copy the results

Batch mode

Turn on Batch by newline to convert palettes:

Input:

#ff0055
rgb(34, 211, 238)
tomato

Output (example HEX):

#FF0055
#22D3EE
#FF6347

Active-line picker (palette builder)

In batch mode the picker edits the line your cursor is on:

• Put cursor on line 3 → pick color → line 3 changes
• Press Enter → cursor goes to next line → pick again

This makes palette building feel fast and intentional.

---

What Is a “Color Format”?

A color format is a way to describe a color with numbers (or names).

Different formats exist because different people and tools need different things:

• Designers often need to tune hue and lightness → HSL
• Developers want stable tokens in code → HEX
• Printing uses inks that absorb light → CMYK
• Some workflows prefer “whiteness/blackness” control → HWB

Under the hood, converters typically:

1. Parse your input into a standard internal representation (commonly RGB)
2. Convert it into the format you requested
3. Format the numbers (rounding where necessary)

---

RGB — The Screen Model (Additive)

RGB stands for Red, Green, Blue.

This is an additive model used by screens:

• Start at black (no light)
• Add red/green/blue light to get brighter colors

Examples: rgb(0, 0, 0) → black, rgb(255, 255, 255) → white, rgb(255, 0, 0) → pure red

Why RGB is used

• Web and app UI work
• Canvas / graphics programming
• Any workflow close to “screen pixels”

---

HEX — RGB in a Compact, Token-Friendly Form

HEX is essentially RGB written in hexadecimal.

Example: #FF5733

It encodes: FF (red), 57 (green), 33 (blue)

So HEX is “RGB, but shorter and standard for CSS.

Why HEX is used

• CSS and design tokens
• Storing palette values in configs
• Easy copy/paste format

Common variants

• #fff shorthand → #ffffff
• #ffffffff sometimes includes alpha (transparency)

---

HSL — Human-Friendly Adjustments

HSL stands for Hue, Saturation, Lightness.

• Hue: the color family, in degrees around a color wheel (0–360)
  • 0 = red, 120 = green, 240 = blue
• Saturation: intensity (0% = gray, 100% = vivid)
• Lightness: brightness (0% = black, 50% = “normal”, 100% = white)

Example: hsl(14, 100%, 60%)

Why HSL is used

• Designing themes (make a palette lighter/darker)
• Adjusting a color while keeping the “same hue”
• Building systematic color scales
• It’s easy to reason about: “same hue, less saturation”

---

HWB — Whiteness & Blackness

HWB stands for Hue, Whiteness, Blackness.

• Hue works like HSL (0–360)
• Whiteness adds white
• Blackness adds black

Example: hwb(14 0% 0%)

Why HWB is used

• Some designers find it more intuitive than HSL
• It can feel closer to mixing paint with white/black
• It has simple mental model for “tints” and “shades”

---

CMYK — Printing Model (Subtractive)

CMYK stands for:

• Cyan
• Magenta
• Yellow
• Key (Black)

CMYK is a subtractive model used in printing:

• Paper reflects light
• Ink absorbs light (subtracts wavelengths)
• More ink usually means darker results

Example: cmyk(0%, 66%, 80%, 0%)

Why CMYK is used

• Print design handoffs
• Packaging, posters, flyers
• Anything going to an ink-based process

Important note about CMYK conversions

CMYK depends on inks, paper, printers, and color profiles.

So any “RGB ↔ CMYK” conversion without profiles is an approximation.

It’s still useful for:

• quick previewing
• rough handoff values
• sanity checks

But for professional print accuracy, you’ll want ICC profiles and a print workflow.

---

Named Colors — Human-Friendly Labels

Named colors are values like:

• tomato
• rebeccapurple
• royalblue

They’re convenient for prototyping and readability.

Why names are used

• quick mockups
• teaching and examples
• readable CSS snippets

Note

Not every color has a perfect name. When converting to Name, the tool may choose the closest name or fall back to HEX.

---

Auto-detect vs Strict Input

Auto-detect

Auto-detect is best when your input list is mixed:

• HEX on one line
• RGB on another
• a named color on another

Specific input formats

If you select a specific input format (like RGB), the tool expects your inputs to match.

To avoid confusion, changing the Input format rewrites your existing inputs into the selected format.

This prevents:

• “Input says RGB but text is HSL”
• conversions that appear valid while being in the wrong format label

---

Practical Use Cases

1. Normalize a palette into stable HEX tokens

• Input: Auto-detect
• Output: HEX
• Batch: ON

2. Tune a color using HSL

• Convert HEX → HSL
• Adjust hue/lightness
• Convert back to HEX

3. Prepare a print handoff

• Convert your brand colors into CMYK
• Use as a starting point (final print requires profiles)

4. Build a quick UI theme

• Start with a base HEX
• Convert to HSL
• Create lighter/darker variations by changing Lightness

---

Tips for Best Results

• Use Auto-detect when pasting mixed lists
• Use Batch by newline for palettes
• Use HSL when you need “systematic” adjustments
• Treat CMYK as approximate unless using print profiles
• If you want solid colors only, enable No Alpha

---

Troubleshooting

“Unrecognized color”

• Check parentheses/commas and percent signs
• Try Auto-detect
• Remove extra trailing characters

“My numbers changed slightly”

• Normal: conversion requires rounding

“My CMYK values look strange”

• CMYK conversion is profile-dependent; treat as a helpful estimate

“Picker changed the wrong line”

• Ensure your cursor is on the line you want to edit (active line)