CSS Colors and Gradients Guide

CSS supports several color formats:

Color Keywords

red

color: red;

CSS provides 140+ predefined color names.

Hexadecimal (Hex)

#3498db

color: #3498db;
color: #36c; /* Shorthand */

Six-digit (or three-digit shorthand) hex values.

RGB / RGBA

rgb(52, 152, 219)

color: rgb(52, 152, 219);
color: rgba(52, 152, 219, 0.7);

Red, Green, Blue values (0-255) with optional Alpha transparency (0-1).

HSL / HSLA

hsl(204, 70%, 53%)

color: hsl(204, 70%, 53%);
color: hsla(204, 70%, 53%, 0.7);

Hue (0-360), Saturation, Lightness with optional Alpha.

Modern CSS Color Syntax

/* Modern RGB Syntax */
color: rgb(52 152 219);         /* Space-separated values */
color: rgb(52 152 219 / 0.7);   /* Alpha with slash */

/* Modern HSL Syntax */
color: hsl(204 70% 53%);        /* Space-separated values */
color: hsl(204 70% 53% / 0.7);  /* Alpha with slash */

The modern CSS Color Module Level 4 adds support for new color functions and formats. Note that HEX color values can also include alpha transparency as an 8-digit hex code: #3498dbCC (where CC is the alpha value).

Primary Color with Tints and Shades

Creating tints (lighter) and shades (darker) from a base color:

Base Color

#3498db

Tints (Lighter)

Tint 1 (20%)

Tint 2 (40%)

Tint 3 (60%)

Tint 4 (80%)

Shades (Darker)

Shade 1 (20%)

Shade 2 (40%)

Shade 3 (60%)

Shade 4 (80%)

You can generate tints by mixing a color with white and shades by mixing a color with black. These can be created using color functions or pre-calculated values.

Color Scheme Types

Monochromatic

1

2

3

4

5

Variations of a single color, using different tints, tones, and shades.

Analogous

1

2

3

4

5

Colors that are adjacent to each other on the color wheel.

Complementary

1

2

3

4

5

Colors opposite each other on the color wheel, creating high contrast.

Triadic

1

2

3

Three colors equally spaced on the color wheel, creating a balanced look.

Split Complementary

1

2

3

A base color and two colors adjacent to its complement, providing balance with less tension.

Gradients allow smooth transitions between colors, creating visual depth and interest.

Linear Gradients

Basic Linear Gradient (Left to Right)

