CSS Color Reference

Color formats, gradients, filters, and color manipulation

Named Colors

Basic Colors

Standard color names

color: red; background: blue;

Extended Colors

Extended color palette

color: darkseagreen; background: lightcoral;

System Colors

System-defined colors

color: ButtonText; background: Canvas;

Hexadecimal

3-digit Hex

Short hex notation

color: #f00; /* red */

6-digit Hex

Full hex notation

color: #ff0000; /* red */

8-digit Hex

Hex with alpha channel

color: #ff000080; /* red with 50% opacity */

RGB/RGBA

RGB

Red, Green, Blue values

color: rgb(255, 0, 0); /* red */

RGBA

RGB with alpha channel

color: rgba(255, 0, 0, 0.5); /* red with 50% opacity */

RGB Percentage

RGB using percentages

color: rgb(100%, 0%, 0%); /* red */

HSL/HSLA

HSL

Hue, Saturation, Lightness

color: hsl(0, 100%, 50%); /* red */

HSLA

HSL with alpha channel

color: hsla(0, 100%, 50%, 0.5); /* red with 50% opacity */

HSL Degrees

Hue in degrees (0-360)

color: hsl(120deg, 100%, 50%); /* green */

Modern Color Formats

HWB

Hue, Whiteness, Blackness

color: hwb(0 0% 0%); /* red */

Lab

Lightness, a-axis, b-axis

color: lab(50% 50 50);

LCH

Lightness, Chroma, Hue

color: lch(50% 50 50);

OKLCH

Oklab Lightness, Chroma, Hue

color: oklch(50% 0.2 50);

Linear Gradients

Basic Linear

Simple linear gradient

background: linear-gradient(red, blue);

Directional

Gradient with direction

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

Angled

Gradient with angle

background: linear-gradient(45deg, red, blue);

Multiple Colors

Gradient with multiple stops

background: linear-gradient(red, yellow, green);

Color Stops

Gradient with specific stops

background: linear-gradient(red 0%, blue 100%);

Radial Gradients

Basic Radial

Simple radial gradient

background: radial-gradient(red, blue);

Circular

Circular radial gradient

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

Elliptical

Elliptical radial gradient

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

Positioned

Radial gradient with position

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

Conic Gradients

Basic Conic

Simple conic gradient

background: conic-gradient(red, blue);

From Angle

Conic gradient with start angle

background: conic-gradient(from 45deg, red, blue);

At Position

Conic gradient with center position

background: conic-gradient(from 45deg at 50% 50%, red, blue);

Color Filters

brightness()

Adjust brightness

filter: brightness(150%);

contrast()

Adjust contrast

filter: contrast(200%);

saturate()

Adjust saturation

filter: saturate(50%);

hue-rotate()

Rotate hue

filter: hue-rotate(90deg);

invert()

Invert colors

filter: invert(100%);

grayscale()

Convert to grayscale

filter: grayscale(100%);

sepia()

Apply sepia effect

filter: sepia(50%);

Blend Modes

mix-blend-mode

Blend with background

mix-blend-mode: multiply;

background-blend-mode

Blend background layers

background-blend-mode: overlay;

isolation

Create stacking context

isolation: isolate;

Common Patterns

Color Variables (CSS Custom Properties)

Using CSS custom properties for colors

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
}

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

.button:hover {
  background-color: color-mix(in srgb, var(--primary-color) 80%, black);
}

Dark Mode Support

Implementing dark mode with CSS

/* Light mode (default) */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --border-color: #e0e0e0;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
    --border-color: #404040;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

Gradient Text Effect

Creating gradient text with background-clip

.gradient-text {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Color Palette Generator

CSS for generating color palettes

.color-palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.color-swatch {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 2px solid #e0e0e0;
}

.color-swatch:nth-child(1) { background-color: hsl(0, 100%, 50%); }
.color-swatch:nth-child(2) { background-color: hsl(60, 100%, 50%); }
.color-swatch:nth-child(3) { background-color: hsl(120, 100%, 50%); }
.color-swatch:nth-child(4) { background-color: hsl(180, 100%, 50%); }
.color-swatch:nth-child(5) { background-color: hsl(240, 100%, 50%); }