Flyers · Compared
Hex vs RGB vs HSL colour codes
Hex, RGB and HSL are three notations for the same screen colours. RGB gives red, green and blue light values from 0 to 255; hex writes those values as a six digit code such as #1F6F8B; HSL describes the colour as a hue angle, a saturation percentage and a lightness percentage, which is easier to adjust by hand.
Brand guidelines, design tools and developers each tend to quote colours in a different notation, and small conversion slips are how a brand teal becomes three slightly different teals. Understanding that all three describe one colour makes it easy to move between them without drift.
Nuwan Madhusanka · Co-founder
5 min read · Published
| Colour | Hex | RGB | HSL |
|---|---|---|---|
| Brand teal, exact | #1F6F8B | rgb(31 111 139) | hsl(195.6 63.5% 33.3%) |
| Brand teal from rounded HSL | #1E6D8A | rgb(30 109 138) | hsl(196 64% 33%) |
| Lighter tint, lightness 60% | #58B7DA | rgb(88 183 218) | hsl(196 64% 60%) |
| Pale tint, lightness 90% | #D5EDF6 | rgb(213 237 246) | hsl(196 64% 90%) |
| Muted, saturation 20% | #435C65 | rgb(67 92 101) | hsl(196 20% 33%) |
| Brand teal at about 50% opacity | #1F6F8B80 | rgb(31 111 139 / 50%) | hsl(195.6 63.5% 33.3% / 50%) |
Three spellings of the same light
Screens build every colour from red, green and blue light, and all three notations describe that mix in the sRGB colour space. The CSS Color Module Level 4 draft from the W3C CSS working group states that rgb(), hex and hsl() are all defined in sRGB. RGB is the most literal: three numbers from 0 to 255, one per channel, so rgb(31 111 139) means a little red, more green and more blue again. Hex is RGB written in base 16. Each pair of digits is one channel, so 1F is 31, 6F is 111 and 8B is 139. HSL is a different arrangement of the same information, laid out around a colour wheel instead of three light channels.
How to read each one
A hex code is compact and easy to copy, which is why brand guides and design tools favour it. MDN lists four hex forms: three, four, six and eight digits, where the short forms double each digit, so #F09 means #FF0099, and the fourth or last pair sets opacity. Hex is case insensitive. RGB is easier to reason about in numbers, since each channel is a plain decimal value, and it takes an optional opacity after a slash. HSL starts with hue, an angle on the colour wheel where 0 is red, 120 green and 240 blue, then saturation from grey at 0 percent to full colour at 100, then lightness from black at 0 percent through the pure colour at 50 to white at 100.
When HSL earns its place
HSL is the notation for building a palette by hand. Keep the hue and saturation of a brand colour and change only the lightness, and you get a matching set of tints and shades, as the table shows for the teal: 60 percent gives a light accent, 90 percent a pale background. Lower the saturation instead and the colour turns muted without changing family. Doing the same in hex means recalculating three unrelated pairs of digits. HSL has a known weakness, though: equal lightness values do not look equally light across hues, so a yellow and a blue both at 50 percent appear very different. The newer oklch() function in the same CSS draft was designed to be perceptually uniform for exactly that reason.
Common mistakes
The most common is rounding during conversion. Converting #1F6F8B to HSL gives 195.6, 63.5 and 33.3 percent, and rounding those to whole numbers and converting back produces #1E6D8A, a slightly different colour; keep the exact values or treat the hex code as the master. The second is copying a hex code with a digit missing, which a browser may read as a valid short form with a different meaning. The third is assuming a colour value will print the same, when all three notations describe screen light and printing converts them to ink, a different subject covered by the CMYK against RGB comparison. The last is quoting colours without saying which notation, so 33 could be a lightness or a green channel.
Colour codes in the flyer builder
Colour in the flyer builder comes mainly from themes. There are 99 of them, built on 88 palettes plus hand authored themes, and choosing one recolours the whole flyer together, with charts taking their series colours from the theme. For text, the colour control offers the theme's own colour tokens or a custom hex code, so a brand colour held in RGB or HSL needs converting to hex before it goes in; the exact six digits keep it consistent from flyer to flyer. There is no Pantone or CMYK entry anywhere, and exports are RGB PDF, PNG or JPG. If a colour has to match printed material exactly, give the print shop the brand's print reference as well as the hex code.
Questions people ask
How do I convert hex to RGB by hand?
Split the six digits into three pairs and convert each from base 16. The first digit of a pair is worth 16 times its value and the second its own value, with A to F standing for 10 to 15. So 8B is 8 times 16 plus 11, which is 139. A calculator or colour converter is quicker and avoids slips.
Is HSL the same as HSB or HSV?
No. HSB, also called HSV, uses brightness instead of lightness, and a fully bright, fully saturated colour is the pure hue, whereas in HSL the pure hue sits at 50 percent lightness and 100 percent is white. Design programs often show HSB while CSS uses HSL, so the same numbers describe different colours in each.
Which notation should a brand guide use?
List the hex code as the primary screen reference, because it is compact and exact, and add the RGB values for tools that prefer them. For print, add a CMYK breakdown and, where the brand uses one, a spot colour reference supplied by the designer. HSL is useful as a working tool but rarely needed in the guide itself.
Why do the old CSS forms have commas?
Earlier CSS wrote rgb(31, 111, 139) with commas and used separate rgba() and hsla() functions for opacity. Current CSS accepts space separated values with an optional slash for opacity, such as rgb(31 111 139 / 50%), while still supporting the older comma form, so both appear in real stylesheets and both work in current browsers.
Can hex describe colours outside sRGB?
No. Hex, rgb() and hsl() are limited to the sRGB gamut, which excludes some very saturated colours that modern wide gamut displays can show. Newer CSS functions such as color(display-p3), lab() and oklch() can express those. For flyers and most brand work, sRGB covers what is needed.
How do I check if two colours have enough contrast?
Use a contrast checker that calculates the WCAG contrast ratio from the two values in any notation. Normal body text needs at least 4.5 to 1 for the AA level and large text at least 3 to 1. Adjusting only the HSL lightness of one colour is often the quickest way to pass without changing the brand hue.
Make one with flyers
The button opens the generator with this use case already described. Change the wording to match your own.
Create a flyer with OneCraftRelated questions
- CMYK vs RGB: why printed colours look differentCMYK vs RGB: RGB mixes light for screens, CMYK mixes ink for paper, and ink cannot reach every screen colour. What shifts in print and how to limit it.
- What is Pantone?What is Pantone: numbered standard colours mixed as spot inks, so a colour prints the same everywhere. Spot against process colour and when each is used.
- What is a WebP image?What is a WebP image: a web image format, smaller than JPG and PNG at similar quality, with transparency and animation. Where it fits and where it does not.
Step by step in the builder: Change a flyer's colours and fonts with themes.
Written and checked by the OneCraft team. Last checked .