"Build an Interactive Story App with Swift" was retired on May 31, 2020.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Quick question about HEX colors?

There are 6 numbers #123456 in a HEX value.

I know the first 2 is Red, middle 2 is Green, right 2 is Blue.

For Red (1,2). What do the two numbers represent? e.t.c for green and blue.

I know F is the highest alphabet letter for a HEX value. However, sometimes there is a number up to 6. What is the difference between a number and a letter in a HEX value? Thanks

If you know a website that can explain everything to me please link it.

:)

5 Answers

Hi Fedor! That's a great question. Let's break things apart a bit:

For Red (1,2). What do the two numbers represent?

So the two numbers are two decimals of the same number. The hex values for each color pair (red, green, blue) range from 0 to FF (0 to 255 as decimal numbers) representing the intensity of red in the color being shown.

What is the difference between a number and a letter in a HEX value?

Hexidecimal numbers go from 0 to 15 (or in other words they're base 16 numbers). Since we don't have numerals to represent 10 through 15 as a single digit, we use letters instead. So:

Hexidecimal => Decimal
0 => 0
1 => 1
2 => 2
3 => 3
4 => 4
5 => 5
6 => 6
7 => 7
8 => 8
9 => 9
A => 10
B => 11
C => 12
D => 13
E => 14
F => 15

Where things get a little mind bending is that we're actually presenting two hexadecimal digits in each color. That means that each two digit pair can have a value up to 255 in decimal. Converting multi-digit hexadecimal colors to decimal is pretty easy, though. Simply take the first digit, convert it to decimal using the table above, and then multiply it by 16. Then take the second digit, convert it to decimal, and add it to the first product. So, as an example:

Convert F6 in hexidecimal to decimal:

First Digit:
F in hex = 15 in decimal
15 * 16 = 240

Second Digit
6 in hex = 6 in decimal

First Digit + Second Digit = 240 + 6 = 246

Hopefully that helps! Feel free to ask any more questions here.

There's an article for that ...

The code side of color in the always awesome Smashing Magazine

A hexidecimal number can have one of 16 value: These are, in order if smallest to largest, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F. Each of these has a decimal equivalent: These are 0 through 15.

Each of the color components have a value of 0-255, or 0-FF in hexidecimal. The first character represents multiples of 16 in the same way that the 7 in 76 represents multiples of 10.

Example:

What is the decimal equivalent of DA?

D = 13 A = 10

DA = 13 x 16 + 10 DA = 218

A good reference is the CSS Foundations regarding Color Values. Guil covers this and more.

Hi I believe the answer to what you are asking is that there are 16 characters to make a HEX color 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. The letters after the number are equal to 10, 11, 12, 13, 14, 15, and 16. In that order, the higher the value, the more color pigmentation is brought into that ratio of red, green, and blue. So a HEX value of #FF0000; is going to be strictly red where as adding other values such as #FFFF00; will be yellow and so on.. Look up different hex values to see how this works. I hope this is what you were asking about.

Here is a joke to impress people at cocktail parties:

Q: Why did the software developer mix up Halloween with Christmas?

A: Because OCT 31 = DEC 25.