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
• Optimized explanations, formulas, and best practices for on-screen and print color

Quick answer: 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; calculations shown here are profile-agnostic approximations.

Table of contents

• What is a color converter?
• Color formats explained: HEX, RGB, HSL, CMYK
• 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 visual appearance on a given device or medium. For example, your brand blue might be defined in HEX for the web, HSL for design adjustments, RGB for UI code, and CMYK for print. A converter ensures each of those values is in sync.

• Typical inputs: HEX (#RRGGBB), RGB (0–255), HSL (0–360°, 0–100%, 0–100%), CMYK (0–100%).
• Typical outputs: All of the above, plus a palette of lighter and darker variants.
• Key benefit: One source of truth for color across design tools, code, and print vendors.

Color formats explained: HEX, RGB, HSL, CMYK

1. HEX (Hexadecimal)

• Format: #RRGGBB (e.g., #3b82f6) or shorthand #RGB.
• Where it shines: Web and UI code; compact, copy-paste friendly.
• Under the hood: Just RGB in base-16. Each pair (RR, GG, BB) represents 0–255.

2. RGB (Red, Green, Blue)

• Format: rgb(59, 130, 246) or rgba(59, 130, 246, 0.8).
• Where it shines: Screens and digital imaging (additive color). Most web browsers assume sRGB unless specified.
• Tip: Use RGBA for transparency in overlays and UI states.

3. HSL (Hue, Saturation, Lightness)

• Format: hsl(217, 91%, 60%).
• Where it shines: Human-friendly adjustments for tints/shades—tweak Lightness to darken/lighten, Saturation to mute/pop.
• Differences vs HSV/HSB: HSL balances lightness around midtones; HSV accentuates value/brightness. HSL is often more intuitive for palette building.

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 depend on the printer, ink set, paper stock, and ICC profile.

When to use each format (practical guide)

• Web/UI development: Define brand tokens in HEX or RGB; tweak in HSL for consistent tints/shades.
• Design systems: Author tokens in HEX/RGB, present variants in HSL for easy human edits.
• Theming at scale: Prefer HSL for predictable light/dark adjustments or dynamic theming.
• Accessibility workflows: Use HSL to adjust Lightness while verifying WCAG contrast ratios.
• Print deliverables: Convert to CMYK near handoff. Request the printer’s ICC profile (e.g., “U.S. Web Coated SWOP v2”, “FOGRA39”) for accurate numbers.

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

• sRGB as the default: Most browsers assume sRGB. If you define rgb(59, 130, 246), you’re typically in sRGB unless otherwise declared.
• Display P3 and Adobe RGB: Wider gamut spaces. Colors outside sRGB may clip on standard displays. When converting to HEX/RGB for the web, assume sRGB for the most consistent cross-device result.
• Gamma and linear vs non-linear math: RGB values in sRGB are gamma-encoded (roughly 2.2). Certain conversions (especially to/from HSL) are commonly performed on gamma-encoded values for UI workflows, but colorimetric conversions (e.g., to CIE Lab) require linearization first.
• CMYK requires context: There’s no single “correct” CMYK value for a given RGB color without a target profile. Use ICC-based conversions in pro design 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

Below are practical, developer-friendly recipes. 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)

JavaScript:

function hexToRgb(hex) {
  let s = hex.replace(/^#/, "");
  if (s.length === 3) s = s.split("").map(ch => ch + ch).join("");
  const n = parseInt(s, 16);
  return {
    r: (n >> 16) & 255,
    g: (n >> 8) & 255,
    b: n & 255
  };
}

function rgbToHex(r, g, b) {
  const toHex = v => 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) / Δ mod 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)

HSL to RGB involves helper function hue2rgb and reversing the above. Output RGB in [0, 255].

JavaScript:

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 / 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 (works for quick estimates; use ICC for press-ready):

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

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)
• Convert back to 0–255.

JavaScript:

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: c * 100, m: m * 100, y: y * 100, k: k * 100 };
}

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

Reminder: For production print, use ICC-based conversions in apps like Adobe Illustrator/InDesign/Photoshop, Affinity, or a color management tool. Set the correct output intent (profile) your printer provides.

How to use the Zenixtools Color Converter

