CSS Basics

CSS Colors

Work with CSS colors using hex codes, RGB, HSL, and modern color functions.

CSS Colors

Colors in CSS can be specified using different color notations:

  • Named colors: red, blue, coral, etc. (140+ named colors)
  • HEX: #RRGGBB or #RGB
  • RGB: rgb(red, green, blue)
  • RGBA: rgba(red, green, blue, alpha) — with transparency
  • HSL: hsl(hue, saturation, lightness)
  • HSLA: hsla(hue, saturation, lightness, alpha)
  • oklch (modern): Better perceptual uniformity

Color Theory for Developers

  • Hue: The type of color (0-360°)
  • Saturation: Intensity (0% = gray, 100% = vivid)
  • Lightness: Brightness (0% = black, 100% = white)

CSS Gradients

CSS supports linear gradients, radial gradients, and conic gradients.

Example

css
/* Named colors */
h1 { color: tomato; }
body { background-color: ghostwhite; }

/* HEX colors */
.primary { color: #6C5CE7; }
.secondary { color: #00D2FF; }
.muted { color: #A0A0B0; }

/* RGB / RGBA */
.overlay { background: rgba(0, 0, 0, 0.5); }
.highlight { background: rgba(108, 92, 231, 0.15); }

/* HSL / HSLA - great for theming */
:root {
  --hue: 255;
  --primary: hsl(var(--hue), 72%, 68%);
  --primary-dark: hsl(var(--hue), 72%, 30%);
  --primary-light: hsl(var(--hue), 72%, 95%);
}

/* Gradients */
.hero {
  background: linear-gradient(135deg, #6C5CE7, #00D2FF);
}
.card {
  background: radial-gradient(circle at top right,
    rgba(108,92,231,0.1), transparent);
}

/* Opacity */
.faded { opacity: 0.5; }
.transparent { color: rgba(240,240,245,0.7); }
Try it yourself — CSS