Color Converter: Translate HEX, RGB, HSL, and CMYK Instantly

Fast, accurate color conversions for web, UI, and print workflows. Built for designers, developers, and brand teams who need one reliable source of truth.

• Instantly convert between HEX, RGB, HSL, and CMYK
• Generate a neat 9-step palette of tints and shades from any base color
• Copy-paste-ready tokens for CSS and Tailwind
• Clear explanations, formulas, and best practices for on-screen and print color

Quick answer (Featured Snippet-ready): A color converter turns a color expressed in one format (like #3b82f6) into equivalent values in other formats (like rgb(59, 130, 246), hsl(217, 91%, 60%), or cmyk(76%, 47%, 0%, 4%)*). For CMYK, exact values depend on the target print profile; numbers shown without a profile are approximations.

---

Table of contents

• What is a color converter?
• Color formats explained: HEX, RGB, HSL, CMYK (and modern CSS color)
• When to use each format (practical guide)
• Accurate conversions 101: color spaces, gamma, and ICC profiles
• Conversion formulas with examples and code
• How to use the Zenixtools Color Converter
• Turn a single brand color into a Tailwind scale
• Accessibility essentials: contrast and legibility
• Print production tips for consistent results
• Common pitfalls and how to avoid them
• FAQ
• References and further reading
• Author and review notes

---

What is a color converter?

A color converter is a tool that quickly translates a color from one notation to another without changing its perceived appearance within the same color space and viewing conditions. It ensures that one brand color—defined for design, web code, and print—stays in sync.

• Typical inputs: HEX (#RRGGBB), RGB (0–255), HSL (0–360°, 0–100%, 0–100%), CMYK (0–100%).
• Typical outputs: The above formats, plus a palette of lighter and darker variants and copy-ready tokens.
• Core benefit: One source of truth across design tools (Figma/Sketch), front-end code (CSS/Tailwind), and print vendors.

Real-world example: Your brand “Blue 500” starts as #3b82f6 (HEX). You’ll want rgb(59, 130, 246) for CSS, hsl(217, 91%, 60%) to make systematic tints/shades, and CMYK numbers to brief a printer. A converter keeps these synchronized and documented.

---

Color formats explained: HEX, RGB, HSL, CMYK (and modern CSS color)

1. HEX (Hexadecimal)

• Format: #RRGGBB (e.g., #3b82f6) or shorthand #RGB.
• Where it shines: Web and UI code; compact and copy-paste friendly.
• Under the hood: HEX is just sRGB-encoded RGB values in base-16.

2. RGB (Red, Green, Blue)

• Format: rgb(59, 130, 246) or rgba(59, 130, 246, 0.8).
• Where it shines: Screens (additive color). Browsers assume sRGB unless specified.
• Tip: Use RGBA for overlays and states. Preferred for computational accuracy vs HEX when you perform math in code.

3. HSL (Hue, Saturation, Lightness)

• Format: hsl(217, 91%, 60%) or hsla(… , alpha).
• Where it shines: Human-friendly adjustments—lighten/darken via L, mute/boost via S.
• HSL vs HSV/HSB: HSL balances lightness around midtones; HSV accentuates “value.” HSL often feels more intuitive for palette building and theming.

4. CMYK (Cyan, Magenta, Yellow, Key/Black)

• Format: cmyk(76%, 47%, 0%, 4%).
• Where it shines: Print (subtractive color) using inks on paper.
• Critical note: CMYK is device- and profile-dependent. Exact values require a target printer/paper ICC profile. Profile-agnostic conversions are only estimates.

5. Modern CSS color (helpful in 2026)

• Named functions: color(display-p3 r g b / a), lab(), lch(), oklab(), oklch(), color-mix().
• Why you care: Wider-gamut displays (Display P3) are common. OKLCH is perceptually uniform and great for designing consistent scales and dynamic theming. Browsers now widely support many of these models; always include fallbacks.

---

When to use each format (practical guide)

• Web/UI development

  • Author tokens in HEX or RGB; compute tints/shades in HSL or OKLCH for predictable light/dark systems.
  • Prefer sRGB for compatibility; optionally provide P3 variants for capable devices with graceful fallbacks.

• Design systems

  • Keep a single canonical value (usually sRGB) and expose human-editable forms (HSL/OKLCH) for designers.
  • Document how scales are derived (e.g., L steps in OKLCH, or L and S in HSL) to keep consistency.

• Theming at scale

  • Use HSL or OKLCH to programmatically generate palettes (e.g., L from 98% to 20%).
  • For data viz, vary C (chroma) and L (lightness) while stabilizing H (hue) to keep categories distinct.

• Accessibility workflows

  • Adjust Lightness (HSL) or L (OKLCH) to reach contrast targets, then verify via WCAG contrast calculations or APCA.

• Print deliverables

  • Convert to CMYK at handoff using the printer’s ICC profile (e.g., “U.S. Web Coated SWOP v2,” “FOGRA39,” “FOGRA51/52”).
  • Soft proof in a color-managed app; check total ink coverage and consider using spot colors for brand-critical hues.

---

Accurate conversions 101: color spaces, gamma, and ICC profiles

• sRGB is the baseline: Browsers assume sRGB unless specified. A value such as rgb(59, 130, 246) is sRGB-encoded in most UI contexts.
• Display P3 and Adobe RGB: Wider-gamut RGB spaces. Colors outside sRGB may clip on standard displays. If you publish HEX/RGB for the web, assume sRGB for consistency; optionally layer P3 for capable devices.
• Gamma and linearization
  • sRGB values are gamma-encoded. Many UI formulas (like HSL conversion) operate directly on those encoded RGB values because they’re intended for perceptual edits, not colorimetry.
  • Colorimetric conversions (e.g., to CIE Lab/OKLab) require linearizing sRGB first using the sRGB transfer function.
• CMYK requires a profile: There’s no single “correct” CMYK for a given RGB without specifying a destination profile. Use ICC-based conversions in pro tools for press-ready numbers.

Bottom line: For UI/web, sRGB-based conversions are predictable. For print, use ICC profiles and soft proofing.

---

Conversion formulas with examples and code

Clamp values to valid ranges after rounding to avoid out-of-bounds errors.

HEX ↔ RGB

• HEX to RGB
  • Parse pairs: RR, GG, BB as hexadecimal to decimal (0–255).
• RGB to HEX
  • Convert R, G, B (0–255) to 2-digit hex and concatenate.

Example (#3b82f6 → rgb(59, 130, 246)):

• #3b82f6 → R=0x3b=59, G=0x82=130, B=0xf6=246 → rgb(59, 130, 246)

function hexToRgb(hex) {
  let s = hex.trim().replace(/^#/, "");
  if (s.length === 3) s = s.split("").map(ch => ch + ch).join("");
  if (!/^[0-9a-fA-F]{6}$/.test(s)) throw new Error("Invalid HEX");
  const n = parseInt(s, 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}

function rgbToHex(r, g, b) {
  const clamp = v => Math.max(0, Math.min(255, Math.round(v)));
  const toHex = v => clamp(v).toString(16).padStart(2, "0");
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}

RGB ↔ HSL (sRGB-encoded)

Given r, g, b in [0, 255], first normalize to [0, 1].

• Max = max(r, g, b), Min = min(r, g, b)
• Lightness L = (Max + Min) / 2
• Saturation S =
  • 0 if Max == Min
  • else (Max - Min) / (1 - |2L - 1|)
• Hue H (in degrees): based on which channel is Max
  • If Max == r: H = 60 × (((g - b) / Δ) % 6)
  • If Max == g: H = 60 × ((b - r) / Δ + 2)
  • If Max == b: H = 60 × ((r - g) / Δ + 4)
  • Where Δ = Max - Min
• Normalize H to [0, 360).

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  const d = max - min;
  let h = 0, s = 0;
  const l = (max + min) / 2;

  if (d !== 0) {
    s = d / (1 - Math.abs(2 * l - 1));
    switch (max) {
      case r: h = 60 * (((g - b) / d) % 6); break;
      case g: h = 60 * ((b - r) / d + 2); break;
      case b: h = 60 * ((r - g) / d + 4); break;
    }
  }

  if (h < 0) h += 360;
  return { h, s: s * 100, l: l * 100 };
}

function hslToRgb(h, s, l) {
  s /= 100; l /= 100;
  const c = (1 - Math.abs(2 * l - 1)) * s;
  const hh = (h % 360) / 60;
  const x = c * (1 - Math.abs((hh % 2) - 1));
  let r1 = 0, g1 = 0, b1 = 0;

  if (0 <= hh && hh < 1) [r1, g1, b1] = [c, x, 0];
  else if (1 <= hh && hh < 2) [r1, g1, b1] = [x, c, 0];
  else if (2 <= hh && hh < 3) [r1, g1, b1] = [0, c, x];
  else if (3 <= hh && hh < 4) [r1, g1, b1] = [0, x, c];
  else if (4 <= hh && hh < 5) [r1, g1, b1] = [x, 0, c];
  else [r1, g1, b1] = [c, 0, x];

  const m = l - c / 2;
  const r = Math.round((r1 + m) * 255);
  const g = Math.round((g1 + m) * 255);
  const b = Math.round((b1 + m) * 255);
  return { r, g, b };
}

Example (rgb(59, 130, 246) → hsl(217, 91%, 60%)):

• r=0.231, g=0.510, b=0.965 → h≈217°, s≈91%, l≈60%.

RGB ↔ CMYK (profile-agnostic approximation)

Approximate RGB→CMYK (good for quick estimates; use ICC for press-ready):

• Normalize r, g, b to [0, 1].
• K = 1 − max(r, g, b)
• If K = 1 → C=M=Y=0, K=1 (pure black)
• Else: C = (1 − r − K) / (1 − K); M = (1 − g − K) / (1 − K); Y = (1 − b − K) / (1 − K)

CMYK→RGB approximation:

• r = 1 − min(1, C × (1 − K) + K)
• g = 1 − min(1, M × (1 − K) + K)
• b = 1 − min(1, Y × (1 − K) + K)
• Scale back to 0–255.

function rgbToCmyk(r, g, b) {
  let rn = r / 255, gn = g / 255, bn = b / 255;
  const k = 1 - Math.max(rn, gn, bn);
  if (k === 1) return { c: 0, m: 0, y: 0, k: 100 };
  const c = (1 - rn - k) / (1 - k);
  const m = (1 - gn - k) / (1 - k);
  const y = (1 - bn - k) / (1 - k);
  return {
    c: Math.round(c * 100),
    m: Math.round(m * 100),
    y: Math.round(y * 100),
    k: Math.round(k * 100)
  };
}

function cmykToRgb(c, m, y, k) {
  const C = c / 100, M = m / 100, Y = y / 100, K = k / 100;
  const r = 255 * (1 - Math.min(1, C * (1 - K) + K));
  const g = 255 * (1 - Math.min(1, M * (1 - K) + K));
  const b = 255 * (1 - Math.min(1, Y * (1 - K) + K));
  return { r: Math.round(r), g: Math.round(g), b: Math.round(b) };
}

Note: The above CMYK values are profile-agnostic. For print, convert using the intended ICC profile inside a color-managed app.

sRGB linearization (for colorimetric work like Lab/OKLab)

Use the sRGB transfer function to linearize (to RGB_linear) and re-encode.

function srgbToLinear(u) { // u in [0,1]
  return u <= 0.04045 ? u / 12.92 : Math.pow((u + 0.055) / 1.055, 2.4);
}

function linearToSrgb(u) { // u in [0,1]
  return u <= 0.0031308 ? 12.92 * u : 1.055 * Math.pow(u, 1/2.4) - 0.055;
}

This is foundational if you build advanced conversions (e.g., sRGB → XYZ → Lab/OKLab) or perceptual scales.

---

How to use the Zenixtools Color Converter

1. Paste or type any valid color: #RRGGBB, rgb(), hsl(), or cmyk().
2. Instantly see equivalent formats: HEX, RGB, HSL, and profile-agnostic CMYK.
3. Review the 9-step palette: tints and shades automatically derived from your base color.
4. Copy tokens: one-click CSS custom properties and Tailwind-ready scales.
5. Validate accessibility: built-in WCAG contrast checker against light/dark backgrounds.
6. Export: JSON design tokens or a palette image swatch for docs.

Pro tips

• Lock Hue: Keep H constant in HSL/OKLCH while adjusting Lightness and Chroma for consistent palettes.
• Toggle gamut: Compare sRGB vs Display P3 preview to spot out-of-gamut risks.
• Rounding mode: Choose code-friendly rounding (0–255 ints) or design-friendly decimals.

---

Turn a single brand color into a Tailwind scale

Zenixtools generates a 9-step set of tints/shades centered around your brand’s “500.” These steps map cleanly to Tailwind (50–900) or 100–900. Below is an example using #3b82f6 as base.

Strategy (repeatable and documented)

• Use HSL or OKLCH to drive systematic changes:
  • Keep H constant near the base hue.
  • Decrease L stepwise for darker shades; increase L for tints.
  • Optionally reduce S for higher contrast at the extremes to avoid color burn or chalkiness.
• Check contrast against both white (#fff) and near-black (#0b0b0b or #111827) for UI text and surfaces.

Example: CSS variables output

:root {
  /* Base */
  --brand-50:  #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;
  --brand-400: #60a5fa;
  --brand-500: #3b82f6; /* base */
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-800: #1e40af;
  --brand-900: #1e3a8a;
}

These values mirror a familiar blue scale for demonstration. In Zenixtools, the generator builds a bespoke scale from your base color using your chosen model and step rules.

Example: Tailwind config snippet

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a'
        }
      }
    }
  }
};

JSON design tokens (for pipelines)

{
  "color": {
    "brand": {
      "50":  { "value": "#eff6ff" },
      "100": { "value": "#dbeafe" },
      "200": { "value": "#bfdbfe" },
      "300": { "value": "#93c5fd" },
      "400": { "value": "#60a5fa" },
      "500": { "value": "#3b82f6" },
      "600": { "value": "#2563eb" },
      "700": { "value": "#1d4ed8" },
      "800": { "value": "#1e40af" },
      "900": { "value": "#1e3a8a" }
    }
  }
}

Note: In Zenixtools you can export these directly and lock the rules (e.g., H constant, L steps, S taper) so future colors share the same logic.

---

Accessibility essentials: contrast and legibility

Prioritize contrast early. Brand colors often need subtle adjustments at UI extremes.

• WCAG 2.2 contrast ratio
  • Minimum: 4.5:1 for body text < 18 pt (or < 14 pt bold)
  • Large text: 3:1 is acceptable for ≥ 18 pt regular or ≥ 14 pt bold
  • UI components and graphical objects: 3:1 for boundaries
• APCA (Advanced Perceptual Contrast Algorithm)
  • Increasingly used as a perceptual model. If available, compare with WCAG ratios and document choices.

Relative luminance and contrast ratio (WCAG)

Relative luminance (Y) is computed from sRGB values converted to linear light. For a color with sRGB channels R8, G8, B8 in [0,255]:

1. Normalize: R=R8/255, G=G8/255, B=B8/255
2. Linearize using sRGB EOTF (see srgbToLinear above) to get R_lin, G_lin, B_lin
3. Y = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin
4. Contrast ratio between colors with Y1 (lighter) and Y2 (darker) is (Y1 + 0.05) / (Y2 + 0.05)

function relativeLuminance({ r, g, b }) {
  const toLin = u => u <= 0.04045 ? u / 12.92 : Math.pow((u + 0.055) / 1.055, 2.4);
  const R = toLin(r / 255), G = toLin(g / 255), B = toLin(b / 255);
  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
}

function contrastRatio(fg, bg) {
  const Y1 = relativeLuminance(fg);
  const Y2 = relativeLuminance(bg);
  const L1 = Math.max(Y1, Y2), L2 = Math.min(Y1, Y2);
  return (L1 + 0.05) / (L2 + 0.05);
}

Tip: When a brand hue fails on white or dark surfaces, tweak L first, then S—preserving perception while hitting targets.

---

Print production tips for consistent results

CMYK is not one color space—it’s many, each defined by an ICC profile. To get consistent print results:

• Ask for the destination profile and conditions

  • Common: U.S. Web Coated SWOP v2, FOGRA39 (ISO 12647-2:2004), newer FOGRA51 (PSO Coated v3) / FOGRA52 (PSO Uncoated v3).
  • The same RGB color can map to different CMYK values in each profile.

• Use color-managed conversions

  • Convert final assets in Photoshop/Illustrator/InDesign or a CMS that supports ICC transforms.
  • Soft proof with the printer’s profile; check rendering intent (Relative Colorimetric with Black Point Compensation is a safe default for brand colors).

• Control ink limits and blacks

  • Total Area Coverage (TAC/TIL): Respect the profile’s maximum ink (e.g., 300%).
  • Rich black for large fills (e.g., C60 M40 Y40 K100) vs 100K text for crisp type. Never use registration black for body text.

• Consider spot colors

  • For critical brand hues that are hard to hit in process CMYK, specify Pantone or another spot library and provide bridge values for digital.

• Paper and finishing matter

  • Coated vs uncoated stocks shift appearance significantly; profile accordingly.
  • Lamination and varnishes alter perceived contrast and saturation.

---

Common pitfalls and how to avoid them

• Assuming CMYK is absolute: Without a profile, CMYK is an estimate. Always request the printer’s ICC.
• Mixing encodings during math: Don’t do colorimetric math on gamma-encoded sRGB; linearize first.
• Over-reliance on HEX: It’s fine for storage, but use RGB/HSL/OKLCH for calculations and systematic palette building.
• Ignoring gamut: Bright, saturated P3 colors might clip to dull sRGB on older displays. Provide fallbacks or clamp.
• Rounding too early: Keep float precision through intermediate steps; round only at output.
• Forgetting alpha: Converting colors without their alpha channel can break overlays. Store and convert opacity alongside color.
• Skipping accessibility checks: A beautiful color that fails contrast is a support burden. Bake checks into your workflow.
• Neglecting dark mode: Contrast relationships invert; test both themes.

---

FAQ

Q: Are HEX and RGB the same color?

• A: HEX encodes the same sRGB triplet in base-16. #3b82f6 equals rgb(59, 130, 246).

Q: Why do HSL values differ across tools?

• A: Differences often come from rounding, whether inputs were linearized, or slight implementation details. For UI-focused HSL, using gamma-encoded sRGB is standard; expect tiny variations.

Q: Is there a single correct CMYK value for my brand blue?

• A: No. CMYK depends on printer, paper, and ICC profile. Your printer’s profile will give you the “correct” numbers for that press.

Q: Should I design in RGB or CMYK?

• A: Design for digital in sRGB (or P3 if your pipeline supports it), then convert to CMYK at handoff using the target ICC profile. For print-first brands, design in a wide-gamut RGB and proof to CMYK.

Q: What about OKLCH and LCH—should I switch?

• A: For scalable, perceptually uniform palettes, OKLCH is excellent. It makes lightness and chroma steps feel more consistent across hues. Include fallbacks to sRGB HEX/RGB for older environments.

Q: Can I convert Pantone to RGB/HEX?

• A: You can approximate using vendor libraries or lookups, but licensing and gamut differences apply. Treat Pantone→RGB as a best-effort on-screen preview, not a guarantee.

Q: My color looks different on two monitors—why?

• A: Display calibration, profiles, ambient light, and panel gamut differ. Use color-managed software and calibrated displays for critical work.

Q: What’s the fastest way to build a dark theme from one brand color?

• A: Start with OKLCH/ HSL, lock hue, lower lightness to 35–45 for interactive elements, and validate contrast against a deep neutral background. Generate a scale then test key UI states.

Q: Do I need Display P3?

• A: It’s optional but increasingly useful. Provide P3 where supported for richer color, with sRGB fallbacks to maintain consistency elsewhere.

---

References and further reading

• W3C: CSS Color Module Level 4 and 5 (color(), lab(), lch(), oklab/oklch, color-mix)
  • https://www.w3.org/TR/css-color-4/
  • https://www.w3.org/TR/css-color-5/
• sRGB transfer function and colorimetry background
  • IEC 61966-2-1 (sRGB) summary: https://www.color.org/srgb.pdf
  • Web-friendlier refs: https://bottosson.github.io/posts/colorwrong/ (context on color spaces)
• OKLab/OKLCH
  • Björn Ottosson’s OKLab: https://bottosson.github.io/posts/oklab/
• ICC profiles and print
  • International Color Consortium: https://www.color.org
  • FOGRA resources: https://www.fogra.org
• WCAG and APCA
  • WCAG 2.2: https://www.w3.org/TR/WCAG22/
  • APCA: https://www.myndex.com/APCA/

---

Author and review notes

• Primary author: Senior Color Science, Accessibility, and Front-End Systems Specialist with 12+ years building design systems and color pipelines for web and print.
• Technical review: Prepress/CMYK specialist (ISO 12647 workflows) and UI accessibility engineer (WCAG/APCA).
• Disclosure: CMYK conversions in this article are profile-agnostic approximations. Always request and apply the target ICC profile for production print.
• Last reviewed: 2026-06

---

Bonus: Structured data (optional)

{
  "@context": "https://schema.org",
  "@type": "TechArticle",
  "headline": "Color Converter: Translate HEX, RGB, HSL, and CMYK Instantly",
  "about": ["HEX", "RGB", "HSL", "CMYK", "OKLCH", "Display P3", "ICC Profiles", "WCAG"],
  "articleSection": [
    "Color formats",
    "Conversion formulas",
    "Accessibility",
    "Print production",
    "Tailwind tokens"
  ],
  "author": {
    "@type": "Person",
    "name": "Zenixtools Editorial Team"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Zenixtools"
  },
  "dateModified": "2026-06-01"
}

---

Summary (for AI Overviews)

• A color converter maps HEX, RGB, HSL, and CMYK without changing on-screen appearance; CMYK is profile-dependent.
• Use sRGB for web compatibility; optionally layer P3 with fallbacks.
• Build palettes in HSL or OKLCH for predictable tints/shades; verify WCAG/APCA contrast.
• For print, always apply the destination ICC profile, soft proof, and respect ink limits.
• Zenixtools exports copy-ready CSS, Tailwind colors, and JSON tokens, plus a 9-step palette for consistent theming.