Understanding Color in Design

Type: Additive color model (light-based)

Usage: Digital screens, cameras, web design

Range: Each channel from 0-255 (or 0-100%)

RGB works by adding red, green, and blue light together. When all three are at maximum (255, 255, 255), you get white. When all are at zero (0, 0, 0), you get black. This matches how your screen creates colors.

Type: Subtractive color model (pigment-based)

Usage: Printing, physical media

Range: Each channel from 0-100%

CMYK works by subtracting light. When printing, inks absorb certain wavelengths of light. Combining all colors creates black (though actual black ink is used for better results). Essential for print design but not directly used on screens.

Type: Perceptual color model

Usage: Design tools, CSS, color manipulation

Range: Hue 0-360°, Saturation/Lightness 0-100%

HSL describes colors as humans perceive them: What color is it (hue), how vivid is it (saturation), and how light or dark is it (lightness). This makes it incredibly intuitive for creating color variations and palettes.

Type: Perceptual color model

Usage: Design software (Photoshop, Illustrator)

Range: Hue 0-360°, Saturation/Value 0-100%

HSV is similar to HSL but uses "value" or "brightness" instead of lightness. Popular in design software because the color picker interface is intuitive - pick your hue, then adjust how saturated and bright you want it.

Hue (0-360°)

The color itself, represented as a degree on the color wheel:

Saturation (0-100%)

The intensity or purity of the color. 0% is gray, 100% is the most vivid:

Lightness (0-100%)

How light or dark the color is. 0% is black, 50% is the true color, 100% is white:

The Color Wheel

The foundation of color theory is the color wheel - a circular arrangement of colors showing their relationships:

• Primary colors: Red (0°), Yellow (60°), Blue (240°) - cannot be created by mixing
• Secondary colors: Orange (30°), Green (120°), Purple (270°) - mix of two primaries
• Tertiary colors: Mix of primary and adjacent secondary colors

Complementary Colors

Colors opposite each other on the color wheel (180° apart). Create high contrast and visual impact:

Usage: Great for call-to-action buttons, emphasis, creating visual interest

Analogous Colors

Colors adjacent on the color wheel (30-60° apart). Create harmonious, cohesive designs:

Usage: Ideal for backgrounds, gradients, serene designs

Triadic Colors

Three colors evenly spaced on the color wheel (120° apart). Balanced and vibrant:

Usage: Dynamic designs, playful brands, visual variety

Monochromatic Colors

Variations of a single hue using different saturation and lightness values:

Usage: Clean, professional designs, establishing hierarchy

1. Establishing a Color Hierarchy

Use the 60-30-10 rule for balanced designs:

2. Ensuring Accessibility (WCAG Compliance)

Maintain sufficient contrast ratios for readability:

• Normal text: Minimum 4.5:1 contrast ratio (AA standard)
• Large text (18pt+): Minimum 3:1 contrast ratio
• AAA standard: 7:1 for normal text, 4.5:1 for large text

Use our Color Contrast Checker to verify your color combinations.

3. CSS Color Implementation

Modern CSS offers multiple ways to define colors:

/* HEX - concise, widely supported */
.button {
  background-color: #FF5733;
}

/* RGB/RGBA - good for transparency */
.overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

/* HSL/HSLA - best for variations */
:root {
  --primary-hue: 200;
  --primary: hsl(var(--primary-hue), 100%, 50%);
  --primary-light: hsl(var(--primary-hue), 100%, 70%);
  --primary-dark: hsl(var(--primary-hue), 100%, 30%);
}

/* Modern CSS Color Level 4 */
.element {
  color: rgb(255 87 51 / 0.5); /* space-separated */
  background: hsl(200deg 100% 50%); /* with units */
}

4. Creating Color Scales

Generate consistent shades for UI components using HSL:

:root {
  /* Base color: hsl(200, 100%, 50%) */
  --blue-50: hsl(200, 100%, 95%);  /* Very light */
  --blue-100: hsl(200, 100%, 90%);
  --blue-200: hsl(200, 100%, 80%);
  --blue-300: hsl(200, 100%, 70%);
  --blue-400: hsl(200, 100%, 60%);
  --blue-500: hsl(200, 100%, 50%); /* Base */
  --blue-600: hsl(200, 100%, 40%);
  --blue-700: hsl(200, 100%, 30%);
  --blue-800: hsl(200, 100%, 20%);
  --blue-900: hsl(200, 100%, 10%); /* Very dark */
}

Try our Color Shades Generator to create complete color scales automatically.

5. Dark Mode Considerations

Adapt colors for dark themes:

• Reduce saturation and brightness in dark mode (too vivid colors cause eye strain)
• Use darker, desaturated backgrounds (pure black can be harsh)
• Increase contrast for text (light text on dark backgrounds needs more contrast)
• Test colors in both light and dark modes

@media (prefers-color-scheme: dark) {
  :root {
    --background: hsl(220, 20%, 10%); /* Dark, slightly blue */
    --text: hsl(0, 0%, 95%);          /* Off-white */
    --primary: hsl(200, 80%, 60%);    /* Less saturated blue */
  }
}

6. Color Psychology in UI/UX

Choose colors that reinforce your message: