feat(curriculum): add images to color theory lesson (#63975)

curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672aa7678e05e35d42e33522.md

@@ -11,32 +11,60 @@ Color theory is the study of how colors interact with each other and how they af
 
 Primary colors, yellow, blue, and red, are the fundamental hues from which all other colors are derived.
 
-Secondary colors result from mixing equal amounts of two primary colors. Green, orange, and purple are examples of secondary colors. For example, green is the result of combining yellow and blue.
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/lecture-what-is-color-theory-in-design-1.png" alt="Color classification diagram" />
+
+Secondary colors result from mixing equal amounts of two primary colors. Green, orange, and purple are examples of secondary colors.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/lecture-what-is-color-theory-in-design-2.png" alt="Primary colors diagram" />
+
+For example, green is the result of combining yellow and blue.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/lecture-what-is-color-theory-in-design-3.png" alt="Secondary colors diagram" />
 
 Tertiary colors result from combining a primary color with a neighboring secondary color. Yellow-Green, Blue-Green, and Blue-Violet, are examples of tertiary colors.
 
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/lecture-what-is-color-theory-in-design-4.png" alt="Green color mixing example" />
+
 This is a fundamental classification in the world of color theory, but there are other ways to classify colors. They can be classified as warm or cool, based on their temperature.
 
-Warm colors, like reds, oranges, and yellows, evoke feelings of comfort, warmth, and coziness. Cool colors, like blues, green, and purples, evoke feelings of calmness, serenity, and professionalism.
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/lecture-what-is-color-theory-in-design-5.png" alt="Warm and cool colors diagram" />
+
+Warm colors, like reds, oranges, and yellows, evoke feelings of comfort, warmth, and coziness.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/lecture-what-is-color-theory-in-design-6.png" alt="Warm colors examples" />
+
+Cool colors, like blues, green, and purples, evoke feelings of calmness, serenity, and professionalism.
 
 Colors can also be represented through color models. They are essential for describing and reproducing colors in a standard way. Frequently used color models include the RGB model, the HSV model, and the HSL model. They represent colors based on different properties. You will learn more about them in future lessons.
 
-Great. Now that you know more about this, let's talk about a fundamental tool that designers use to represent colors and their relationships. The color wheel is a circular diagram that shows how colors relate to each other. It's an essential tool for designers because it helps them to select color combinations. This is very helpful for creating color palettes and color schemes.
+Great. Now that you know more about this, let's talk about a fundamental tool that designers use to represent colors and their relationships.
+
+The color wheel is a circular diagram that shows how colors relate to each other. It's an essential tool for designers because it helps them to select color combinations. This is very helpful for creating color palettes and color schemes.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/lecture-what-is-color-theory-in-design-7.png" alt="Color wheel diagram" />
 
 A color scheme is the set of colors chosen for a specific design or project. They are usually based on the principles of color theory. By understanding the relationships between colors on the wheel, you can develop different types of color schemes. Let's see some of them.
 
 Analogous color schemes create cohesive and soothing experiences. They have analogous colors, which are adjacent to each other in the color wheel.
 
+<!-- <img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/lecture-what-is-color-theory-in-design-8.png" alt="Analogous color scheme example" /> -->
+
 Complementary color schemes create high contrast and visual impact. Their colors are located on the opposite ends of the color wheel, relative to each other.
 
 Color contrast is essential for web accessibility. It ensures that text and other important elements are clearly distinguishable from their background. This is especially important for people with visual disabilities.
 
 In an RGB color wheel, complementary colors are located at the opposite ends of the wheel. For example, magenta is complementary to green and blue is complementary to yellow and so on.
 
+<!-- <img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/lecture-what-is-color-theory-in-design-9.png" alt="RGB color wheel with complementary colors" /> -->
+
 A triadic color scheme has vibrant colors. They are made from colors that are approximately equidistant from each other. If they are connected, they form an equilateral triangle on the color wheel.
 
+<!-- <img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/lecture-what-is-color-theory-in-design-10.png" alt="Triadic color scheme example" /> -->
+
 And finally, we have the monochromatic color scheme. In this color scheme, all the colors are derived from the same base color by adjusting its lightness, darkness, and saturation. This evokes a feeling of unity and harmony while still creating contrast.
 
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/lecture-what-is-color-theory-in-design-11.png" alt="Monochromatic color scheme example" />
+
 And finally, here are some tips for using color effectively in web development:
 
 - Create a color scheme that defines your website's branding.