Color Converter

The five colour formats

HEX

Hexadecimal — #RRGGBB, two hex digits each for red, green, blue. The web default.

RGB

Red, green, blue on 0–255. How screens actually mix light (additive).

HSL

Hue (0–360°), Saturation, Lightness — intuitive for picking and tweaking colours.

HSV / HSB

Hue, Saturation, Value (Brightness) — the model most colour pickers use.

CMYK

Cyan, magenta, yellow, key/black (0–100%) — the subtractive model for print.

How the conversions work

Everything is derived from the same red/green/blue triple. HEX ↔ RGB is just base-16 ↔ base-10 on each channel. RGB ↔ HSL/HSV finds the maximum and minimum channel to get hue and saturation, then lightness (the mid-point of max and min) or value (the max). RGB → CMYK uses K = 1 − max(R, G, B), then C = (1 − R − K) / (1 − K) and the same for M and Y. All of it is exact arithmetic done locally — no rounding tricks, no server.

Worked example — #1E90FF (DodgerBlue)

• RGB: 1E→30, 90→144, FF→255 ⇒ rgb(30, 144, 255)
• HSL: hsl(210, 100%, 56%) — a fully saturated blue, slightly lighter than mid
• HSV: hsv(210, 88%, 100%) — same hue, full brightness
• CMYK: cmyk(88%, 44%, 0%, 0%)

Popular named colours

Contrast & accessibility

The converter shows the WCAG contrast ratio of your colour against black and against white, so you can tell at a glance which makes readable text. For body text aim for at least 4.5:1 (WCAG AA), or 7:1 for AAA; large text (≥24px, or ≥19px bold) needs 3:1. For checking two specific foreground/background colours, a dedicated contrast checker is the better fit.

Additive vs subtractive: RGB and CMYK

The deepest divide between the five formats is not their notation but their physics. RGB is additive: a screen starts black and adds red, green and blue light. Pile all three on at full strength and the beams overlap into white; switch them all off and the pixel emits nothing, so you see black. That is why rgb(255, 255, 255) is white and rgb(0, 0, 0) is black on every monitor, phone and TV — each is just a controlled mixture of three coloured lights.

CMYK is subtractive: paper starts white (it reflects every wavelength) and each ink subtracts part of the spectrum. Cyan absorbs red, magenta absorbs green and yellow absorbs blue, so more ink reflects less light and the result trends toward black. The two models are mirror images — RGB builds colour up from darkness with light, CMYK carves it out of white with pigment. It also explains why the primaries swap roles: cyan, magenta and yellow are the secondary colours of light (each is what remains when you remove one RGB primary), while red, green and blue are the secondaries of ink.

How HEX encodes a colour

A hex colour is simply an RGB triple written in base 16. The six digits of #RRGGBB are three pairs — red, green, blue — and each pair is a two-digit hexadecimal number from 00 to FF, i.e. 0 to 255 in everyday decimal. Hexadecimal counts 0–9 then A–F for ten through fifteen, so a single hex digit covers sixteen values and a pair covers 16 × 16 = 256 — exactly the range of one 8-bit channel. Reading FF is just 15 × 16 + 15 = 255, the maximum; 80 is 8 × 16 = 128, roughly half; 00 is none of that channel.

The notation dates back to early HTML and stuck because one compact token carries a whole colour. Two shortcuts are worth knowing. The three-digit shorthand #RGB doubles each digit, so #09C expands to #0099CC — convenient, but able to express only 4,096 colours. The eight-digit form #RRGGBBAA appends an alpha (opacity) byte, where FF is fully opaque and 80 is about 50% transparent. CSS treats these interchangeably with the rgb() and rgba() functions, and with 8 bits per channel the full #RRGGBB space holds 256³ ≈ 16.7 million distinct colours — the "true colour" or 24-bit range.

HSL and HSV: colour the way humans think

