On this section, three numbers make up a colour. How do you know which numbers to use to get the colour you want? In my very limited experience, I have only stumbled across RGB numbers, but I noticed those numbers don’t produce the same colours as in this exercise.
I was pondering this question until just now. It appears to be in HSL notation, not RGB. This explains why the color becomes white when the third number approaches 100
Seeing later discussion, I guess I may well explain a bit:
Color is a perceived quality. Your eye has three kinds of receptors that are differently sensitive to certain range of light, and your brain synthesizes the three inputs to think you saw a certain color.
Engineers got creative and exploits the synthesis part. They use Red, Green, and Blue colored lights to give off the impression of other colors. That’s the RGB model and ‘three primaries’ we all know and worship.
Artists care more about ‘I want color of a certain quality’ than how to make such color. Thus they arrange colors in a easier-to-navigate way. HSV, HSL exist thus. H for hue is the ‘which’ of color, S for saturation means how ‘colored’ the color is, and L for luminance/V for value defines how ‘bright’ the light is (the two are defined slightly differently).
As you might have guessed, ‘red’, ‘green’, ‘blue’ are poorly defined (what green? that green color made by your laser pointer? that green color of a certain leaf?), and since HSV/HSL is mere arithmetic of RGB, they are just as poorly defined.
Another point to ponder over: such notion is ego-centric AF. What about those who don’t decompose light exactly the same way (two compositions of light that looks the same to us won’t necessarily appear similar to them)? What about the color blinded who lack one of the primaries?
For the color blinded: you may have only ever had a Luminance (how bright) and a Saturation (how different from colorlessness i.e. ‘white’-‘grey’-‘dark’) in your world, but understand that normal human has a Ring of colorfulness (as represented by Hue) instead of two Poles. Still, use your intuition in deciding how bright and colorful, and let knowledge guide the which.
Thank you so much. That is a great help.
I have played about with the numbers but not picked up any pattern. unfortunately i am partially colour blind so struggle to notice changes
I still not understand how to determine which number gives which colour
Could you explain what HSL is?
Did you try Googling this?
H => Hue S => Saturation L => Luminosity (lightness)
The color wheel is divided into 360 hues, which can be adjusted for saturation (input percentage) and lightness (also input percentage).
Essentially the first 120 degrees are in the red spectrum, the middle 120 degrees are in the green spectrum, and the latter 120 degrees in the blue spectrum.
hsl(120, 0%, 0%)
the above will be black regardless what hue is set since saturation and lightness are both zero.
This is awesome! Thanks!
I want to know how you know the RGB and HSL numbers and what they represent. Can anyone help?
Neither do I??? Can anyone tell us where to find out information regarding this topic?
How much have your searched on this? The generalized explanation above leaves the door wide open to find greater understanding with a simple search.
I haven’t even figured out how to navigate through Codecademy’s website and if I actually posted the question properly. I’ve only had about 15 minutes on the site. Thanks for the information. I didn’t know I would need to learn about that stuff. I’m completely a beginner interested in learning.
The Welcome course uses proprietary software gleaned from somewhere else, which software implemented HSL rather than RGB, otherwise we might never be exposed to this color schema. RGB (or RGBa) is much simpler to work with since all the values have the same range, but for alpha which is between 0 and 1, inclusive.
The alpha channel relates to opacity and transparency. For now it is not critical to understand this, or the nitty-gritty technical details of color, but if you venture into graphical design it will be front and center in all your projects.
Color can be made to represent a lot of different things… Mood, excitement, passion, joy, pain, love, jealousy, vibrations, energy, sadness, and so on. Design centers around perception and human emotions, not just good looks.
I entered a color not defined, black, and the first character came out black. Added white, and the first character disappeared, presumably it is white on white so not there, but also wasn’t previously defined. Added Violet and that seem to break it though. Is black and white previously defined?
In HSL black and white are not ‘defined’ as such, they are independent of Hue and Saturation and make up the min and max of the Luminosity scale. Black at the min (L=0%), white at the max (L=100%).
I haven’t picked up the pattern either? Are certain numbers paired with certain colors?
Not in HSL, specifically. Think in terms of a cylinder. The colors are represented by HUE around the cylinder, hence 360 hues; LUMINOSITY ranging from bottom to top, darkest at bottom, and lightest at top, given in percentage of height; and SATURATION ranging from the center to the locus, increasing from inner to outer, as a percentage of radius length.
Let’s set SAT to 100% and LUM to 25%, and divide the circle into intervals of 120.
At 0 (360), 120, and 240 we find Red (#800000), Green (#008000), and Blue (#000080), respectively.
Now set LUM to 50%, and rotate 60 degrees.
At 60, 180, and 300 we find Yellow(#ff0), Cyan (#0ff), and Magenta (#f0f), respectively.
The RGB portion is guaged to perception and I could not resist portraying it that way. For both of the above, 50% LUM is what we’re after for true RGB.
360, 100%, 50% => #f00 => 255, 0, 0 120, 100%, 50% => #0f0 => 0, 255, 0 240, 100%, 50% => #00f => 0, 0, 255
So that’s how it breaks down. That’s cool.
Why assign red variables: 0, 100, 63. Everyone helps me
If we look at the post above showing the relationship between HSL and RGB we see that Red hues center around HUE=0. The 100 is a percentage of SATuration, and the 63 a percentage of LUMinosity (or lightness). The term luminosity refers to a perception of brightness.