FAQ: Welcome to Codecademy! - Multiple Colors


#1

This community-built FAQ covers the “Multiple Colors” exercise from the lesson “Welcome to Codecademy!”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development
Code Foundations

Welcome to Codecademy!

FAQs on the exercise Multiple Colors

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!


#2

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.


#3

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.


#4

Thank you so much. That is a great help.


#5

I have played about with the numbers but not picked up any pattern. unfortunately i am partially colour blind so struggle to notice changes


#6

I still not understand how to determine which number gives which colour


#8

Could you explain what HSL is?


#9

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.


#10

This is awesome! Thanks!


#11

I want to know how you know the RGB and HSL numbers and what they represent. Can anyone help?


#12

Neither do I??? Can anyone tell us where to find out information regarding this topic?


#13

How much have your searched on this? The generalized explanation above leaves the door wide open to find greater understanding with a simple search.

https://www.ecosia.org/search?q=color+wheel+hsl

https://en.wikipedia.org/wiki/HSL_and_HSV


#14

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.


#15

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.