Nobody intuitively knows that "a slightly darker, less vivid orange" is rgb(204, 119, 51). RGB and hex describe colour the way hardware mixes it, not the way people imagine it. HSL and HSV are cylindrical re-mappings of the same RGB cube built to match human reasoning: both place hue on a 0–360° wheel (0° red, 120° green, 240° blue), then add a saturation axis for how pure versus grey the colour is and a third axis for brightness. They introduce no new colours — every HSL or HSV value still resolves to one RGB triple — they just give you controls that move the way your eye expects.

Both were formalised in the same landmark issue of Computer Graphics in August 1978: Alvy Ray Smith described HSV (also written HSB, for Hue-Saturation-Brightness) and, in the same issue, Joblove and Greenberg described HSL. The two differ only in that third channel, and the difference trips up many people. In HSL, Lightness runs black → pure colour → white, so 50% is the most colourful point and 100% is always white whatever the hue. In HSV, Value runs black → most vivid colour, and 100% is the brightest, most saturated version of that hue — never white on its own. Push a "value" slider to the top and you get vivid red; push an HSL "lightness" slider to the top and you get white. Most on-screen colour pickers expose HSV/HSB, while CSS authors more often type HSL — one reason this converter shows both.

Why CMYK from a screen is only a preview

The CMYK numbers above come from the standard K = 1 − max(R, G, B) conversion, and they are arithmetically correct — but they are not a print-accurate proof, and no simple converter's can be. The reason is gamut: the set of colours a glowing screen can emit and the set a particular ink-and-paper combination can reflect are different shapes, and many bright, saturated screen colours (electric blues, neon greens, pure cyans) fall outside what ink can reproduce at all. A formula has no knowledge of your press, paper or ink, so it cannot tell you what an out-of-gamut colour will actually become on the page.

Real print workflows close that gap with an ICC colour profile — a measured description of a specific device that maps colours into its reproducible range while accounting for ink behaviour, dot gain and paper stock. Two presses fed the same CMYK percentages can print visibly different colours, which is exactly why RGB and CMYK are device-dependent and no universal formula converts between them. Treat the CMYK here as a sensible starting estimate for choosing ink mixes or sanity-checking a design, then proof against your printer's profile before committing to a run.

Colour spaces, sRGB and gamut

A hex code or RGB triple is, on its own, ambiguous: #FF0000 only names a specific red once you agree on a colour space that fixes what "full red" looks like. On the web that agreement is sRGB, a standard space created by Hewlett-Packard and Microsoft in 1996 and published as IEC 61966-2-1. Browsers, CSS and untagged images all assume sRGB, which is why the numbers in this converter behave consistently from one machine to the next — everyone reads them against the same reference.

sRGB is deliberately modest in range so it would display correctly on 1990s CRT monitors, and wider spaces now exist. Adobe RGB (1998) stretches the gamut, especially through the greens and cyans, and is favoured in photography and print preparation. Display P3, used by most recent Apple and other wide-gamut screens, covers roughly 25% more area than sRGB and can show more saturated reds and greens. The practical lesson: identical numbers can look different across spaces, so when authoring for the web stay in sRGB unless you have deliberately opted into a wider space with CSS Color 4 syntax such as color(display-p3 …).

A brief history of web colour

Web colour still carries fossils from the era of limited displays. In the late 1990s many machines could show only 256 colours at once, so designers leaned on the 216 "web-safe" colours — a 6 × 6 × 6 cube built only from the hex values 00, 33, 66, 99, CC and FF (0%, 20%, 40%, 60%, 80%, 100%). Those rendered identically, without dithering, across browsers and systems. With true-colour displays now universal the web-safe palette is obsolete, but you still meet those round values in old style sheets.

The named colours have a similar lineage. HTML originally defined just 16 basic keywords (black, white, red, lime, aqua and so on). CSS later folded in the X11 colour names — the set shipped with the Unix X Window System, full of dodgerblue, papayawhip and rebeccapurple — bringing the total to roughly 140 keywords recognised by modern browsers. This tool's "nearest named colour" finder searches that full list to label whatever colour you land on.

