hex, rgb() & hsl()

CSS supports multiple color formats: hex (#RRGGBB), rgb(red, green, blue), and hsl(hue, saturation, lightness). Each has advantages: hex is compact, rgb is intuitive, hsl is easy to adjust.

Color Formats

CSS

/* Hex colors */
.element {
  color: #ff0000;      /* Red */
  color: #0f0;         /* Green (short form) */
  color: #0000ff80;    /* Blue with 50% alpha */
}

/* RGB colors */
.element {
  color: rgb(255, 0, 0);        /* Red */
  color: rgba(0, 255, 0, 0.5);  /* Green, 50% transparent */
}

/* HSL colors */
.element {
  color: hsl(0, 100%, 50%);      /* Red */
  color: hsla(120, 100%, 50%, 0.5); /* Green, 50% transparent */
}

Color Format Comparison

Format	Example	Advantage
Hex	#ff0000	Compact, widely used
RGB	rgb(255,0,0)	Intuitive channels
HSL	hsl(0,100%,50%)	Easy to adjust brightness

CSS

/* Creating color variations */

/* With HSL */
.primary {
  background: hsl(200, 80%, 50%);  /* Blue */
}

.primary-light {
  background: hsl(200, 80%, 70%);  /* Lighter blue */
}

.primary-dark {
  background: hsl(200, 80%, 30%);  /* Darker blue */
}

/* With RGB */
.overlay {
  background: rgba(0, 0, 0, 0.5);  /* Black, 50% transparent */
}

/* With Hex */
.brand {
  color: #0066cc;
}

Note

Hex is compact and common. RGB is intuitive. HSL makes color variations easy. Use alpha channels (rgba, hsla) for transparency.

Background colors: [background-color](/css/background-color).