Color Converter

A color converter takes one colour written in one notation and gives you the same colour written in all the others — it starts from a value you already have, where the colour picker is for choosing one in the first place. Paste #4F46E5 and get back rgb(79, 70, 229), hsl(243, 75%, 59%), hsv(243, 69%, 90%) and cmyk(66%, 69%, 0%, 10%) — five ways of describing one indigo.

The reason a tool is needed at all is that the software involved in making anything disagrees about how to write colours down. A design file speaks HSB, a browser speaks hex and HSL, a print shop wants CMYK, an Android resource file wants eight hex digits with the alpha first, and a Tailwind project wants the name of a shade. None of these is wrong. They are all the same colour.

This one runs entirely in your browser. Conversion is arithmetic — a few dozen floating-point operations — so there is no server to send anything to and no API behind it. Load the page, disconnect from the network, and it keeps working.

Every format here describes the same thing: how much red, green and blue light a pixel emits. The formats differ in how they address that point, not in what they can reach. So conversion is a change of coordinates, and it happens in three steps.

1. 1. Parse into sRGB. Whatever you typed is read into three numbers between 0 and 255, plus an alpha. Hex is a base-16 spelling of those numbers; HSL and HSV are trigonometry around them; CMYK is subtraction from them.
2. 2. Hold the colour in one place. There is exactly one authoritative value, and every row on screen is derived from it. That is what keeps eight fields consistent — nothing is converted twice, so nothing can disagree.
3. 3. Format on the way out. Each row rounds and writes the canonical value in its own notation, at the moment it is displayed.

Two consequences follow, and both are worth knowing. First, converting is lossless between the RGB-based formats: hex, RGB, HSL and HSV all describe the same 8-bit-per-channel colour, so a round trip returns exactly what you started with. Second, the notations that carry no alpha channel — hex, RGB and HSL — lose the opacity, which is why the tool marks those rows rather than letting you discover it later.

CMYK is the exception in the other direction. It is not another way of writing an sRGB colour; it is a different model entirely, describing ink on paper rather than light from a screen. The conversion is a useful approximation and is described honestly as one below.

Eight formats in, eight formats out, plus oklch() and the CSS colour keywords as input.

HEX

Six hexadecimal digits behind a hash, two per channel. #4F46E5 is red 4F, green 46, blue E5 — which are 79, 70 and 229 in decimal. Base 16 is used because two digits cover exactly one byte, so each channel gets a fixed-width field. The three-digit shorthand #4AE expands by doubling each digit, so it can only express 4,096 of the 16.7 million colours.

HEXA

Hex with a fourth pair for alpha, from 00 (invisible) to FF (opaque). #4F46E5CC is that indigo at 80%, because CC is 204 and 204/255 is 0.8. Every current browser supports it. Watch for the ordering trap: Android writes #AARRGGBB, with alpha first, and CSS writes #RRGGBBAA, with alpha last.

RGB

The three channels as decimal numbers from 0 to 255. Identical in meaning to hex and easier to do arithmetic on, which is why it is what most code manipulates internally. Modern CSS also accepts a space-separated form — rgb(79 70 229) — and percentages instead of numbers.

RGBA

RGB with an alpha channel from 0 to 1. Note what alpha is not: it is not a lightening of the colour, it is a blend instruction. The same rgba(79, 70, 229, 0.5) renders as a pale lilac on white and a deep navy on black — which is exactly why the preview here shows the colour on light, checkerboard and dark backgrounds at the same time.

HSL

Hue as an angle on the colour wheel, then saturation and lightness as percentages. Its advantage is that it is editable by hand: a hover state is the same hue at ten percent less lightness, which is a one-character change in HSL and a guess in hex. 0% lightness is always black and 100% is always white, whatever the hue.

HSLA

HSL with an alpha channel, following the same rules as RGBA.

HSV

Also called HSB, and it is what the picker in Photoshop, Figma and Sketch shows you. Hue is the same angle as in HSL; the other two differ. Value is simply how bright the brightest channel is, so 100% value is the pure hue rather than white. This is why a colour copied out of a design tool as “69% saturation, 90% brightness” does not match the “75%, 59%” a browser reports for the same pixel — they are two different measurements, not a mistake.

CMYK

Cyan, magenta, yellow and key — black — as ink percentages. Subtractive rather than additive: ink removes light where a screen adds it, which is why 0% of everything is white paper and 100% of everything is a soggy black. Treat the numbers here as a first approximation; see the section below for why an exact conversion is not possible without a profile.

The most-searched colour conversion there is, and the simplest: hex and RGB are the same three numbers written in different bases. Splitting the six digits into three pairs and reading each pair as base 16 is the whole algorithm.

1#4F46E52 │ │ └── E5 → (14 × 16) + 5  = 229   blue3 │ └──── 46 → ( 4 × 16) + 6  =  70   green4 └────── 4F → ( 4 × 16) + 15 =  79   red

Nothing is approximated and nothing is lost — both formats describe 8 bits per channel, so the conversion is exact in both directions. The one thing to watch is the shorthand: #4AE means #44AAEE, not #04A0E0. Each digit is doubled rather than padded, which keeps #FFF pure white.

To do it here: paste the hex value into the input box and read the RGB row. The input accepts it with or without the hash, in either case, and in the three-, four-, six- or eight-digit form.