Our Professional Color Converter streamlines color work in browsers.

1. Pick or paste a color

• Input HEX (e.g., #3b82f6), RGB, HSL, or CMYK. Paste any common format and the tool parses it.

2. View synchronized values

• Instantly see the equivalent HEX, RGB, HSL, and CMYK values side by side.

3. Generate a 9-step palette

• Get tints and shades of your base color for UI states, theming, and Tailwind scales.

4. Copy tokens

• One click to copy HEX/RGB/HSL values or the entire palette for CSS and Tailwind.

5. Apply and iterate

• Adjust quickly in HSL for design tweaks; convert to CMYK when preparing for print (use printer profiles in your DTP app for final numbers).

Privacy and speed

• Runs instantly in your browser for a snappy workflow.

Pro tip

• Need a Tailwind-friendly scale from a client’s brand color? Use our Color Converter to generate copy-paste color variables: /tools/color-converter

Turn a single brand color into a Tailwind scale

Tailwind often uses a 10-step color scale (50→900). Our generator outputs a clean 9-step set of tints/shades around your base. Use it directly, or map it into Tailwind’s naming.

Strategy options

• HSL-driven: Keep Hue and Saturation stable; step Lightness up/down consistently.
• Perceptual tweaks: Slightly reduce Saturation as you darken to avoid muddy tones; increase Saturation in lighter tints to avoid looking washed out.

Example: Tailwind config template

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  "<paste from converter>",
          100: "<paste>",
          200: "<paste>",
          300: "<paste>",
          400: "<paste>",
          500: "<base color>",
          600: "<paste>",
          700: "<paste>",
          800: "<paste>",
          900: "<paste>"
        }
      }
    }
  }
}

Copy-paste CSS variables

:root {
  --brand-50:  <paste>;
  --brand-100: <paste>;
  --brand-200: <paste>;
  --brand-300: <paste>;
  --brand-400: <paste>;
  --brand-500: <base>;
  --brand-600: <paste>;
  --brand-700: <paste>;
  --brand-800: <paste>;
  --brand-900: <paste>;
}

Tips for balanced palettes

• Respect contrast: Reserve 700–900 for text on light backgrounds; use 50–200 as backgrounds.
• Keep brand identity: If hue drift occurs at extremes, nudge H a few degrees to retain the brand feel.
• Test live: Check your scale in buttons, cards, alerts, and charts—not just in swatches.

Accessibility essentials: contrast and legibility

Follow WCAG 2.2 for contrast between text and background.

• Normal text: 4.5:1 minimum (AA)
• Large text (≥ 24px regular or ≥ 18.66px bold): 3:1 minimum (AA)
• UI components and graphical objects: 3:1 (AA)

Workflow

