The Color Palette

A Wild Dance of Light and Shadow

Behind the magical world of CSS lies an arsenal of colors that would make even the boldest alchemist envious. With every click on the color picker, you mix like a wizard brewing potions, creating color models that let your website shine in an entirely new light. Each color carries its own little magic, with the power to transform the mood of your site — be it somber, cheerful, or somewhere in between.

With a touch of skill, you can harmoniously combine colors. Every decision you make is like a brushstroke on a canvas, not only touching the hearts of your visitors but also ensuring everything is effortlessly readable. Nothing captivates visitors more than a well-placed burst of color.

Let’s Keep Going

Hexadecimal
HTML Colors

RGB
HSL

The Magic of CSS Color Models

A Guide for Aspiring Artists

Hexadecimal

Hexadecimal (Hex)

An ancient color spell composed of six mysterious characters made of numbers and letters. Every Hex color begins with a #, followed by six characters that capture the magic of Red, Green, and Blue. FF brings radiant brilliance, while 00 summons shadowy darkness.

.primary {
    color: #FF0000;
}

A red text color

Hexadecimal with Alpha
An advanced version of the Hex spell that introduces transparency. Two additional characters at the end define the level of opacity, ranging from 00 (completely invisible) to FF (fully opaque). Perfect for subtle visual effects where colors softly fade in or out.

.primary {
    color: #FF573380;
}

A semi-transparent orange

HTML Color Names

HTML-Colors

The most common colors, controlled as if by magic with a single word. These named colors are ideal for your first magical forays into web design. They are easy to remember and provide a quick way to transform your website’s appearance. A complete list can be found at the W3Schools “School of Wizardry

.primary {
    color: red;
}

A red text color

RGB

RGB (Red, Green, Blue)

A powerful spell that mixes the light of red, green, and blue in precise intensities to create an almost infinite palette of colors. Each component is represented by a number from 0 to 255, corresponding to the intensity of red, green, and blue: RRR GGG BBB.

.primary {
    color: rgb(255, 87, 51);
}

A vibrant orange tone

RGBA (Red, Green, Blue, Alpha)
The RGBA spell adds a fourth component to the RGB model: the alpha channel. This controls the transparency of your colors, allowing them to shimmer or fade when needed. The alpha value ranges from 0 (completely invisible) to 1 (fully opaque).

.primary {
    color: rgba(255, 87, 51, 0.5);
}

A semi-transparent orange

HSL

HSL (Hue, Saturation, Lightness)

A sophisticated color spell that defines colors based on their hue, saturation, and lightness. The hue is mapped on a magical circle from 0 to 360 degrees, while saturation and lightness determine the color’s intensity and brightness in percentages.

.primary {
    color: hsl(14, 100%,60%);
}

Once again, the same vibrant orange tone

HSLA (Hue, Saturation, Lightness, Alpha)
Just like RGBA, the HSLA spell adds the alpha channel to the HSL model. This gives your colors depth and mystical transparency, making them appear even more vivid and alive.

.primary {
    color: hsla(14, 100%, 60%,0.5);
}

A semi-transparent orange

In this lesson, you have learned…

How to define colors using hexadecimal values to precisely control red, green, and blue channels.
Why RGB and RGBA are flexible for creating colors with custom levels of transparency.
How to use the HSL and HSLA color models to control color based on hue, saturation, and lightness.
When to use named HTML colors to quickly apply simple colors without numeric values.
How transparency works with rgba and hsla to create fading effects or layer colors over other elements.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

The Secret of the Elixirs

In Eldria’s alchemy workshop, a master of colors and potions, lies a collection of elixirs that can only be activated with the correct color codes. Use your knowledge of color formats to color the elixirs and unlock their magical properties.

Your Task: Applying Color Codes

Hexadecimal Colors:
- Assign a hexadecimal color to the .hex class, e.g., #8e44ad.
- Question: What happens if you add an alpha value, e.g., #8e44ad80? How does the transparency of the elixir change?
HTML Color Names:
- Change the background color of the .hex elixir to goldenrod.
- Question: What are the advantages of HTML color names compared to other formats, and why are they sometimes less flexible?
RGB and RGBA:
- Use an RGB code for the .rgba class (e.g., rgb(233, 30, 99)), and then test an RGBA value with transparency (e.g., rgba(233, 30, 99, 0.6)).
- Question: How does the alpha value affect the color, and why is transparency often useful for design elements?
HSL and HSLA:
- Assign an HSL color to the .hsl class (e.g., hsl(300, 50%, 50%)).
- Test a transparent version with HSLA (e.g., hsla(300, 50%, 50%, 0.5)).
- Question: What are the advantages of HSL compared to RGB, and how do hue, saturation, and lightness help control colors more effectively?
Combinations and Experiments:
- Experiment with various color combinations in all formats. Test different alpha values and observe how they impact the appearance of the elixirs.
Summary and Reflection:
- Write a short explanation of the different color formats and their use in CSS. Which formats do you prefer, and why?

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

CSS

.hex {
    background-color: #8e44ad;
    background-color: goldenrod;
}

.rgba {
    background-color: rgb(233, 30, 99);
}

.hsl {
    background-color: hsl(30, 50%, 50%);
}

Let’s Keep Going