Check out a free preview of the full Dynamic CSS with Custom Properties (aka CSS Variables) course

The "Colors Solution" Lesson is part of the full, Dynamic CSS with Custom Properties (aka CSS Variables) course featured in this preview video. Here's what you'd learn in this lesson:

Lea walks through the solution to the colors exercise.


Transcript from the "Colors Solution" Lesson

>> All right, so now that we've had some time to think about this, let's look at how it would work. So here we have a fixed color. Its hue is fixed at zero, which means red. And what we actually want is for the hue to be 50, which is a warm yellow when the intensity is one.

And we want it to be zero, which is pure red, when the intensity is five to communicate that this was a stronger migraine. And let's not worry for now about the migraines that don't have an intensity at all. So we would need to use a calculation here with our intensity.

And let's think about this for a second. So if we want 50 when the intensity is one, then we would need to multiply it with something and subtract it from something else cuz we wanted to decrease as the intensity grows bigger. So let's start with 60. Let's multiply the intensity by 10.

And that actually works pretty much. So when the intensity is five, we get 60 minus 50, which gives us 10. Let's make this 50. Then when the intensity is five, we get zero. And when the intensity is one, we get 40. So I think that's actually okay. We could change the numbers a little bit to get a range of 0 to 50, but it's not gonna look as nice, so let's go with that.

Now how do we go with a completely different hue for migraines that don't have an intensity at all? We can provide a fallback for the intensity, but it's actually some intensive math to figure out how to get, for example, 200, which is blue. Well, it's actually turquoise, but we would need to figure out what to add.

And then we would divide and that sort of thing. Wouldn't it be nice if we were able to provide the fallback for the entire calculation instead of just the fallback for intensity? We can actually do that. We can use a separate variable for the hue, which would also make it easier to read.

And then we move the calculation here, and we call hue here. And then we just say whatever hue we want for migraines that don't have an intensity at all. And if we want a different saturation and lightness as well, we could do that, too. We would just use a variable for the entire color.

And then we would provide a fallback color. So what are main takeaways from this? We can use variables to set color components to create dynamic palettes. And we can provide a fallback for an entire calculation through an intermediate variable. This is not just useful for colors, it's useful more generally.

Anytime we want to provide a fallback for an entire calculation, we could either try to solve for x essentially and figure out what value we need to provide as a fallback for our variable. Or we can just use an intermediate variable and provide the fallback right there, which is more readable as well.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now