ColorPaletteXYZ Logo
ColorPaletteXYZ

Instant Color Converter

Convert seamlessly between HEX, RGB, HSL, HSV, and CMYK in real time. Adjust any field to see updates instantly reflect across all formats.

Brand Blue
#2563EB

HEX

Format: #RRGGBB or #RGB

RGB

HSL

CMYK (Print)

HSV / HSB

hsv(221°, 84%, 92%)
Used across digital design tools like Figma, Illustrator, and Photoshop.

Modern CSS

rgb(37 99 235)
CSS Color Module Level 4 syntax.
Colorimetry & Mathematical Color Conversion Guide

The Definitive Guide to Digital Color Spaces & Conversion Mathematics

Digital design and software development require constant translation between distinct mathematical models of color. A web developer writing CSS uses HEX or HSL; a graphics programmer rendering WebGL shaders uses normalized linear RGB floats; a print designer preparing packaging uses subtractive CMYK ink separations. Understanding the underlying conversion mathematics ensures color accuracy and cross-platform fidelity.

Mathematical Color Space Conversion Formulas

How chromatic data is transformed across industry-standard digital and print coordinates:

HEX to RGBBase-16 Parsing

Hexadecimal numbers convert base-16 strings into 8-bit integers (0–255):

R = parseInt(hex.slice(0, 2), 16) G = parseInt(hex.slice(2, 4), 16) B = parseInt(hex.slice(4, 6), 16)
RGB to HSLCylindrical Mapping

Calculates Hue angle (0°–360°), Saturation %, and Lightness %:

Max = max(r, g, b), Min = min(r, g, b) L = (Max + Min) / 2 Delta = Max - Min S = L > 0.5 ? Delta/(2-Max-Min) : Delta/(Max+Min)
RGB to HSV / HSBPerceptual Value

Computes Value as maximum channel intensity and Saturation relative to brightness:

V = max(r, g, b) Delta = V - min(r, g, b) S = V === 0 ? 0 : Delta / V H = computeSectorAngle(r, g, b, Delta)
RGB to CMYKSubtractive Separation

Models subtractive ink densities for four-color process printing:

K = 1 - max(r', g', b') C = (1 - r' - K) / (1 - K) M = (1 - g' - K) / (1 - K) Y = (1 - b' - K) / (1 - K)
RGB to CIE Relative LuminanceWCAG 2.2 Math

Linearizes sRGB via gamma expansion and weights retinal cone sensitivity:

R_lin = gammaExpand(r / 255) G_lin = gammaExpand(g / 255) B_lin = gammaExpand(b / 255) L = 0.2126*R_lin + 0.7152*G_lin + 0.0722*B_lin
8-Digit HEX Alpha NotationTransparency

Maps opacity float (0.0–1.0) to a two-digit hexadecimal suffix:

alphaByte = Math.round(alphaFloat * 255) hexAlpha = alphaByte.toString(16).padStart(2, '0') fullHex = '#' + rHex + gHex + bHex + hexAlpha

Gamut Boundaries, Display P3 & Web Color Standards

Not all color spaces can reproduce the same chromatic range. Understanding gamut boundaries prevents unexpected color clipping and desaturation across devices:

Standard sRGB

Universal Web Baseline

Supported natively by 100% of web browsers, operating systems, and budget monitors. All standard 6-digit hex codes and 8-bit RGB values operate within the sRGB triangle.

Display P3 Wide Gamut

25% Wider Color Spectrum

Standard across modern Apple displays, OLED smartphones, and high-end creative monitors. Delivers significantly more intense greens, neon magentas, and deep reds.

OKLCH & Perceptual Spaces

Uniform Lightness Scaling

Next-generation CSS color model that decouples perceived lightness from hue, preventing unpredictable muddy color shifts during gradient transitions and palette generation.

Developer Snippets: Multi-Format Code Export

Copy converted color definitions directly into your frontend codebase:

Modern CSS Color Rules
background-color: #2563eb;
color: rgb(37 99 235 / 1);
border-color: hsl(221deg 83% 53%);
Tailwind & Theme Config
'primary': '#2563eb',
'primary-rgb': '37, 99, 235',
'primary-hsl': '221, 83%, 53%',

