Color Format Converter

Convert colors across HEX, RGB, HSL, HSV, and CMYK color spaces. Interactive color picker, WCAG accessibility contrast checker, and CSS variable generator.

Color Definition

Preset Palette
RGB Channels (0 – 255)
HSL Coordinates
#3B82F6

HEX

#3B82F6

RGB

59, 130, 246

HSL

217°, 91%, 60%

CMYK

76,47,0,4

Copy Code Formats
HEX#3B82F6
CSS RGBrgb(59, 130, 246)
CSS HSLhsl(217deg 91% 60%)
HSV / HSBhsv(217°, 76%, 96%)
WCAG Contrast Assessment
Vs White (#FFF)3.68:1
Vs Black (#000)5.71:1

Display P3 & Wide Color Gamut

Standard sRGB gamut covers approximately 35% of the human eye's visible spectrum. Modern CSS Color Module 4 also supports Display P3 and OKLCH color spaces.

Color Space Coordinate Transformations & Luminance Math

Color spaces map continuous visible wavelengths into discrete numerical coordinate axes. Converting from additive RGB space to cylindrical HSL is modeled as follows:

1. RGB to HSL Hue Angle Formula
H = 60° ×
G - BC_max - C_min
(when C_max = R)
2. WCAG Relative Luminance & Contrast Ratio
L = 0.2126 R_lin + 0.7152 G_lin + 0.0722 B_lin⟶Contrast =
L_1 + 0.05L_2 + 0.05
Step-by-Step Color Space Translation Breakdown
Step 1: Normalize Integer RGB Channels to [0, 1] Range
R' = 59 / 255 = 0.231, G' = 130 / 255 = 0.510, B' = 246 / 255 = 0.965
Step 2: Calculate Extrema & Lightness
C_max = 0.965 (Blue), C_min = 0.231 (Red), Δ = 0.734
Lightness L = (0.965 + 0.231) / 2 = 59.8% ≈ 60%
Step 3: Cylindrical HSL Angle Mapping
HSL Output=hsl(217deg, 91%, 60%)

Color Models Comparison Matrix

ModelChannels & RangePrimary DomainBest Use Case
HEX#RRGGBB (00 to FF)Web / CSS / HTMLCompact string notation in styles
RGBR, G, B (0 - 255)Monitors & Screen HardwareCanvas APIs & WebGL shaders
HSLH (0-360°), S (0-100%), L (0-100%)Design Systems & UICreating tonal themes and hover states
CMYKC, M, Y, K (0 - 100%)Print & PublishingPhysical offset ink presses

Frequently Asked Questions

What is the difference between RGB, HSL, and HEX color models?
RGB defines colors through red, green, and blue light channels (0-255). HEX is a 6-digit base-16 representation of RGB. HSL (Hue, Saturation, Lightness) describes color cyclically around a 360° color wheel, making it significantly more intuitive for humans to tweak brightness and saturation.
What is WCAG color contrast compliance?
The Web Content Accessibility Guidelines (WCAG) require a minimum contrast ratio of 4.5:1 for normal text (AA level) and 7:1 for enhanced accessibility (AAA level) against its background.
When should I use CMYK instead of RGB?
RGB is an additive light model intended for digital screens. CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive ink model used specifically for physical print media (brochures, magazines, packaging).
How does CSS modern color-mix() and HSL manipulate colors?
Modern CSS stylesheets use HSL and `color-mix()` to create dynamic dark mode palettes and hover states by merely adjusting the lightness component (e.g. `hsl(217 91% calc(60% - 10%))`).

Related Tools