Color Code helps you pick a colour and get its code in the format you need. Choose a shade, read off the HEX, RGB or HSL value, and copy it straight into your stylesheet, design file or document.
Same colour, different notation
A colour has to be written down before it can be used, and different tools expect it written differently. CSS usually wants a HEX code. Some design software asks for RGB. Anyone adjusting a shade rather than choosing one tends to reach for HSL. They all describe the same colour; only the notation changes.
Converting between them by hand is tedious and error-prone, and a single mistyped character produces a colour nowhere near the one you meant. Picking visually and copying the exact code removes that whole category of small mistakes.
How to use it
-
1
Choose a colourPick from the selector, or enter a code you already have to see it rendered and converted.
-
2
Adjust itNudge the shade until it is right. Working in HSL makes this easier — lightness and saturation move independently of the hue.
-
3
Read the codesThe same colour is shown in each notation, so you can take whichever one your tool expects.
-
4
Copy and usePaste the value into your CSS, your design software or your document and move on.
Reading the notations
HEX
Six characters after a hash, in pairs for red, green and blue. Compact, and the default in most web code.
RGB
Three numbers from 0 to 255. The same information as HEX, written in a form that is easier to read at a glance.
HSL
Hue, saturation and lightness. Built for adjusting a colour rather than defining one from scratch.
Alpha
An added transparency value, used when a colour needs to let what is behind it show through.
Shorthand HEX
Three characters instead of six, valid only when each pair repeats — #ffcc00 can be written #fc0.
Named colours
Words like tomato or slategray. Convenient, but far too coarse for real design work.
Building a set that works together
A common mistake is choosing every colour independently and hoping they get along. A more reliable approach is to start with one base colour and derive the rest from it: keep the hue, and vary lightness to produce a light background, a mid tone and a dark text shade. HSL makes this straightforward, because you can change one number and leave the character of the colour alone.
Restraint helps more than variety. One dominant colour, one accent used sparingly, and a range of neutrals will carry an interface further than six competing brights. Reserve the accent for the things you want people to click, and it keeps working; spread it everywhere and it stops meaning anything.
Contrast is not optional
A colour pairing that looks refined on a large bright monitor can be unreadable on a phone outdoors. Light grey text on white is the classic example — it photographs beautifully and fails for a great many real readers, including anyone with reduced vision and anyone in sunlight.
Accessibility guidance sets a widely used minimum contrast ratio of 4.5 to 1 between body text and its background, with a lower bar for large headings. Check pairings against that standard rather than trusting your own screen. It is also worth remembering that colour should never be the only way information is conveyed, since a meaningful share of readers cannot distinguish certain hues.
Nothing is sent anywhere
The picker runs entirely in your browser. Colours you select and codes you enter are handled on the page itself, with no server involved, no account, and nothing stored on our side.
Frequently asked questions
What is a HEX colour code?
A hash followed by six characters, giving the red, green and blue components in pairs. It is the notation most commonly used in web code.
Is RGB different from HEX?
Only in how it is written. Both describe the same red, green and blue values, one in hexadecimal and one in decimal.
When should I use HSL?
When adjusting a colour. Changing lightness or saturation in HSL keeps the hue intact, which is awkward to do in HEX.
Can I convert a code I already have?
Yes. Enter the value and you will see the colour rendered along with its equivalents in the other notations.
Why does my colour look different on another screen?
Displays vary in calibration, brightness and colour profile. The code is exact; how a given screen renders it is not.
How do I know if text will be readable?
Check the contrast ratio between the text and its background against the accessibility minimum of 4.5 to 1 for body text.
Do I need to sign up?
No. There is no account and nothing to install.
Related tools
Applying the colours you picked to something visual? Poster Maker takes custom values for text and backgrounds.