Color Calculators
Convert between color formats used in web, print, and digital art. Each calculator is focused on a specific conversion with the math explained — including the modern OKLCH perceptually uniform format from CSS Color Level 4.
#FF6B35 ⇄ rgb(255,107,53)
Hex ↔ RGB
Convert between hex color codes and red, green, blue channel values in both directions.
hsl(H°,S%,L%) ↔ hsv(H°,S%,V%)
HSL ↔ HSV
Convert directly between HSL and HSV without going through RGB.
rgb → cmyk(C%, M%, Y%, K%)
RGB ↔ CMYK
Convert between screen RGB and the subtractive CMYK model used in print.
rgb → hsl(H°, S%, L%)
RGB ↔ HSL
Convert between RGB and Hue, Saturation, Lightness — used in CSS color functions.
rgb → hsv(H°, S%, V%)
RGB ↔ HSV / HSB
Convert between RGB and Hue, Saturation, Value used in Photoshop and Figma.
#3A7BD5 ⇄ cmyk(73%, 43%, 0%, 16%)
Hex ↔ CMYK
Convert hex color codes directly to CMYK ink percentages for print — and back again.
rgb → oklch(L C H°)
RGB ↔ OKLCH
Convert to the perceptually uniform OKLCH format used in CSS Color Level 4 — ideal for design system color scales.
Choosing the Right Color Format
- Hex / RGB — Use in CSS, HTML, and most web design tools.
- HSL — Best for programmatic color adjustments in CSS and when you need to reason about lightness or saturation.
- HSV / HSB — Common in design applications like Photoshop, Figma, and Sketch color pickers.
- CMYK — Required for print-ready files; screen-to-print conversions are approximations without ICC color profiles.
-
OKLCH — The modern CSS Color Level 4 perceptually uniform format. Use it for building accessible color scales and for color interpolation in
color-mix().