Pick a colour you like in a design tool and you’ll get a code like #3498DB. Open a stylesheet and the same colour may be written as rgb(52, 152, 219). Both describe the same blue, in different languages. This tool translates between them and then goes one step further: choose a base colour and it builds a matching palette, so you don’t have to guess which shades work together.
To convert a colour, type or paste a value in any format (HEX, RGB or HSL), or pick a colour with the colour picker. The other formats update straight away.
To build a palette, choose a base colour and a palette type, such as complementary, analogous or triadic.
Click any swatch to copy its code and paste it into your project.
HEX is a six-digit code that starts with #. The digits come in three pairs for red, green and blue, each written in base 16 (0 to 9, then A to F), so each pair ranges from 00 (none) to FF (full). Web designers love it because it’s short. #FF0000 is pure red.
RGB gives the same three values as ordinary numbers from 0 to 255: rgb(255, 0, 0) is pure red. It’s how screens mix light, and it’s the easiest format to tweak by hand.
HSL describes a colour the way people tend to think about it:
Hue is the position on the colour wheel, from 0° to 360° (0° red, 120° green, 240° blue)
Saturation is how vivid the colour is, from 0% (grey) to 100% (fully rich)
Lightness is how light or dark it is, from 0% (black) to 100% (white)
HSL is the handiest format for making a colour lighter, darker or less intense without changing what it is.
HEX to RGB. Take #3498DB.
34 in base 16 is 52, 98 is 152 and DB is 219
Result: rgb(52, 152, 219), which is hsl(204, 70%, 53%)
RGB to HEX. Take rgb(255, 87, 51).
255 is FF, 87 is 57 and 51 is 33
Result: #FF5733, which is hsl(11, 100%, 60%)
HSL to RGB. Take hsl(120, 100%, 25%).
Hue 120° is green, full saturation, and a darker lightness of 25%
Result: rgb(0, 128, 0), which is #008000
Palettes work by moving around the colour wheel, which is the same as changing the hue in HSL.
Complementary: the colour directly opposite, 180° away. High contrast and lots of energy. Starting from hsl(204, 70%, 53%), the complement is hsl(24, 70%, 53%), or #DB7633, a warm orange against the blue.
Analogous: colours next to each other on the wheel, usually 30° either side. Calm and harmonious. From the same blue: hsl(174, 70%, 53%) and hsl(234, 70%, 53%).
Triadic: three colours evenly spaced, 120° apart. Lively and balanced. From the same blue: hsl(324, 70%, 53%) and hsl(84, 70%, 53%).
Monochromatic: one hue in several lightness levels. Clean, safe and very easy to get right.
Designers often split a design in three:
60% a dominant colour, often a calm or neutral one, used for backgrounds
30% a secondary colour, for sections, cards and supporting elements
10% an accent colour, for buttons, links and anything you want people to notice
It keeps a layout balanced, and it stops a bright accent colour from overwhelming the page.
A colour combination can look fine to you and still be hard for other people to read. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios between text and its background:
4.5 to 1 for normal text (level AA)
3 to 1 for large text (about 24px, or 19px bold) and for important interface parts such as button borders
7 to 1 for the stricter AAA level
A few examples:
Black on white is 21 to 1, the maximum
White text on the blue #3498DB comes out at about 3 to 1, so it’s fine for large headings but too weak for body text. Using a darker blue behind it fixes that
Roughly 1 in 12 men and 1 in 200 women have some form of colour vision deficiency. Don’t rely on colour alone to carry meaning. If red means “error” and green means “success”, add an icon or a word too.
Screens create colour by mixing light (RGB). Printers mix ink, which uses a different system (CMYK), and some bright screen colours, particularly vivid blues and greens, can’t be reproduced in print. A colour that looks great on screen may come out duller on paper. If your design is going to be printed, ask the printer for a proof. Screens also differ in brightness and calibration, so the same colour won’t look identical on every device.
Picking colours that are too saturated. A full-strength colour in every element gets tiring. Mute most of them and keep the vivid one for accents.
Using too many colours. Two or three main colours plus neutrals is enough for most designs.
Forgetting about contrast. Light grey text on white looks elegant and is hard to read.
Mixing up the formats. A HEX code needs the # and exactly six characters (or three, in shorthand). RGB values go from 0 to 255, and HSL’s hue goes up to 360.
Trusting a palette blindly. A generated palette is a starting point. Test it in your real design and adjust.
What does the HEX code actually mean?
It’s three pairs of base-16 digits for red, green and blue. #000000 is black (no light) and #FFFFFF is white (full light of all three).
Can I use a three-digit HEX code?
Yes. A shorthand like #F80 is expanded by doubling each digit, so it means #FF8800. It only works when each pair has identical digits.
Which format should I use in CSS?
Any of them. HEX is the most common, RGB is handy for adding transparency (with rgba), and HSL is the easiest to adjust by eye. They all produce the same colour.
Why do my colours look different on another screen?
Screens differ in brightness, contrast and colour calibration. The code is the same, but the display can show it a little differently.
What’s the best palette type for beginners?
Monochromatic and analogous are the safest, because they’re harmonious by design. Complementary gives more contrast, but it takes a little care to keep from looking harsh.
Can I use the generated colours commercially?
Colours themselves aren’t owned by anyone, so you can use any code in your projects. Specific brand colour systems may be protected as part of a trademark, so avoid copying another brand’s identity too closely.
Colour values are provided for general design use. Always test colours in your final context, including readability and accessibility.