CSS Colors

Learn how to work with colors in CSS using various color systems and values

What are CSS Colors?

CSS provides several ways to specify colors for text, backgrounds, borders, and other elements. Understanding the different color formats and when to use them is essential for web design.

Color Properties:

  • color - Sets the text color of an element
  • background-color - Sets the background color of an element
  • border-color - Sets the color of an element's border
  • outline-color - Sets the color of an element's outline
  • text-decoration-color - Sets the color of text decorations
  • column-rule-color - Sets the color of the rule between columns
  • caret-color - Sets the color of the cursor in inputs and textareas
RGB
HEX
HSL
Named
CSS Colors

CSS Color Properties Reference

PropertyDescriptionValues
colorSets the color of text and text decorationsAny valid color value
background-colorSets the background color of an elementAny valid color value
border-colorSets the color of an element's borderAny valid color value
outline-colorSets the color of an element's outlineAny valid color value
text-decoration-colorSets the color of text decorationsAny valid color value
column-rule-colorSets the color of the rule between columnsAny valid color value
caret-colorSets the color of the cursor in inputsAny valid color value

CSS Colors in Action

Example Code

/* CSS Color Values and Properties */

/* Named colors */
.element {
  color: red;
  background-color: blue;
  border-color: green;
}

/* Hexadecimal values */
.hex {
  color: #ff0000;        /* Red */
  background: #00ff00;   /* Green */
  border: #0000ff;       /* Blue */
}

/* RGB values */
.rgb {
  color: rgb(255, 0, 0);           /* Red */
  background: rgb(0, 255, 0);      /* Green */
  border: rgb(0, 0, 255);          /* Blue */
}

/* RGBA values (with transparency) */
.rgba {
  color: rgba(255, 0, 0, 0.5);     /* Semi-transparent red */
  background: rgba(0, 255, 0, 0.3); /* Light green with transparency */
}

/* HSL values */
.hsl {
  color: hsl(0, 100%, 50%);        /* Red */
  background: hsl(120, 100%, 50%); /* Green */
  border: hsl(240, 100%, 50%);     /* Blue */
}

/* HSLA values (with transparency) */
.hsla {
  color: hsla(0, 100%, 50%, 0.5);  /* Semi-transparent red */
  background: hsla(120, 100%, 50%, 0.3); /* Light green with transparency */
}

/* CurrentColor keyword */
.current-color {
  color: blue;
  border: 2px solid currentColor; /* Border uses same color as text */
}

/* Transparent keyword */
.transparent {
  background-color: transparent;
  border: 1px solid transparent;
}

/* Color functions */
.color-functions {
  background-color: color-mix(in srgb, red 30%, blue 70%);
  color: color(display-p3 1 0.5 0);
}

/* Gradient backgrounds */
.gradient {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  background: radial-gradient(circle, red, yellow, green);
}

/* System colors */
.system {
  color: ButtonText;
  background-color: ButtonFace;
  border-color: ActiveBorder;
}

/* Color manipulation with CSS variables */
:root {
  --primary-color: #3498db;
  --primary-light: color-mix(in srgb, var(--primary-color) 20%, white);
  --primary-dark: color-mix(in srgb, var(--primary-color) 20%, black);
}

.dynamic-colors {
  background-color: var(--primary-color);
  color: var(--primary-light);
  border-color: var(--primary-dark);
}

Color Values in Detail

Named Colors

CSS provides 140+ named colors that are easy to remember and use.

color: red;
background-color: blue;
border-color: green;

Hexadecimal Values

Hexadecimal colors are specified with #RRGGBB, where RR, GG, and BB are hexadecimal values (00-FF).

color: #ff0000; /* Red */
background: #00ff00; /* Green */
border: #0000ff; /* Blue */

RGB and RGBA Values

RGB defines colors using Red, Green, and Blue components (0-255). RGBA adds an Alpha channel for transparency (0-1).

color: rgb(255, 0, 0);
background: rgba(0, 255, 0, 0.5);
border: rgb(0, 0, 255);

HSL and HSLA Values

HSL defines colors using Hue (0-360), Saturation (0-100%), and Lightness (0-100%). HSLA adds an Alpha channel for transparency (0-1).

color: hsl(0, 100%, 50%);
background: hsla(120, 100%, 50%, 0.5);
border: hsl(240, 100%, 50%);

Special Keywords

currentColor

Represents the value of an element's color property.

.element {
color: blue;
border: 2px solid currentColor;
}

transparent

Fully transparent color (equivalent to rgba(0,0,0,0)).

.element {
background-color: transparent;
border: 1px solid transparent;
}

Color Functions

color-mix()

The color-mix() function allows you to mix two colors in a specified color space.

.mixed {
background-color: color-mix(in srgb, red 30%, blue 70%);
}

color()

The color() function allows specifying colors in different color spaces.

.wide-gamut {
color: color(display-p3 1 0.5 0);
}

Supported color spaces:

  • srgb
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020

Gradients

Linear Gradient

background: linear-gradient(to right, red, blue);

Radial Gradient

background: radial-gradient(circle, red, blue);

Conic Gradient

background: conic-gradient(red, blue);

Practical Color Examples

Color Schemes with CSS Variables

:root {
--primary: #3498db;
--secondary: #e74c3c;
--accent: #f39c12;
--light: #ecf0f1;
--dark: #2c3e50;
}

.btn-primary {
background-color: var(--primary);
color: white;
}

Dark Mode with CSS Variables

:root {
--text-color: #333;
--bg-color: #fff;
}

@media (prefers-color-scheme: dark) {
:root {
--text-color: #fff;
--bg-color: #333;
}
}

.theme-aware {
color: var(--text-color);
background: var(--bg-color);
}

Accessible Color Contrast

/* Good contrast */
.good-contrast {
color: black;
background: white; /* Contrast ratio: 21:1 */
}

/* Poor contrast */
.poor-contrast {
color: lightgray;
background: white; /* Contrast ratio: 1.5:1 */
}
Good contrast example (black on white)
Poor contrast example (light gray on white)
< PreviousNext >