Color Converter

Color conversion is the process of translating a single color from one representation system to another — for example, from a hexadecimal code used in CSS to the RGB triplet used in image editors, or the HSL model used for intuitive design work, or the CMYK percentages used in professional printing.

Every digital color ultimately describes the same human-visible hue, but different tools, workflows, and industries rely on different color models. A front-end developer writing Tailwind CSS needs HEX values like #3B82F6. A designer adjusting brightness in Figma reaches for HSL. A print production team at a magazine works in CMYK. Converting accurately between these formats is essential for maintaining color consistency across screens, print, and code.

This color converter accepts input in HEX, RGB, or HSL format and simultaneously outputs all six common representations: HEX, RGB, RGBA, HSL, HSLA, and CMYK. The conversion chain is: whichever format you enter is first normalized to an RGB triplet (three integers 0–255), and then all other formats are derived from that shared RGB basis using the standard mathematical formulas described below.

Understanding the underlying math helps you predict conversion results and debug unexpected color shifts. All conversions in this tool pass through RGB as the common intermediate representation.

HEX ↔ RGB

A HEX color like #RRGGBB stores each channel as a two-digit base-16 number. Converting to RGB simply parses each pair: R = parseInt(RR, 16), and the same for G and B. The reverse uses value.toString(16).padStart(2, '0').toUpperCase() for each channel, clipped to [0, 255].

RGB → HSL

Normalize each channel to [0, 1] by dividing by 255. Let max = maximum of r, g, b and min = minimum. Lightness L = (max + min) / 2. If max equals min the color is achromatic (H = S = 0). Otherwise the chroma d = max − min, and:

• S = d / (2 − max − min) when L > 0.5, else d / (max + min)
• H is computed from which channel is maximum: if R is max, H = ((G − B) / d + (G < B ? 6 : 0)) / 6; if G is max, H = ((B − R) / d + 2) / 6; if B is max, H = ((R − G) / d + 4) / 6

Multiply H by 360, S and L by 100, then round.

HSL → RGB

Normalize H to [0,1], S and L to [0,1]. If S = 0, R = G = B = L (grey). Otherwise compute helper values q = L < 0.5 ? L × (1 + S) : L + S − L × S and p = 2L − q. Then use the hue2rgb(p, q, t) piecewise function (returning p + (q−p)×6×t for t < 1/6; q for t < 1/2; p + (q−p)×(2/3−t)×6 for t < 2/3; else p) applied at H+1/3 (red), H (green), H−1/3 (blue). Multiply results by 255 and round.

RGB → CMYK

Normalize to [0,1]: rr = R/255, gg = G/255, bb = B/255. Black key K = 1 − max(rr, gg, bb). If K = 1 (pure black) return C = M = Y = 0, K = 100. Otherwise:

• C = (1 − rr − K) / (1 − K)
• M = (1 − gg − K) / (1 − K)
• Y = (1 − bb − K) / (1 − K)

Multiply each by 100 and round to get percentages.

Hexadecimal color codes are the standard notation for colors in HTML, CSS, and SVG. The format #RRGGBB uses base-16 digits (0–9, A–F) to encode each of the three RGB channels in two characters. Since each pair can represent 256 values (00–FF in hex = 0–255 in decimal), the full HEX space covers 256³ = 16,777,216 distinct colors.

A shorthand form #RGB is also valid CSS — the browser expands it by doubling each digit, so #3BF becomes #33BBFF. This converter works with the full six-character form.

HEX is preferred in web development because it is compact, human-readable once you learn common patterns, and natively supported in CSS without a function call. Color values like #FF0000 (pure red), #00FF00 (pure green), var(--foreground)0FF (pure blue), and var(--card-bg)FFF (white) are instantly recognizable to experienced developers.

One limitation of HEX is that it does not intuitively convey perceptual properties like brightness or vividness — adjusting the lightness of a HEX color requires mental conversion to HSL or direct manipulation in a design tool. That is why color pickers and design systems increasingly expose HSL controls alongside HEX outputs.

HSL (Hue, Saturation, Lightness) organizes colors in a way that matches human perception far better than RGB or HEX. Hue is an angle on the color wheel from 0° to 360° — 0° is red, 120° is green, 240° is blue. Saturation is a percentage from 0% (grey) to 100% (fully vivid). Lightness goes from 0% (black) to 100% (white), with 50% being the "pure" color.

The power of HSL for design work is that you can independently adjust individual perceptual properties. To create a lighter tint of a brand color, just increase L. To desaturate a color for a disabled button state, drop S. To shift a hue family (e.g., from blue to teal) without changing brightness, adjust H alone. None of these operations are straightforward when working in raw RGB or HEX.

Modern CSS supports HSL natively via hsl(217, 91%, 60%) and the alpha variant hsla(217, 91%, 60%, 0.5), making it a first-class option for design systems, theming, and CSS custom properties. Many CSS frameworks use HSL internally for generating color scales.

A caveat: HSL is not perceptually uniform — two colors with the same HSL lightness value can appear very different in perceived brightness to human eyes (yellow at L=50% looks much brighter than blue at L=50%). For perceptually uniform color work, professionals may prefer OKLCH or Lab color spaces, though HSL remains by far the most widely used in web development.

CMYK stands for Cyan, Magenta, Yellow, and Key (Black) — the four ink colors used in color printing. Unlike RGB which is an additive model (mixing light), CMYK is a subtractive model: inks absorb (subtract) portions of reflected white light. Mixing all three CMY inks in theory produces black, but in practice the result is a muddy dark brown, which is why a separate K (black) ink is used for crisp text and deep shadows.

Each CMYK component is expressed as a percentage (0–100%). A value of C=0, M=0, Y=0, K=0 represents pure white (no ink applied). C=0, M=0, Y=0, K=100 is pure black. A rich red might be C=0, M=100, Y=100, K=0.

The conversion from RGB to CMYK used in this tool is a mathematical approximation that works well for screen-to-print estimation. Professional print workflows often require device-specific ICC color profiles and specialized software (like Adobe InDesign or Photoshop) for production-accurate CMYK values, because the exact ink response varies between printing devices, paper stocks, and ink formulations. The formula here gives a solid starting point for estimating ink percentages from screen colors.

When preparing files for offset printing, brochures, business cards, or packaging, always confirm CMYK values with your print vendor and request a proof before the full print run. Colors can shift significantly between monitor and print, especially highly saturated or neon RGB colors that fall outside the CMYK gamut.

Choosing the right color format depends on your target medium, toolchain, and workflow. Here is a practical guide to when each format is most appropriate.

Use HEX when writing HTML, CSS, or Tailwind utility classes. It is compact, universal, and directly pasteable into any browser stylesheet. Design tokens in style guides and component libraries are almost always expressed in HEX for portability.

Use RGB or RGBA when you need to manipulate color programmatically in JavaScript (e.g., canvas APIs, WebGL shaders, image processing), or when you need alpha transparency with the four-value rgba(r, g, b, a) syntax. The RGBA variant is also useful in CSS when combining a color with opacity independently of the element's transparency.

Use HSL or HSLA when building design systems or themes where you need predictable color relationships. Generating a palette of tints and shades by varying L from 10% to 90% is trivial in HSL. Theming frameworks like Radix UI, shadcn/ui, and many others use HSL custom properties as their foundation precisely because HSL is so composable.

Use CMYK when handing off assets to a print vendor, preparing InDesign or Illustrator documents for offset printing, or specifying Pantone spot colors. Digital outputs (web, mobile, TV) never actually use CMYK — it is exclusively a print concept, so do not use CMYK values in CSS or digital graphics.