The same operation run backwards: each channel is written as two hexadecimal digits and the three are concatenated behind a hash. The only detail that matters is padding — 10 is 0A, not A — because a five-digit hex value is not a colour and browsers will ignore the whole declaration.

179  ÷ 16 = 4 remainder 15  →  4F270  ÷ 16 = 4 remainder  6  →  463229 ÷ 16 = 14 remainder 5  →  E54 5#4F46E5

Type rgb(79, 70, 229) into the input box — or just 79, 70, 229 into the RGB row, since each output row parses in its own space — and copy the HEX row. Percentages work too: rgb(31%, 27%, 90%) resolves to the same colour, rounded to the nearest byte.

This one is a genuine change of shape rather than a change of base. RGB is a cube; HSL is a cylinder around it. The conversion finds the brightest and dimmest of the three channels and derives all three HSL components from them.

• Lightness is the midpoint of the brightest and dimmest channels. For our indigo that is (229 + 70) / 2 / 255, which is 59%.
• Saturation is how far apart those two channels are, scaled by how close the lightness is to the middle. A colour with all three channels equal has zero saturation and is a grey.
• Hue is an angle, decided by which channel is the brightest — red anchors 0°, green 120°, blue 240° — and how far the other two are from it. Blue is brightest here, giving 243°.

1max = 229/255 = 0.898   min = 70/255 = 0.2752 3L = (max + min) / 2            = 0.586  →  59%4S = (max − min) / (2 − max − min) = 0.754  →  75%5H = 240° + 60° × (r − g) / (max − min) = 243°

Hue is where the two round trips can differ by a degree, and harmlessly. Many HSL triples map to the same 8-bit pixel: hsl(243, 75%, 59%) and hsl(244, 76%, 59%) are both #4F46E5. The tool keeps the colour and shows the canonical spelling of it.

Screens add light; ink removes it. That difference is the whole of the conversion, and also the reason it can only ever be approximate without a colour profile.

1r = 79/255 = 0.310   g = 70/255 = 0.275   b = 229/255 = 0.8982 3K = 1 − max(r, g, b)      = 0.102  →  10%4C = (1 − r − K) / (1 − K) = 0.655  →  66%5M = (1 − g − K) / (1 − K) = 0.694  →  69%6Y = (1 − b − K) / (1 − K) = 0.000  →   0%

The K channel is the interesting part. Cyan, magenta and yellow together should make black, and in practice they make a muddy brown that uses three times the ink and takes three times as long to dry. Pulling the common darkness out into a dedicated black plate — called grey component replacement — is why CMYK has four inks rather than three.

Do not send these numbers to a printer.Real CMYK depends on the ink set, the paper, the press and a total ink limit that this conversion knows nothing about, and the same values look visibly different on newsprint and on coated stock. There are also colours a screen can show that no ink can — bright cyans and vivid greens especially — so some conversions are approximations of something unreachable. Use these figures to reason about a colour, and get the real separation from your printer’s profile in a colour-managed application.

If the colour is headed for a background rather than a press, the CSS gradient generator blends two or more of these values into a gradient and writes the rule for it.

CSS accepts more colour notations than any other language, and the modern syntax is quietly different from the one most examples still use.

Hex, and hex with alpha

1.button {2  color: #4F46E5;          /* six digits            */3  border-color: #4AE;      /* shorthand → #44AAEE   */4  background: #4F46E5CC;   /* eight digits, 80% alpha */5}

rgb() and hsl(), old and new

The comma-separated form with a separate rgba() function is CSS Color 3. In CSS Color 4 the separators became spaces, alpha moved behind a slash, and the a variants became aliases — rgb() now takes alpha directly. Both work everywhere; the newer form is what modern tooling emits.

1/* CSS Color 3 */2color: rgb(79, 70, 229);3color: rgba(79, 70, 229, 0.8);4color: hsl(243, 75%, 59%);5 6/* CSS Color 4 */7color: rgb(79 70 229);8color: rgb(79 70 229 / 80%);9color: hsl(243 75% 59% / 0.8);

Custom properties

The only form that can be changed at runtime, which is what makes theming possible. Storing the channels rather than the whole colour lets one variable serve both the solid and the translucent case. A stylesheet full of them is worth running through the CSS formatter so the declarations line up consistently.

1:root {2  --primary: #4F46E5;3  --primary-rgb: 79 70 229;4}5 6.button {7  background: var(--primary);8  box-shadow: 0 4px 12px rgb(var(--primary-rgb) / 0.35);9}10 11[data-theme="dark"] {12  --primary: #818CF8;13}

OKLCH

Perceptually uniform, which HSL is not: in HSL, hsl(60, 100%, 50%) yellow and hsl(240, 100%, 50%) blue claim the same lightness and look nothing alike. OKLCH fixes that, so equal numeric steps produce equal visual steps — which is why Tailwind v4 defines its entire palette in it. This tool accepts oklch() as input and converts it to everything else.

1/* the same indigo, and a ramp that steps evenly */2color: oklch(51.1% 0.262 276.97);3 4--step-1: oklch(70% 0.18 277);5--step-2: oklch(60% 0.22 277);6--step-3: oklch(50% 0.26 277);