Explore Connected Color Suite Tools

Expand your creative workflow with our connected suite of interactive color tools:

Color Picker

Sample and convert HEX, RGB, HSL, and CMYK color codes.

Palette Generator

Generate 5-color optical harmonies with spacebar randomization.

Contrast Checker

Verify WCAG 2.2 AA & AAA contrast ratios between any two colors.

Shades & Tints

Generate 9-step monochromatic scales for UI design systems.

Image Color Picker

Extract dominant palettes and sample pixel colors from images.

Color Names Directory

Browse 500+ official CSS3 and designer color names.

Curated Palettes

Browse 800+ categorized color schemes for web, UI, and branding.

CSS Gradients

Explore multi-stop gradient blends with instant CSS code copying.

Color Conversion & Mathematics FAQs

Clear, authoritative answers to common questions regarding mathematical color conversions, color space limits, and CSS syntax.

How does this tool convert between HEX, RGB, HSL, HSV, and CMYK?
Our conversion engine uses exact mathematical transformation formulas. When you input any value (such as a 6-character hex code or RGB integers), the system normalizes the channels to a 0.0–1.0 floating point scale, determines the chroma delta, maps cylindrical hue angles for HSL/HSV, and computes subtractive ink percentages for CMYK without loss of precision.
How do you manually convert a 6-character HEX code to RGB?
Split the hex code into three 2-digit pairs: #RRGGBB. For each pair, multiply the first hexadecimal digit (0–9 = 0–9, A=10, B=11, C=12, D=13, E=14, F=15) by 16 and add the second digit. For example, in #2563EB: Red is (2 * 16) + 5 = 37, Green is (6 * 16) + 3 = 99, and Blue is (14 * 16) + 11 = 235, resulting in rgb(37, 99, 235).
Why do converted CMYK print colors often appear slightly desaturated compared to screen RGB?
RGB is an additive light model with a large digital color gamut capable of emitting brilliant, high-saturation neon lights from LED/OLED pixels. CMYK is a subtractive ink model used on physical paper that relies on ambient reflected light. Because the physical CMYK gamut is smaller, ultra-vivid RGB blues, greens, and magentas naturally map to the nearest printable subtractive ink tone.
What is the mathematical formula for converting RGB to HSL?
First normalize R, G, B to 0–1. Find Max = max(R,G,B), Min = min(R,G,B), and Delta = Max - Min. Lightness is L = (Max + Min) / 2. If Delta = 0, Hue = 0 and Saturation = 0 (neutral gray). Otherwise, Saturation is S = Delta / (1 - |2L - 1|). Hue is computed based on which channel is Max: if R, H = 60° * (((G - B) / Delta) mod 6); if G, H = 60° * (((B - R) / Delta) + 2); if B, H = 60° * (((R - G) / Delta) + 4).
What is the modern CSS Color Module Level 4 syntax for RGB and HSL?
Modern CSS supports space-separated parameters and forward-slash alpha channels: `rgb(37 99 235 / 0.8)` and `hsl(221deg 83% 53% / 80%)`. This clean syntax eliminates the need for separate `rgba()` or `hsla()` functions and is supported in all modern web browsers.
What is the difference between HSL and HSV/HSB during color conversion?
In HSL, Lightness (L) represents a spectrum from total black (0%) through pure color (50%) to total white (100%). In HSV/HSB, Value (V) represents brightness relative to full illumination; a Value of 100% with Saturation of 100% is the pure chromatic color, while white requires Saturation of 0% with Value of 100%.
How does 8-digit HEX notation support alpha transparency?
An 8-digit HEX code (#RRGGBBAA) appends a fourth 2-digit channel representing alpha opacity from 00 (0% fully transparent) to FF (100% fully opaque). For example, #2563EB80 represents #2563EB with approximately 50% opacity (128/255).
How can I verify the accessibility of a converted color before using it in production?
Once you have converted your color code, you can test it directly in our WCAG 2.2 Contrast Checker against custom foreground and background colors to guarantee compliance with Level AA (4.5:1) and Level AAA (7:1) legibility standards.