Equal steps, unequal eyes

One subtlety sits beneath all of this: colour numbers are not perceptually uniform. Because sRGB stores values through a non-linear gamma curve (roughly 2.2), the jump from rgb(10, 10, 10) to rgb(20, 20, 20) looks far larger to your eye than the jump from rgb(200, 200, 200) to rgb(210, 210, 210), even though both add ten. Equal numeric steps are not equal visual steps. The same non-uniformity is why human vision weights the channels unevenly — green dominates perceived brightness — which is baked into the WCAG relative-luminance formula 0.2126·R + 0.7152·G + 0.0722·B this page uses for contrast. That designers reason in HSL but ship in hex is the everyday symptom: pick a colour in the space that matches your intent, then convert to the format the platform expects.

Common colour-conversion mistakes

• Trusting CMYK as print-accurate. A formula-based CMYK value is a preview, not a proof. For anything going to press, convert through your printer's ICC profile and check a physical proof.
• Assuming hex is device-independent. #3366CC only pins down a colour relative to a colour space; on a wide-gamut screen without colour management it can shift. The web's saving grace is that everyone assumes sRGB.
• Confusing HSB/HSV with HSL. They share hue and saturation, but their third channel differs — 100% Value gives a vivid colour, 100% Lightness gives white. Copying an "HSB" number straight into an hsl() function will not reproduce the colour you saw in the picker.
• Expecting RGB↔CMYK round-trips to match. Because the gamuts differ, going RGB → CMYK → RGB can land on a slightly different colour; the conversion is approximate by nature, not a bug.
• Reading saturation as identical in HSL and HSV. The two saturation scales are computed differently, so the same colour usually carries two different saturation percentages depending on which model you read.

Frequently asked questions

How do I convert HEX to RGB?

Split the six-digit hex into three pairs and read each pair as a base-16 number from 0 to 255. For example #1E90FF is R=0x1E=30, G=0x90=144, B=0xFF=255, i.e. rgb(30, 144, 255). This tool does it instantly and also gives you HSL, HSV and CMYK at the same time.

What is the difference between HSL and HSV (HSB)?

Both start with the same Hue (0–360°) and Saturation, but the third channel differs. HSL’s Lightness runs from black (0%) through the pure colour (50%) to white (100%). HSV’s Value runs from black (0%) to the brightest version of the colour (100%) and never reaches white on its own. HSV is what most on-screen colour pickers use; HSL is common in CSS.

Why does CMYK look different from RGB?

RGB is additive (mixing light on a screen) and CMYK is subtractive (mixing inks on paper), so the two cannot represent exactly the same range of colours. The CMYK values here are a standard mathematical conversion — useful as a starting point, but for accurate print work always proof against your printer’s actual ICC colour profile.

What is the alpha / 8-digit hex?

Alpha is opacity, from 0 (fully transparent) to 1 (fully opaque). In CSS you can write it as rgba()/hsla() or as an 8-digit hex (#RRGGBBAA) where the last pair is the alpha as a hex byte — for example 80 is 50% opacity. Move the transparency slider to generate all three forms.

How is the contrast ratio calculated?

It uses the WCAG 2.1 formula: each channel is linearised, the relative luminance L is 0.2126·R + 0.7152·G + 0.0722·B, and the ratio is (Llighter + 0.05) / (Ldarker + 0.05). It ranges from 1:1 (no contrast) to 21:1 (black on white). WCAG AA needs at least 4.5:1 for normal text (3:1 for large text); AAA needs 7:1.

Is my colour data sent anywhere?

No. Every conversion runs locally in your browser with JavaScript — nothing is uploaded, and the tool works offline once the page has loaded.

Related tools

• WCAG Contrast Checker
• SHA Hash Generator
• JSON Formatter & Validator
• Hex to Decimal

See all browser tools →