Color Converter
Pick a colour or type any value — HEX, RGB, HSL, HSV and CMYK update together, live, in your browser. Copy the CSS, see tints & shades, the nearest named colour and the WCAG contrast. Nothing is uploaded.
rgba(30, 144, 255, 1) hsla(210, 100%, 56%, 1) #1E90FF 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
| Name | Swatch | HEX | RGB |
|---|---|---|---|
black | #000000 | rgb(0, 0, 0) | |
white | #FFFFFF | rgb(255, 255, 255) | |
red | #FF0000 | rgb(255, 0, 0) | |
orange | #FFA500 | rgb(255, 165, 0) | |
gold | #FFD700 | rgb(255, 215, 0) | |
green | #008000 | rgb(0, 128, 0) | |
teal | #008080 | rgb(0, 128, 128) | |
blue | #0000FF | rgb(0, 0, 255) | |
navy | #000080 | rgb(0, 0, 128) | |
indigo | #4B0082 | rgb(75, 0, 130) | |
purple | #800080 | rgb(128, 0, 128) | |
magenta | #FF00FF | rgb(255, 0, 255) | |
pink | #FFC0CB | rgb(255, 192, 203) | |
brown | #A52A2A | rgb(165, 42, 42) | |
gray | #808080 | rgb(128, 128, 128) | |
silver | #C0C0C0 | rgb(192, 192, 192) |
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.
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.