background: linear-gradient(to right, #3498db, #2ecc71);

Linear Gradient with Multiple Colors

background: linear-gradient(to right, #3498db, #2ecc71, #f1c40f, #e74c3c);

Angled Linear Gradient

background: linear-gradient(45deg, #3498db, #2ecc71);

You can specify angles (0deg, 45deg, 90deg, etc.) or directions (to top, to right, to bottom left, etc.).

Radial Gradients

Radial Gradient

background: radial-gradient(circle, #3498db, #2ecc71);

Radial gradients radiate from a center point, in a circular or elliptical shape.

Conic Gradients

Conic Gradient

background: conic-gradient(from 45deg, #3498db, #2ecc71, #f1c40f, #e74c3c, #3498db);

Conic gradients transition around a center point rather than radiating from it.

Advanced Gradient Techniques

Repeating Linear Gradient

background: repeating-linear-gradient(
  45deg,
  #3498db,
  #3498db 10px,
  #2ecc71 10px,
  #2ecc71 20px
);

Repeating Radial Gradient

background: repeating-radial-gradient(
  circle,
  #3498db,
  #3498db 10px,
  #2ecc71 10px,
  #2ecc71 20px
);

Color Stops with Specific Positions

background: linear-gradient(
  to right,
  #3498db 0%,
  #3498db 20%,
  #2ecc71 20%,
  #2ecc71 40%,
  #f1c40f 40%,
  #f1c40f 60%,
  #e74c3c 60%,
  #e74c3c 80%,
  #9b59b6 80%,
  #9b59b6 100%
);

Hard Color Stop

background: linear-gradient(
  to right,
  #3498db 50%,
  #e74c3c 50%
);

When two color stops have the same position, they create a hard edge rather than a gradient.

Creative Uses of Gradients

Gradient Text

.gradient-text {
  background: linear-gradient(to right, #3498db, #e74c3c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Gradient Border

Content with gradient border

.gradient-border {
  border: 5px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image: 
    linear-gradient(white, white), 
    linear-gradient(to right, #3498db, #e74c3c);
}

CSS Variables (Custom Properties) allow you to define reusable colors and create cohesive, maintainable color systems.

Defining Color Variables

:root {
  --color-primary: #3498db;
  --color-secondary: #2ecc71;
  --color-tertiary: #f1c40f;
  --color-quaternary: #e74c3c;
  --color-quinary: #9b59b6;
  
  --color-text: #333333;
  --color-background: #ffffff;
  --color-border: #dddddd;
  
  --color-success: #2ecc71;
  --color-warning: #f39c12;
  --color-danger: #e74c3c;
  --color-info: #3498db;
}

Using Color Variables

Primary and Secondary Colors

--color-primary

--color-secondary

.element {
  background-color: var(--color-primary);
  color: white;
  border: 1px solid var(--color-secondary);
}

Semantic Colors

--color-success

--color-danger

.success-message {
  color: var(--color-success);
}

.error-message {
  color: var(--color-danger);
}

Creating Color Themes

Light Theme

This is text in the light theme.

Dark Theme

This is text in the dark theme.

/* Light Theme */
.color-theme-light {
  --theme-background: #ffffff;
  --theme-text: #333333;
  --theme-primary: #3498db;
  --theme-secondary: #2ecc71;
  --theme-accent: #e74c3c;
}

/* Dark Theme */
.color-theme-dark {
  --theme-background: #2c3e50;
  --theme-text: #ecf0f1;
  --theme-primary: #3498db;
  --theme-secondary: #2ecc71;
  --theme-accent: #e74c3c;
}

/* Components use theme variables */
.theme-button-primary {
  background-color: var(--theme-primary);
  color: white;
}

There are multiple ways to control transparency in CSS:

Opacity Property

Opacity Values

opacity: 1

opacity: 0.75

opacity: 0.5

opacity: 0.25

.opacity-100 { opacity: 1; }
.opacity-75 { opacity: 0.75; }
.opacity-50 { opacity: 0.5; }
.opacity-25 { opacity: 0.25; }

The opacity property affects the entire element, including its children.

RGBA Color

rgba(52, 152, 219, 1)

rgba(52, 152, 219, 0.75)

rgba(52, 152, 219, 0.5)

rgba(52, 152, 219, 0.25)

.rgba-100 { background-color: rgba(52, 152, 219, 1); }
.rgba-75 { background-color: rgba(52, 152, 219, 0.75); }
.rgba-50 { background-color: rgba(52, 152, 219, 0.5); }
.rgba-25 { background-color: rgba(52, 152, 219, 0.25); }

RGBA/HSLA affects only the color itself, not child elements.

Transparent Colors

.box1 {
  background-color: rgba(52, 152, 219, 0.7);
}

.box2 {
  background-color: rgba(231, 76, 60, 0.7);
}

Transparent colors allow background elements to show through, creating overlay effects.

currentColor Keyword

This text and the SVG icon both use currentColor

.current-color-example {
  color: #3498db;
  border: 2px solid currentColor;
}

.current-color-example svg {
  fill: currentColor;
}

The currentColor keyword refers to the current text color, allowing color inheritance across properties.

transparent Keyword

/* Makes an element invisible but still present in layout */
.invisible {
  color: transparent;
  background-color: transparent;
  border-color: transparent;
}

/* Creates clickable areas without visible elements */
.clickable-transparent {
  background-color: transparent;
  cursor: pointer;
}

inherit, initial, and unset Keywords

.inherit-color {
  color: inherit; /* Takes parent's color value */
}

.initial-color {
  color: initial; /* Resets to browser default */
}

.unset-color {
  color: unset; /* inherit if property is inherited, otherwise initial */
}

Border Color Styles

Solid Border

Dashed Border

Multi-color Border

.border-solid { 
  border: 2px solid #3498db; 
}

.border-dashed { 
  border: 2px dashed #3498db; 
}

.border-multicolor {
  border-top: 2px solid #3498db;
  border-right: 2px solid #2ecc71;
  border-bottom: 2px solid #e74c3c;
  border-left: 2px solid #f1c40f;
}

Border Color with CSS Variables

Border with CSS Variable

.border-color-var { 
  border: 2px solid var(--color-primary); 
}

Styling SVG elements with CSS colors:

.svg-fill {
  fill: #3498db;
}

.svg-stroke {
  fill: none;
  stroke: #3498db;
  stroke-width: 2;
}

.svg-current-color {
  fill: currentColor;
  color: #3498db;
}

.svg-gradient {
  fill: url(#gradient-1);
}

Accessibility

Color Contrast: Ensure sufficient contrast between text and background colors for readability (WCAG recommends at least 4.5:1 for normal text).
Don't Rely on Color Alone: Use additional visual cues (icons, patterns, text) to convey information, not just color differences.
Test for Color Blindness: Use tools to simulate how your site appears to individuals with color vision deficiencies.

Performance

Use CSS Variables: Define colors once and reuse them for consistency and easier updates.
Choose Optimized Formats: Sometimes hex codes are slightly more performant than RGB/HSL.
Minimize Color Variations: Too many color variations increase CSS file size.

Maintainability

Semantic Color Names: Use names like --color-primary instead of --color-blue to allow changing the actual color without renaming variables.
Document Your Color System: Create a color style guide for future reference.
Use Color Functions: Consider preprocessors (Sass, Less) or CSS Custom Properties for systematic color manipulation.

Basic Colors: All color formats (hex, RGB, HSL) are widely supported in modern browsers.
Alpha Transparency: RGBA and HSLA are widely supported (IE9+).
Gradients: Well supported in modern browsers (linear, radial). Conic gradients have more limited support.
CSS Variables: Supported in all modern browsers (IE11 has no support).
Modern Color Syntax: Space-separated RGB/HSL values have good but not universal support.

Always consider using appropriate fallbacks for older browsers when needed.

CSS Colors and Gradients Guide

1. Color Formats