Use Hex Code to Mix Colors - Color Hex Development

HTML-CSS
1

Tell us what’s happening:
"The digit 0 is the lowest number in hex code, and represents a complete absence of color.

The digit F is the highest number in hex code, and represents the maximum possible brightness."

Just trying to understand this logic, and wondering if anyone knows how this was developed - how is it possible that #000000 represents black or “absence of color” when in fact white as #ffffff would technically fit. I know it says brightness is represented by F, but brightness is not a color and black is actually a mix of all colors (taking it to paint mixing in the 1st grade lol - we got taught how to mix and make black but couldn’t create white with any color) just with absence of brightness.

Is there a factor of saturation, brightness, etc. in the other letters?

Confusing - and just random newbie thought - wanted to get any developer feedback! > :smile:

Your code so far


<style>
  .red-text {
    color: black;
  }
  .green-text {
    color: #FFFFFF;
  }
  .dodger-blue-text {
    color: black;
  }
  .orange-text {
    color: black;
  }
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="green-text">I am green!</h1>

<h1 class="dodger-blue-text">I am dodger blue!</h1>

<h1 class="orange-text">I am orange!</h1>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Safari/605.1.15.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/use-hex-code-to-mix-colors

2

This is light, not paint, and reflects human perception of colour, not paint. It is additive, not subtractive (if you add the colours together it tends toward white). There are red, green and blue channels (each with a value from 0 to 255), and red + green + blue is white, not black (and blue + green is cyan, red + green is yellow, red + blue is magenta). Black is an absence of all three, not a mixture.

This is a good question! The answer is no, and it makes RGB a little bit difficult to deal with. But RGB is just one way of representing colour, there are many, many other colour models. CSS supports a few other models, and the one that is likely to be closest to what you want is HSL (hue, saturation, lightness). It is generally easier to work with, because if you can memorise the colour wheel, you can tell what a colour will look like from reading the code, which is not generally the case with RGB. It also generally makes for smoother transitions of colours in animations and gradients than RGB, which is nice.

These are all basically the same:

color: DeepSkyBlue;
color: #00bfff;
color: rgb(0, 191, 255);
color: hsl(195, 100%, 50%);

And note:

// The hex code:
#00bfff

// Split the hex code into 3 pairs
00
bf
ff

// Convert from hexadecimal (base 16) to decimal (base 10)
00 -> 00
bf -> 191
ff -> 255

// RGB colour:
rgb(0, 191, 255)

All give this:

Screenshot_20181122-095448
Screenshot_20181122-0954481731×2048 18.1 KB

If you think of a colour wheel, the hue for both of those is the number of degrees around the colour wheel (0 to 360). saturation is a % value, 0 being greyscale, 100 being fully saturated. lightness takes a % as well, with 0 being black and 100 being white:

197px-HSL_color_solid_cylinder_saturation_gray

2 Likes
3

Ah, this makes more sense - all was developed based on light (or darkness) rather than color only. Again, my example came from and understanding of mixing hues (no saturation or lightness considered) where all colors mixed = black (or some darker variation of the mixed colors) and no color = white…

Good to learn about this and understand how the color spectrum was created to be used in computers! Hue color vs. true color in painting are obviously different than tech, but it’s good to understand why/how things are defined by those who create them in ways they have.

Next question - are we human or hueman? Totally kidding…thanks so much for this, Dan! :smile:

1 Like