![]() ![]() Our 0-16 scale starts at 0, goes to 9 and then uses a to f to give us a further 6 increments. Here is the scale we will be working with in HEX: 0, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f With that out the way, let’s take a look at the maths part of this hexadecimal stuff. The maths partīy the way, I’m British and we say ‘maths’, rather than math because, well, it’s short for ‘mathematics’. We can just play with that alpha channel. This is great because it means you can make subtle variations of colours when they sit on top of other colours, without needing to convert it to RGBA or HSLA. Don’t worry about the hex values, just know that one end of the scale is opaque, and can’t be seen through, and the other is completely transparent, so you wouldn’t even know it’s there. Right, you with me so far? Last two digits are our alpha channel. The last pair of digits, interpreted as a hexadecimal number, specifies the alpha channel of the color, where 00 represents a fully transparent color and ff represent a fully opaque color. Here is the way the specification describes it: So, we are writing #RRGGBBAA where AA is the alpha. OK, so all the 8 digit variant does is add on an alpha amount. And some combination of those colour gives you the colour you want. In CSS, a colour can be represented in HEX like so, #RRGGBB where RR is red, GG is the green, and BB is the blue. Well I guess I’d better start delivering on that claim. I can tell you everying you need to understand Hex enough to use it in anger in your next project with ease. Well in something akin to Spinal Tap (kids, ask your parents), Hex goes up to 16. Unless you’re an Android or some kind of mathematical savant, you will be used to counting in tens, in decimal. Which can seem pretty intimidating when you start looking at how hexadecimal numbering works. HEX colours are based on a hexadecimal numbering system. When I want to realise that design in the browser, it’s that same HEX I’m copying in. I open the default colour picker, pick my colour and it gets set as a HEX. And that’s no fault of designers, I do it when designing too. But the truth is, as a dev, no one ever gives me a design with the colours in HSLA format. I think of all the colour formats, it’s the most human friendly, and unlike standard 3 and 6 digit HEX, accepts an alpha channel. For everyone else, here’s just enough hexadecimal knowledge to use 4 and 8 digit hex values in anger. ![]() It’s supported by everything apart from old, pre-chromium Edge so most people can be using them right now.Īre you good at Maths? Yes? You can probably jog on then, as you are unlikely to take much from this. 4 and 8 digit HEX are great because they let you easily create semi-transparent variations of a HEX colour, without the need to convert it to rgb or HSL first. We’ll get to that.įirst, remember how three digit hexes work?. But wait… the last two digits are “80”, not “50”. Those last two digits represent the alpha transparency. * We could make it 50% transparent like this */ You might be seeing it more all the sudden if you use Chrome, because it dropped in 52, and the DevTools seem to be defaulting to showing alpha transparent colors in this format even if you set it originally using something else. They are a way put alpha transparency information into the hex format for colors. ![]()
0 Comments
Leave a Reply. |