What Does \ Mean in a CSS Hex Color Notation

what does \ mean in a css hex color notation?

That's an old Internet Explorer hack

\9 hack WORKS for: IE8 IE8 Standards, IE8 IE7 Standards, IE8 Quirks mode, IE7 Quirks, IE7 Standards (all varieties of IE8), IE6

So, in short, if you want an IE CSS hack that works in all flavors of IE, use the backslash-nine hack.

source

How does hexadecimal color work?

Hexadecimal uses sixteen distinct symbols, in the case of css color the symbols 0–9 to represent values zero to nine (obviously), and A, B, C, D, E, F to represent values ten to fifteen. So, using one Hexadecimal character you can represent 16 values. With two Hexadecimal you can represent 256 (16*16) values.

In RGB you have colours represented by Red Green Blue (R=0-255, G=0-255, B=0-255), so we use 3 pairs of Hexadecimal symbols! So when you see an RGB color, you can make the calculation below.

Example:

Hex: #4C8ED5 is RGB: 76, 142, 213.

Because 4C = 76(Red), 8E = 142(Green), D5 = 213(Blue)!

Hope it helps your understanding!

More to read: Hexadecimal on Wikipedia and a nice RGB to Hexidecimal Converter

Why does the below mentioned hex color code visually have the same color as the 6 digit hex code?

You are correct that second digit in each pair represents a shade. This is calculated from the hexadecimal representation of the number. Specifically, this is x * 16 * x for each pair. For example, F has a hexadecimal value of 15, so the pair FF would be 15 * 16 + 15. This would give you 255, which is the maximum value possible.

This can be seen in the following:

.color1 {  background: #A1BD24; /* rgb(161, 189, 36) */}
.color2 {  background: #A0B020; /* rgb(160, 176, 32) */}
.color3 {  background: #AB2; /* rgb(170, 187, 34) */}
.color4 {  background: #AABB22; /* rgb(170, 187, 34) */}

<div class="color1">Test 1</div><div class="color2">Test 2</div><div class="color3">Test 3</div><div class="color4">Test 4</div>

Why are 3-digit hex color code values interpreted differently in Internet EXPLORER?

I was able to recreate it in IE11 as well. As you know, it is a deprecated attribute. I assume your webpage & the browser are trying to interpret the code as HTML5 and there is a bug in their graceful degradation to handle this. So it just breaks.

As @Aaron Vanston points out, using inline style or CSS, you can still use the shorthand hex to apply a color.

I wouldn't even waste my time writing out bgcolor as an attribute. If I came across it in something I was working on, I'd remove it in favor of

style="background-color: #fff"

or the CSS alternative

body {
    background-color: "#fff";
}

CSS - RGB or HEX for color

I believe that it is mostly a matter of personal taste whether you should use RGB or HEX. Personally I use HEX, because it feels more convenient - it is easier to scan when reading the code and easier to copy from your preferred image editor. Also for colors like white (#fff), black (#000) it could save you a few bytes (not that it would make much difference though).

In the end it is really just two different representations of the same thing, and from a performance perspective I don't think it matters. At least there are loads of other things you can do to increase performance, that will have a greater impact on performance.

Hex representation of a color with alpha channel?

In CSS 3, to quote from the spec, "there is no hexadecimal notation for an RGBA value" (see CSS Level 3 spec). Instead you can the use rgba() functional notation with decimals or percentages, e.g. rgba(255, 0, 0, 0.5) would be 50% transparent red. RGB channels are 0-255 or 0%-100%, alpha is 0-1.

In CSS Color Level 4, you can specify the alpha channel using the 7th and 8th characters of an 8 digit hex colour, or 4th character of a 4 digit hex colour (see CSS Color Module Level 4 spec*)

As of July 2022, >95% of users can be expected to understand the #RGBA format

It has been supported since:

• Firefox 49, released Sept 2016 (Mozilla bug 567283).
• Safari 10, released Sept 2016.
• Chrome 62, released Oct 2017. For earlier versions you could enable experimental web features to use this syntax. See Chromium Issue 618472 and Webkit bug 150853.
• Opera 52, released March 2018 (or Opera 39 when experimental web features are enabled).
• Edge 79, released Jan 2020 (the first version of Edge based on Chromium)
• Samsung Internet 8.2, released Dec 2018
• Android P (your app must target Android P or newer)

It is not supported in:

• IE
• Original Edge (version numbers up to and including 18)
• Opera Mini
• UC Browser

Up to date browser support information is available on CanIUse.com

Simple question regarding CSS color code

#26c is a Websafe hexadecimal colorcode. Hexadecimal colors are usually 6 characters long, for example black is #000000 and white is #ffffff. Websafe colors are only three characters long that double up, so #26c becomes #2266cc.

The reason why this relates to a shade of blue is because of the way Hexadecimal codes are calculated. 22 represents the amount of RED in the color from 1 to 255, 66 represents the amount of green in the code and CC represents the points of blue.

But how can CC represent an amount?

Well I'm glad you asked, computers like to count in amounts of EIGHT digits and so have developed a number system based on powers of 16, so you don't start over til you get to 16, but from 11 - 15 you use letters. So 10 is A, 11 is B, 12 is C, 13 is D 14 is E and 15 is F.

So when calculated using Hexadecimal, CC becomes 204 (12+12x16), meaning 204 points of blue in the color. this being the highest value, will mean the color is mostly blue :)

#000000 means 0 red, 0 green and 0 blue, that's why it is black, totally devoid of color. #ffffff means 255 red, 255 green and 255 blue, that's why it is white, all the colors added together makes white. And all the colors in between can be calculated this way :)

Hope that helps. :)

---

Related Topics