CSS Colors

Color Formats

color: red;
background: lightblue;

color: #ff0000;
background: #3b82f6;

color: rgb(255, 0, 0);
background: rgba(59, 130, 246, 0.8);

color: hsl(0, 100%, 50%);
background: hsla(220, 91%, 60%, 0.8);

🔹 Named Colors

CSS named colors are 147 predefined keywords like red, blue, and cornflowerblue. They provide excellent readability and quick implementation for prototypes and learning. Using color: tomato; is more intuitive than a hex code. However, the limited palette can't match the millions of shades available through hex or RGB. Named colors are perfect for ensuring basic color consistency and are universally supported across all browsers. They serve as a helpful reference but are often supplemented with more precise color systems in professional projects for brand accuracy and design flexibility.

/* Basic colors */
.basic-colors {
    color: red;
    background: blue;
    border-color: green;
}

/* Extended named colors */
.extended-colors {
    color: crimson;
    background: lightsteelblue;
    border-color: mediumseagreen;
}

/* Modern named colors */
.modern-colors {
    color: rebeccapurple;
    background: lightcyan;
    border-color: darkslategray;
}

🔹 Hex Colors

Hex colors use a # followed by six digits (or three for shorthand) to define RGB values. The format #RRGGBB represents red, green, and blue from 00 to FF. Shorthand like #F0A expands to #FF00AA. This system offers access to over 16 million colors in a compact format. Hex codes are the standard for web design because they are precise, easily copied from design tools, and widely supported. They provide the exact color control needed for branding and detailed interfaces, though they are less human-readable than named colors or HSL.

/* Full hex format */
.hex-colors {
    color: #ff0000;        /* Red */
    background: #00ff00;   /* Green */
    border-color: #0000ff; /* Blue */
}

/* Shorthand hex (when digits repeat) */
.hex-shorthand {
    color: #f00;           /* Same as #ff0000 */
    background: #0f0;      /* Same as #00ff00 */
    border-color: #00f;    /* Same as #0000ff */
}

/* Modern colors with hex */
.modern-hex {
    --primary: #3b82f6;    /* Blue */
    --secondary: #10b981;  /* Green */
    --accent: #f59e0b;     /* Yellow */
    --gray: #6b7280;       /* Gray */
}

/* Hex with alpha (8 digits) */
.hex-alpha {
    background: #3b82f680; /* Blue with 50% opacity */
    border-color: #10b98140; /* Green with 25% opacity */
}

🔹 RGB and RGBA Colors

RGB defines colors with rgb(red, green, blue) values from 0-255. rgb(255, 0, 0) is pure red. RGBA adds an alpha channel for transparency: rgba(red, green, blue, alpha), where alpha ranges from 0.0 (transparent) to 1.0 (opaque). This allows for see-through effects, like rgba(0, 0, 255, 0.5) for a semi-transparent blue. RGB/RGBA is intuitive for designers familiar with channel-based color mixing and is essential for creating modern overlays, shadows, and glassmorphism effects where transparency is key.

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

/* RGBA with transparency */
.rgba-colors {
    background: rgba(59, 130, 246, 0.8);  /* 80% opacity */
    border-color: rgba(16, 185, 129, 0.5); /* 50% opacity */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 10% black shadow */
}

/* Modern RGB syntax (space-separated) */
.modern-rgb {
    color: rgb(59 130 246);           /* No commas */
    background: rgb(59 130 246 / 0.8); /* With alpha */
}

/* Dynamic RGB with CSS variables */
:root {
    --red: 59;
    --green: 130;
    --blue: 246;
}

.dynamic-rgb {
    background: rgb(var(--red), var(--green), var(--blue));
    border: 2px solid rgb(var(--red), var(--green), var(--blue), 0.5);
}

🔹 HSL and HSLA Colors

HSL uses Hue (0-360°), Saturation (0-100%), and Lightness (0-100%) to describe colors: hsl(120, 100%, 50%) is pure green. HSLA adds an alpha channel for transparency. This model is more intuitive than RGB for adjusting colors—changing lightness darkens or lightens a color predictably. It's excellent for creating color variations (like hover states) and accessible color palettes programmatically. Designers find HSL easier for brainstorming because it aligns with how we naturally think about color: picking a hue, then adjusting its intensity and brightness.

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

/* HSLA with transparency */
.hsla-colors {
    background: hsla(220, 91%, 60%, 0.8);  /* Blue with 80% opacity */
    border-color: hsla(160, 84%, 39%, 0.6); /* Green with 60% opacity */
}

/* Color variations with HSL */
.hsl-variations {
    --base-hue: 220;
    --base-sat: 91%;
    --base-light: 60%;
    
    /* Base color */
    background: hsl(var(--base-hue), var(--base-sat), var(--base-light));
    
    /* Lighter version */
    border-top: 4px solid hsl(var(--base-hue), var(--base-sat), 80%);
    
    /* Darker version */
    border-bottom: 4px solid hsl(var(--base-hue), var(--base-sat), 40%);
}

/* Modern HSL syntax */
.modern-hsl {
    color: hsl(220 91% 60%);           /* Space-separated */
    background: hsl(220 91% 60% / 0.8); /* With alpha */
}

🔹 Modern Color Features

Modern CSS introduces advanced color features for better design and accessibility. New color spaces like oklch() and display-p3 offer wider, more vibrant gamuts. Functions like color-mix() blend colors directly in CSS. Relative color syntax allows dynamic manipulation of color channels. Best practices include using system color keywords for theme consistency, ensuring WCAG contrast compliance, and leveraging CSS Custom Properties for theming. These tools enable richer, more adaptive, and performant visual designs while improving user experience across different devices and preferences.

/* CSS Custom Properties for colors */
:root {
    --primary-50: #eff6ff;
    --primary-500: #3b82f6;
    --primary-900: #1e3a8a;
    
    /* Semantic color names */
    --color-text: #1f2937;
    --color-background: #ffffff;
    --color-border: #e5e7eb;
}

/* Color-mix function (future) */
.color-mix {
    background: color-mix(in srgb, #3b82f6 70%, white);
    border-color: color-mix(in srgb, #3b82f6, black 20%);
}

/* System colors */
.system-colors {
    color: CanvasText;        /* System text color */
    background: Canvas;       /* System background */
    border-color: ButtonBorder; /* System border */
}

/* Color scheme support */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #f9fafb;
        --color-background: #111827;
        --color-border: #374151;
    }
}