Skip to content
Internet Programming
GitHub
Next
CSS Variables

Working with CSS Colors

Switch to Zen Mode

🎨 Color Values in CSS

Section titled “🎨 Color Values in CSS”

CSS provides several ways to define colors ↗, including keywords (aka named colors), hexadecimal values, RGB, RGBA, HSL, HSLA, and CSS Color Functions.

1. Named Colors (Keywords)

Section titled “1. Named Colors (Keywords)”

CSS supports over 140 predefined color names. Examples include:

color: red;
background-color: lightblue;
border-color: goldenrod;
css

Common color names:

  • red, blue, green, yellow, black, white, gray, orange, purple, etc.

2. RGB and RGBA (Additive Color Model)

Section titled “2. RGB and RGBA (Additive Color Model)”

The RGB color model uses the combination of red, green, and blue light to create other colors.

  • RGB (Red, Green, Blue) defines a color based on the intensity of the red, green, and blue channels, with each component ranging from 0 to 255.
  • RGBA (Red, Green, Blue, Alpha) is like RGB but includes an alpha channel for transparency (range 0 to 1).
color: rgb(255, 87, 51); /* RGB format */
background-color: rgba(0, 123, 255, 0.5); /* Semi-transparent blue */
css

3. Hexadecimal Values

Section titled “3. Hexadecimal Values”

A hex color is defined using a 6-digit code. It starts with a # followed by three pairs of hex digits (from 00 to FF), representing the red, green, and blue components of the color.

color: #ff5733; /* orange-ish */
background-color: #4CAF50; /* green */
css
  • Short Hex Syntax: You can use a shorthand notation for hex colors when each pair of digits is the same.
    For example: 
    color: #f00; /* Equivalent to #ff0000 */
    color: #0f0; /* Equivalent to #00ff00 */
    css

4. HSL and HSLA

Section titled “4. HSL and HSLA”
  • HSL ↗ (Hue, Saturation, Lightness) is a cylindrical color model where colors are defined by their hue (0 to 360 degrees), saturation (0% to 100%), and lightness (0% to 100%).
  • HSLA adds an alpha channel to HSL for transparency.
  • Hue: 0° to 360° (corresponding to colors on the color wheel).
  • Saturation: 0% (gray) to 100% (full color).
  • Lightness: 0% (black) to 100% (white).
  • The advantage of HSL is that it aligns with how humans perceive and choose colors.
color: hsl(120, 100%, 50%); /* Green color */
background-color: hsla(210, 100%, 50%, 0.3); /* Semi-transparent blue */
css

⛽ CSS Color Functions

Section titled “⛽ CSS Color Functions”
  • rgb(), rgba(), hsl(), hsla(): These are the functional syntax for RGB and HSL values.
  • currentColor: Refers to the current color of the element (the current value of the color property.), used in properties like border or box-shadow. 
    border: 1px solid currentColor;
    css

🔠 CSS Variables

Section titled “🔠 CSS Variables”

CSS Variables (custom properties) allow you to define reusable color values. This improves maintainability and consistency.

:root {
  --primary-color: #3498db;
  --secondary-color: rgba(52, 152, 219, 0.5);
}


button {
  background-color: var(--primary-color);
}


p {
  color: var(--secondary-color);
}
css

💹 Backgrounds and Gradients

Section titled “💹 Backgrounds and Gradients”

Solid Background Colors

Section titled “Solid Background Colors”

You can define simple background colors for elements using any of the color methods mentioned above:

div {
  background-color: #f0f0f0; /* Light gray background */
}
css

Linear Gradients

Section titled “Linear Gradients”

A linear gradient ↗ is a smooth transition between two or more colors, either horizontally, vertically, or at an angle.

background: linear-gradient(to right, #ff7e5f, #feb47b);
css
  • Syntax: linear-gradient(direction, color1, color2, ...)
  • Angle: You can specify the direction of the gradient with angles (e.g., 45deg).

Radial Gradients

Section titled “Radial Gradients”

Radial gradients ↗ radiate from a central point, creating a circular or elliptical color transition.

background: radial-gradient(circle, #ff7e5f, #feb47b);
css
  • Syntax: radial-gradient(shape, color1, color2, ...)

⚡ Working with Opacity

Section titled “⚡ Working with Opacity”

Opacity Property

Section titled “Opacity Property”

To change the transparency of an element, you can use the opacity property, which takes values from 0 (fully transparent) to 1 (fully opaque).

img {
  opacity: 0.5; /* 50% opacity */
}
css

Alpha Channel in Colors (RGBA, HSLA)

Section titled “Alpha Channel in Colors (RGBA, HSLA)”

The alpha channel in rgba() and hsla() functions allows you to define transparency along with the color.

background-color: rgba(255, 87, 51, 0.3); /* 30% opacity */
css

Color Functions for Advanced Design

Section titled “Color Functions for Advanced Design”

mix() Function

Section titled “mix() Function”

The mix() function blends two colors. This is available in some modern CSS engines or through preprocessors like Sass ↗.

background-color: mix(#ff0000, #0000ff, 50%);
scss

color() Function

Section titled “color() Function”

The color() function allows you to apply color adjustments dynamically (e.g., using color-mod() for changing hue, saturation, or brightness).

Color Contrast and Accessibility

Section titled “Color Contrast and Accessibility”

Ensuring good contrast between text and background is crucial for accessibility. WCAG (Web Content Accessibility Guidelines) suggests that the contrast ratio should be at least 4.5:1 for normal text and 3:1 for large text.