How To Convert Color Formats
📖 Bu rehber ToolPazar ekibi tarafından hazırlanmıştır. Tüm araçlarımız ücretsiz ve reklamsızdır.
The common formats
HEX, RGB, HSL, HSB, OKLCH, CMYK — the same color has many representations, and each one makes sense in a specific context. HEX is compact and copy-friendly. HSL is intuitive for tweaking. OKLCH is perceptually uniform. CMYK is for print. Converting between them is mechanical, but picking the right one for the job and avoiding gamut clipping / precision loss is where most confusion lives. This guide covers the color models, how conversions actually work, sRGB vs wide gamut, the new CSS Color 4 formats (oklch, color(), display-p3), print considerations, and how to avoid losing fidelity in round-trips.
HEX ↔ RGB conversion
Purely mechanical. HEX is base-16 encoding of 0-255 integers, two digits per channel:
RGB ↔ HSL conversion
Not mechanical — involves min/max math to find hue and lightness. The formula:
sRGB vs wide gamut
Traditional HEX / RGB / HSL assume sRGB — the web’s default gamut, covers ~35% of visible colors. Modern displays (iPhone, MacBook, high-end monitors) can show Display P3 (~45%) or Rec2020 (~75%).
OKLCH — perceptually uniform
HEX can’t represent P3 colors. If your brand has a vivid red that looks dull on your phone, you’re probably clipping to sRGB:
CMYK conversion — and why it’s lossy
OKLCH fixes this by using a color space where equal numeric steps look equally different to the eye. Transitions in OKLCH stay vivid and smooth. Recommended for gradients, chart color scales, and theme token generation.
Precision and round-tripping
Monitor colors come from emitted light (additive RGB); print comes from absorbed light (subtractive CMYK). The conversion is fundamentally imperfect — CMYK can’t reproduce all sRGB colors (especially bright blues, greens), and sRGB can’t reproduce all CMYK colors (especially deep browns, some yellows).
Accessibility and contrast
This works for basic conversion but ignores ink characteristics, paper, press calibration. Real print workflows use ICC profiles (GRACoL 2013, Fogra 51) for accurate conversion. Design tools (Illustrator, InDesign) do this automatically.
Color picker workflows
HEX → RGB is exact (1-to-1 mapping). RGB → HSL → RGB can lose a tiny amount of precision due to floating-point math, but it’s usually <1% per channel. Safe for most uses.
Common mistakes
sRGB → CMYK → sRGB is lossy. Don’t round-trip unless you have to.
Run the numbers
Strength of a color isn’t the same as its contrast against a background. WCAG contrast ratios (4.5:1 for body text) are calculated from luminance (a weighted combination of R, G, B — not straight brightness).