• Start with your base color.
• For text on light backgrounds: Test brand-700..900 against white.
• For text on dark backgrounds: Use near-white text (e.g., #fafafa) and test contrast.
• For outlines/controls: Ensure 3:1 minimum.

Practical moves

• Adjust Lightness first.
• If contrast is close but not sufficient, slightly tweak Saturation and Hue to preserve brand character while passing.

Note: There’s ongoing evolution toward perceptual contrast (APCA). Until it’s standardized, WCAG 2.x ratios remain the widely accepted baseline.

Print production tips for consistent results

• Ask for the printer’s ICC profile: Examples include FOGRA39, FOGRA51/52, or GRACoL. Use it for soft proofing and CMYK conversion.
• Set document profile in your DTP app: Convert your final artwork to the target CMYK before exporting.
• Mind total ink coverage (TAC): Many stocks cap at 300% or 320%. Exceeding TAC can cause drying issues and muddy blacks.
• Rich black vs text black:
  • Body text: 0/0/0/100 for crisp small text.
  • Rich black flood fills: e.g., 60/40/40/100 (ask printer for preferred build).
• Avoid registration black for design elements (it’s for printer marks only).
• Spot colors (Pantone): If exact brand fidelity is critical, use spot inks or Pantone bridges. Convert spots to CMYK only with approval and profile context.
• Proofing: Request hard proofs for mission-critical color.

Common pitfalls and how to avoid them

• Assuming CMYK is universal: It’s not. Always pick the correct ICC profile.
• Ignoring sRGB: If you design in a wide-gamut monitor space and export straight to HEX without converting to sRGB, colors may look off on typical displays.
• Over-saturating dark shades: Dark tints with high saturation can look dirty. Reduce saturation as you darken.
• Under-contrasted UI states: Neutral grays on off-white can fail contrast; measure rather than eyeballing.
• Shorthand HEX inaccuracies: #abc expands to #aabbcc—helpful shorthand but not numerically identical to rounded RGB.
• Forgetting alpha: When layering UI colors, use rgba() or hsla() to control opacity.

FAQ

What is the difference between HSL and HSV/HSB?

• HSL defines Lightness symmetrically around mid-gray; HSV defines Value as the brightest channel. HSL is often more intuitive for palette construction, while HSV is common in pickers and image tools.

Why don’t my prints match my screen?

• Screens emit light (RGB), paper reflects light (CMYK). Without ICC-managed conversion and soft proofing, colors shift. Calibrate your monitor, work in sRGB for web graphics, and use the printer’s CMYK profile for print.

How accurate is CMYK from RGB?

• Approximate formulas are fine for quick references. For production, use ICC profiles provided by your print vendor.

Is HEX different from RGB?

• HEX is just RGB written in hexadecimal. #FFFFFF equals rgb(255, 255, 255).

Should I define design tokens in HEX, RGB, or HSL?

• Use the format that fits your workflow: HEX for compactness, RGB for device alignment and alpha, HSL for controlled tint/shade adjustments. Many teams keep a canonical HEX and expose RGB/HSL as needed.

What about Display P3 on modern devices?

• P3 can show more saturated colors than sRGB. For web compatibility, supply sRGB-safe values. If you serve P3 colors (via CSS color(display-p3 ...)), provide fallbacks.

What is gamma and why does it matter?

• Gamma encoding matches human perception by allocating more code values to darker tones. Most UI conversions (HEX↔RGB↔HSL) work with gamma-encoded sRGB values. Colorimetric workflows (e.g., to Lab) require linearization first.

How do I handle transparency?

• Use rgba(r, g, b, a) or hsla(h, s, l, a). Keep in mind alpha blending occurs against the background color—test in-context for accessibility.

Do I need to worry about total ink coverage?

• Yes for print. TAC limits prevent over-inking. Ask your printer for limits and use their profile.

How do I pick text colors that pass contrast on brand backgrounds?

• Test candidate text shades (e.g., brand-800, brand-900) on your background color until you hit ≥ 4.5:1 for normal text. Adjust Lightness and, if necessary, Saturation.

What are good defaults for grays in a design system?

• Prefer neutral grays for UI chrome and warm/cool grays sparingly for tone. Keep at least one text gray that passes 4.5:1 on white and one on dark backgrounds.

References and further reading

• W3C WCAG 2.2 contrast guidelines: https://www.w3.org/TR/WCAG22/
• W3C CSS Color Module Level 4: https://www.w3.org/TR/css-color-4/
• sRGB color space (IEC 61966-2-1): https://www.color.org/chardata/rgb/srgb.xalter
• ICC color management: https://www.color.org/icc_specs2.xalter
• FOGRA (print standards): https://www.fogra.org/en/home
• GRACoL/IDEAlliance: https://www.idealliance.org/
• Tailwind CSS color docs: https://tailwindcss.com/docs/customizing-colors

Author and review notes

• Written by: Senior SEO Content Strategist & Technical Writer with hands-on experience building multi-brand design systems and shipping UI libraries at scale.
• Reviewed by: Front-end developer and prepress print specialist for accuracy across web and print workflows.
• Last updated: 2026-04-15

Summary

• Use our Color Converter to instantly translate between HEX, RGB, HSL, and CMYK, and to spin up a clean 9-step palette from any base color.
• For web and UI, assume sRGB and leverage HSL for predictable tints/shades.
• For print, always convert with the correct ICC profile and respect TAC.
• Validate accessibility early: target at least 4.5:1 for body text.

Pro tip: Translate a client’s brand color into a Tailwind-friendly scale in seconds—visit /tools/color-converter and paste the outputs directly into your config.