Color Code Picker
Every Format, One Color
This color code picker converts hex to rgb, rgb to hex, and both to hsl, hsv and cmyk as you type. It adds opacity, a ramp of tints and shades, and a contrast reading that says whether words can sit on the color.
- PriceFree
- Formats6
- Sign-upNone
- UploadedNothing
Color Code Picker
HEX, RGB and HSL, with contrast and a shade ramp
- On white
- —
- On black
- —
Contrast decides whether words can sit on this colour. AA wants 4.5:1 for body text.
A colour cannot pass or fail on its own. Put your text colour against your background colour and this reads the ratio the way WCAG does.
The three buttons above move a colour until the pair clears AA at 4.5:1. Hue and saturation stay put, so the colour still belongs to your palette.
Large text looks like this
Small text looks like this. It is the size most of your page is set in, so it is the size that decides whether the pair is usable. Read this line and trust your eyes as well as the number.
And this is the small print nobody designs for.
Ready. Type a colour in any of the three fields.
One Color, Written Six Ways
A color has no single spelling. The same blue is #1B5FD1 in a stylesheet, rgb(27, 95, 209) in a canvas call and hsl(217, 77%, 46%) in a design token.
They all name the same pixels. So converting hex to rgb changes nothing about the color, only about who can read it.
The awkward part is that each format suits a different job. Therefore a page that shows one and hides the rest sends you looking for another page.
This color code picker shows all of them at once, and rewrites every field the moment you edit any one of them.
Where Hex, RGB and HSL Each Shine
Hex is short and it pastes cleanly. It is the format a designer hands you and the one most stylesheets carry.
RGB names the three channels plainly. So it suits anything that does arithmetic on a color: a canvas, a gradient, a shader.
HSL keeps hue and lightness on separate dials. That is the one to reach for when you want the same color a shade darker, because you change one number.
Opacity belongs to rgba and hsla rather than to hex, although an eight-digit hex carries it too. This page writes whichever form you need.
Turning a Hex Code Into RGB With Pen and Paper
A hex color is three pairs, and each pair is one channel written in base sixteen. So #1B is the red channel.
Every pair of characters becomes a value between 0 and 255. The letters a to f simply continue counting after 9, so 1B means one sixteen plus eleven, which is 27.
A three-character hex doubles each digit. Therefore #abc means #aabbcc, which is a shorthand worth knowing when you read somebody else's stylesheet.
For RGB to hex, each channel turns back into a pair of hex digits. MDN's colour value reference lists every syntax a browser accepts.
Why The Contrast Number Is Here
The question after "what is this color" is almost always "can I put text on it". So the answer sits beside the color rather than on another page.
The two readings compare your color with white and with black. A ratio of 4.5:1 passes AA for body text, and 3:1 passes for large text only.
Those thresholds come from WCAG, and every checker computes them the same way. This one follows the formula exactly rather than rounding it.
A color that fails as text can still work as a background, a border or a chart fill. The note under the readings says which case you are in.
Reading HSL Without The Maths
Hue is an angle round a colour wheel. Zero is red, 120 is green, 240 is blue, and the numbers between blend them.
Saturation sets how strong the colour looks. At 0% every hue turns grey, and at 100% it is as vivid as the screen allows.
Lightness goes from 0%, pure black, up to 100%, pure white. Your colour sits at 50%, which is why a brand colour usually lands near there.
So a darker button is the same hue and saturation with a lower lightness. That is one number, and the family still looks related.
When Two Colours Should Not Meet
Some pairs read badly even when the contrast number passes. Red on green is the usual example, because the ratio ignores colour blindness.
Roughly one man in twelve sees red and green differently. Therefore a chart that separates its lines by hue alone loses them.
Add a second signal instead. A label, a dash pattern or a shape carries the meaning when the colour does not.
And test in greyscale. If the picture still reads with the colour removed, it reads for everybody.
One more pair catches people out: a mid grey on a mid colour. Both sit near the middle of the scale, so the ratio drops below three and the words blur into the panel behind them.
Where Each Code Ends Up
CSS takes all three forms, so use whichever reads best in the file. Most teams write hex for fixed colours and hsl inside a calculation.
Design tools lean towards hex. That is what a handover file carries, and what a developer will paste first.
Mobile is different. Swift wants each channel from 0 to 1, and Android wants an eight-digit hex with the opacity in front.
This page writes all of those, so a colour crosses from a design file into an app without anybody doing arithmetic.
The Ramp Is Mixing, Not Guessing
Each step blends your color towards white or towards black by a fixed amount. That keeps the hue steady while the lightness moves, which is what a set of tints should do.
Working With the Color Code Picker, Start to Finish
Type in whichever field you already have. The other two follow.
- 1
Paste any format
Hex with or without the hash, rgb in any punctuation, or hsl. The picker reads all three.
- 2
Or click a shade in the colour swatch
The colored square in the bar opens your system picker. Dragging it updates every field live.
- 3
Set the opacity
Drop it below 100 and the output switches to rgba and hsla, with an eight-digit hex beside them.
- 4
Copy what you need
Take one line, or the whole block with the CSS, Swift and Android forms already written.
What Sets This Color Code Picker Apart
Converting hex to rgb takes four lines of code. The real value lies in the extras around the picker.
Three fields, one color
Edit any field and the other two rewrite themselves. Nothing waits for a button, so you can paste and read in one motion.
Contrast built in
The ratio against white and black sits under the swatch, with the AA verdict spelled out rather than left as a number to interpret.
A ready-to-use scale of tints and shades
Nine steps from four fifths lighter to four fifths darker, each with its own hex. That is usually the whole palette a component needs.
Opacity in every form
One number switches the output to rgba, hsla and eight-digit hex together, because different files want different ones.
It reads sloppy input
Spaces, missing hashes, percent signs and the newer slash syntax all parse. That means a colour pasted from any app is accepted.
Nothing leaves the tab
Your browser handles each colour conversion by itself. An unreleased brand color never reaches this site, because no request is made.
Working With Color Codes Sensibly
Six habits that keep a palette usable rather than merely pretty.
- Keep a single master list of your brand colours. Keep the color in a CSS variable and convert from there. Two hard-coded copies drift apart within a month.
- Change lightness, not hue. For a darker version move the L in hsl. Nudging the hex by eye shifts the hue as well, and the set stops looking related.
- Test the text colour before you settle on it. A brand color that fails at 4.5:1 will fail every audit you ever run. Find that out now rather than after the build.
- Write hex in lower case. Both cases work, so this is only about diffs. One convention keeps your version history readable.
- Keep opacity out of brand colors. A color at 60% over an unknown background is unpredictable. Pick the blended color instead, and you can test it.
- Try the colour against the background it will sit on. Your page is rarely pure white. Check the colour against the section it will actually sit on, because that is the pair a visitor sees.
- Keep a mid step in reserve. A palette with only a light and a dark runs out fast. One middle value covers hovers, borders and disabled states, and you will reach for it far sooner than you expect.
- Name the step, not the shade. Call it blue-600 rather than dark-blue. Then swapping the palette later changes one value instead of every name.
Five Ways A Color Goes Wrong
Each of these turns a colour decision into a bug somebody else has to find.
Trusting a screenshot
Colors picked from a compressed screenshot are off by a few points. Take them from the source file instead.
Ignoring the background
Contrast is a pair, never a single color. A blue that passes on white can fail badly on your page section.
Using opacity for a tint
Fading a color to 20% depends on whatever sits underneath. Mixing it towards white gives the same look and stays predictable.
Shipping eight-digit hex everywhere
Old browsers and several design tools ignore the alpha pair. Write rgba where anything outside a modern browser reads it.
Rounding HSL and converting back
HSL rounds to whole numbers here, so a round trip can move a channel by one. Save the hex code as your master value.
Color Code Picker FAQ
How can I turn a hex code into RGB with pen and paper?
Break the six characters into three pairs, then read every pair as a base-16 number. So #1B5FD1 becomes 27, 95, 209. A three-character hex doubles each digit first.
Why does my rgb to hex result differ by one?
Almost always rounding somewhere in the chain. Hex holds whole numbers from 0 to 255, so a value that arrived as a percentage or through HSL can land a point either side.
What do the final two characters in #RRGGBBAA control?
The last pair is opacity, from 00 for invisible to ff for solid. Every current browser reads it, although some older design software quietly drops it.
Which colour format belongs in my design tokens?
Hex for brand colors, because it is exact and short. Convert to HSL when you need a lighter or darker step, then store the resulting hex rather than the calculation.
Which contrast ratio does WCAG AA expect for my text?
Under WCAG AA, body text needs a 4.5:1 ratio, while text at 24px, or 19px in bold, needs 3:1. AAA asks for 7:1, which is worth aiming at for long reading.
Why does one hex code look different on my laptop and my phone?
Screens differ in how they show colour, and some apply a profile on top. The code is exact, so the difference lives in the display rather than in the value.
Can I get a whole palette from one colour?
The ramp here gives you nine steps of the same hue, which covers most components. A full palette also needs a neutral grey and one accent, and those are choices rather than calculations.
Does the Denwix picker send my colour to a server?
No. Every conversion runs inside your browser tab, so a palette you have not launched yet never reaches this site and no log records it.
Tools For The Same Afternoon
Three that sit either side of choosing a color.
SVG Compressor
Shrink the icon you just recolored, and strip anything hiding inside it.
Open tool →CSS Minifier
Squeeze the stylesheet your new variables landed in, without breaking calc().
Open tool →QR Code Generator
Build a code in your brand color, and check it still scans afterwards.
Open tool →
Read The Color, Then Use It
Paste a hex, an rgb triple or an hsl value, and take whichever format your file wants. The color code picker is free, needs no account, and keeps every value on your device.