CODEWITHSUNDEEP
css
Harish Harry
Harish Harry

Reputation: 55

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

I understand that the standard hex color code format is 6 digit hexadecimal #RRGGBB. But why does the following 2 versions show similar color (at least visually) #RGB and #R0G0B0?

Example:

All 3 appear green. Is it that the 2nd digit of every 2 digit pair in #RRGGBB represents a shade?

Upvotes: 0

Views: 1106

Answers (4)

yqlim
yqlim

Reputation: 7080

First, #AB2 evaluates to #AABB22 instead of #A0B020.

Next, to address your question:

... why does the following 2 versions show similar color(atleast visually) #RGB and #R0G0B0?

I think it is best explained by using HSL instead of RBG or HEX.

When we convert the hex values to HSL, we get: 

#a1bd24 -> hsl(71, 68%, 44%)

#ab2    -> hsl(67, 69%, 43%)
#aabb22 -> hsl(67, 69%, 43%)
#a0b020 -> hsl(67, 69%, 41%)

If you are not familiar with HSL, here's a short article that explains what H, S and L stands for.

Hue

Both #AB2 and #A0B020 has hue of 67. Meaning the two hex values are actually the same colour.

Saturation

Both #AB2 and #A0B020 has saturation of 69%. Meaning the two hex values are actually the same colour with same saturation.

Luminosity/Lightness (or can you say it's shade?)

Here, #AB2 and #A0B020 has 2% difference in lightness. Meaning even though they are essentially the same colour with same saturation, there is a very slight difference in the actual presentation of the colour. As the difference is only 2%, we will see almost no difference when we perceive them with our eyes.

Is it that the 2nd digit of every 2 digit pair in #RRGGBB represents a shade?

Not really.

As you can see in the #A1BD24 example, the only changing digits are the 2nd digit of every 2 digit pair, but its HSL values are completely different with both #AB2 and #A0B020.

Its HUE becomes 71, meaning it's already a different colour (even though it is still very green). So, the statement is incorrect.

div {
  width: 100px;
  height: 100px;
  float: left;
  text-align: center;
  line-height: 100px;
}

#a1bd24 { background-color: #a1bd24; }
#ab2    { background-color: #ab2;    }
#aabb22 { background-color: #aabb22; }
#a0b020 { background-color: #a0b020; }
<div id="a1bd24">#A1BD24</div>
<div id="ab2">#AB2</div>
<div id="aabb22">#AABB22</div>
<div id="a0b020">#A0B020</div>

Upvotes: 1

david
david

Reputation: 18258

The 3 digit code is just a shorthand for the 6 digit where every second digit in the pair is a repeat of the first digit.

So: #xyz is the same as #xxyyzz (not #x0y0z0 as you are suggesting)

The relevant spec is here: https://www.w3.org/TR/2018/REC-css-color-3-20180619/#rgb-color

and the relevant section I will paste below:

The format of an RGB value in hexadecimal notation is a ‘#’ immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

The next iteration of the colour spec actually adds support for 4 and 8 character colours too. In these the extra digit (or pair) represents the alpha channel. You can read this spec here: https://drafts.csswg.org/css-color/#hex-notation

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42304

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>

Note that the shorthand syntax #RGB is short for #RRGGBB, NOT #R0G0B0; .color3 is equal to .color4, not .color2.

Upvotes: 1

Santiago Bruno
Santiago Bruno

Reputation: 446

In the example where you compare #A1BD24 with #A0B020, they look similar because you are changing the less significant digit of each red, green and blue component, so visually is not very different, specially with the values you used

in RGB,

A1 BD 24 is 161 189 36

and

A0 B0 20 is 160 176 32

so they are very similar values

Upvotes: 0

Related Questions