Exploring Colors in CSS

<p>Mastering CSS Colors: A Comprehensive Guide

<p>In the previous lesson, we explored CSS selectors. Now, let's build upon that knowledge by learning how to manipulate the appearance of selected elements, starting with color modification. This guide covers various methods for defining colors in CSS, including color names, HEX codes, RGB values, and HSL formats.

<p>As previously shown, after selecting an HTML element (e.g., a <p> paragraph), you can modify its text color using the color property:

p {
  color: red;
}

<p>Similarly, the background-color property changes the element's background:

p {
  background-color: darkorange;
}

<p>While CSS supports common color names like "red" and "darkorange," it doesn't encompass every possible hue. For precise color control, RGB, HEX, and HSL color models offer greater flexibility.

RGB Color Model

<p>RGB (Red, Green, Blue) forms the basis of color representation in computer systems. Mixing these three primary colors generates a wide spectrum of hues. The rgb() function defines RGB colors:

rgb(<red>, <green>, <blue>)

<p>Each parameter (red, green, blue) accepts an integer value between 0 and 255, representing the intensity of each color component. 0 indicates the weakest intensity, and 255 the strongest. For instance:

p {
  color: rgb(255, 0, 0); /* Equivalent to color: red; */
}

<p>Combining different intensities creates diverse colors:

p {
  color: rgb(168, 189, 45);
}

<p>A color picker tool is highly recommended for selecting RGB values visually, as it's challenging to predict the resulting color from numerical values alone.

<p>

<p>The rgba() function extends rgb() by adding an alpha channel:

rgba(<red>, <green>, <blue>, <alpha>)

<p>The alpha parameter (0.0 to 1.0) controls transparency; 0.0 is fully transparent, and 1.0 is fully opaque:

p {
  color: rgba(167, 189, 45, 0.408);
}

<p>

HEX Color Model

<p>HEX colors use hexadecimal notation:

#rrggbb

<p>The # symbol precedes the six-digit hexadecimal code. Each pair (rr, gg, bb) represents the red, green, and blue components, respectively, ranging from 00 (0 decimal) to ff (255 decimal). For example:

p {
  color: #ff0000; /* Equivalent to color: rgb(255, 0, 0); and color: red; */
}

<p>Transparency can be added using eight-digit HEX codes:

#rrggbbaa

<p>aa represents the alpha channel (00 to ff, mapping to 0.0 to 1.0).

p {
  color: #a7bd2d68;
}

<p>This is equivalent to rgba(167, 189, 45, 0.408).

<p>

HSL Color Model

<p>HSL (Hue, Saturation, Lightness) is a color model familiar to graphic designers. The hsl() function uses:

p {
  color: red;
}

<p>hue represents the color's position on the color wheel (0 to 360 degrees).

<p>

<p>saturation (0% to 100%) indicates the color's intensity (0% is gray, 100% is full color).

<p>

<p>lightness (0% to 100%) determines the amount of black or white added (0% is black, 100% is white).

<p>

<p>hsla() adds an alpha channel for transparency:

p {
  background-color: darkorange;
}

rgb(<red>, <green>, <blue>)

<p>This is equivalent to #a7bd2d68 and rgba(167, 189, 45, 0.408).

Further Exploration

• Creating Multi-column Layouts with CSS
• Mastering CSS Grid Layouts
• Building Flexbox Layouts with CSS

The above is the detailed content of Exploring Colors in CSS. For more information, please follow other related articles on the PHP Chinese website!