Colour Converter
Convert one colour between HEX, RGB, HSL, HSV and CMYK, pick a colour straight out of an image, and copy the exact value each program expects.
Click anywhere on the image to sample that colour.
Fine tune
Harmonies built from this colour
The Formats, and When Each One Helps
| Format | Looks like | Use it when |
|---|---|---|
| HEX | #3B82F6 | Web code and GIMP's colour dialog. The universal exchange format. |
| RGB | rgb(59, 130, 246) | Anywhere you need the raw channel numbers, including scripts. |
| HSL | hsl(217, 91%, 60%) | Building a palette. Change lightness only and you get a matching shade. |
| HSV | hsv(217, 76%, 96%) | GIMP's colour picker uses this. Painters find it more intuitive than HSL. |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Print work. See the warning below before you trust the numbers. |
HSL versus HSV confuses everyone once. In HSL, 100 percent lightness is always white. In HSV, 100 percent value is the most vivid version of that hue, not white. That is why GIMP's picker shows a colour triangle rather than a simple lightness bar.
Using These Values in GIMP
- Click the foreground colour swatch at the bottom of the toolbox.
- The dialog has tabs for Hue, Saturation, Value, plus R, G and B fields.
- The HTML notation box at the bottom takes a hex value directly. Paste it without the hash if GIMP rejects it with one.
- Press the plus icon to save the colour to your palette so you can reuse it across the project.
To sample a colour from inside an image in GIMP, press O for the Color Picker. Tick Sample merged in the tool options if you want the colour as it appears on screen rather than on the active layer alone.
A Word on CMYK
GIMP works in RGB throughout. It can soft proof through a CMYK profile under View > Color Management, which shows you roughly how the colours will shift, but it does not edit in CMYK channels.
Common Questions
Why does my colour look different in print?
Screens emit light and can show colours that ink cannot reproduce. Bright cyan, vivid orange and pure saturated greens are the usual casualties. Desaturate slightly before sending anything to print.
What is the fourth value in a hex code sometimes?
An eight digit hex includes alpha, so #3B82F680 is that blue at 50 percent opacity. GIMP shows opacity as a separate slider instead.
How do I build a palette from these?
The harmony strip above gives you the standard relationships. To pull a palette out of a photograph instead, use the colour palette generator.
Will this colour be readable as text?
Check it against your background with the contrast checker. Anything under a 4.5 to 1 ratio fails accessibility guidelines for body text.