Skip to main content
NeatUtility

Color Code Converter (HEX, RGB, HSL, HSV, CMYK)

Color & CSS100% Client-Side
Ready
TEXT
0 lines0 chars
0 B / 9.8 KB
About this tool, examples & FAQ

Convert colors across HEX, RGB, HSL, HSV, CMYK, and CSS formats in real-time with alpha opacity support and WCAG contrast luminance evaluation.

Key facts

Verified capabilities and limits of this utility
Supported color modelsHEX (#RRGGBB, #RRGGBBAA), RGB/RGBA, HSL/HSLA, HSV, and CMYK
Alpha channel supportPreserves opacity in RGBA, HSLA, and 8-digit hexadecimal colors
Luminance calculationCalculates WCAG 2.1 relative luminance and recommends optimal light/dark text contrast
Output representationsDetailed comparison table, CSS custom property declarations, or JSON object model
Max input size10 KB
Execution deadline2 s
Processing locationBrowser-only: color parsing and calculations run locally without network calls

How to use

  1. Enter or paste any color code into the input box (e.g. #3B82F6, rgb(59, 130, 246), or hsl(217.2, 91.2%, 59.8%)).
  2. Select your target operation: Convert All Formats, HEX only, RGB only, HSL only, or CMYK only.
  3. Choose your preferred presentation style: Overview Table, CSS Declarations, or JSON Model.
  4. Toggle uppercase HEX formatting or alpha channel preservation as needed.
  5. Click 'Run' or press Ctrl+Enter to inspect the converted color values and WCAG relative luminance.

Example

Convert Tailwind Blue to all formats

Input

#3B82F6

Example output

┌───────────────────────────┬────────────────────────────────────────┐
│ Format                    │ Value                                  │
├───────────────────────────┼────────────────────────────────────────┤
│ HEX                       │ #3B82F6                                │
│ RGB / RGBA                │ rgb(59, 130, 246)                      │
│ HSL / HSLA                │ hsl(217.2, 91.2%, 59.8%)               │
│ HSV                       │ hsv(217.2, 76%, 96.5%)                 │
│ CMYK                      │ cmyk(76%, 47.2%, 0%, 3.5%)             │
│ Relative Luminance (WCAG) │ 0.2355                                 │
│ Recommended Text Color    │ Dark (#000000)                         │
└───────────────────────────┴────────────────────────────────────────┘

Edge cases

Named web colors

Accepts standard W3C named colors such as red, blue, lime, teal, navy, and purple.

Alpha channel opacity handling

Parses 8-digit HEX (#RRGGBBAA) and rgba(r, g, b, a) values, maintaining precise fractional opacity across formats.

CMYK gamut approximation

Transforms subtractive CMYK ink percentages to additive sRGB using standard subtractive ink modeling formulas.

How it works

  1. Normalizes color input strings and identifies the color syntax (HEX, RGB, HSL, HSV, CMYK, or named color).
  2. Translates color values into standard 8-bit sRGB channel integers (0–255) and an alpha float (0–1).
  3. Derives HSL cylindrical lightness and HSV cylindrical value coordinates.
  4. Computes subtractive CMYK ink percentages (cyan, magenta, yellow, key/black).
  5. Evaluates WCAG 2.1 relative luminance to determine optimal foreground text contrast.

Related workflows

Frequently asked questions

What is WCAG relative luminance?

Relative luminance is the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white. It is the foundation for WCAG accessibility contrast calculations.

How do you convert HEX to RGB?

A 6-digit hex code represents three pairs of base-16 numbers: #RRGGBB. The red value is parseInt(RR, 16), green is parseInt(GG, 16), and blue is parseInt(BB, 16), yielding values from 0 to 255.

Why do print CMYK colors sometimes look different on screen?

CMYK is a subtractive color model used in commercial printing, whereas sRGB is an additive light model used on computer monitors. Screens can display brighter, more saturated tones that fall outside standard four-color printing press gamuts.

References