Tools and Quick Reference

Essential tools for working with color and quick reference charts for common tasks.

Color Picking & Palette Tools

Palette Generators

Color Scale Generators

Contrast Checkers

Color Blindness Simulators

Browser DevTools Color Features

Chrome/Edge

Access color contrast:

1. Inspect element
2. Elements panel → Styles
3. Click color swatch
4. Contrast ratio shown at bottom

Simulate color blindness:

1. DevTools → Three dots → More tools → Rendering
2. Scroll to "Emulate vision deficiencies"
3. Select deficiency type

Pick colors from page:

1. Click any color swatch in Styles
2. Use eyedropper tool
3. Shift+Click swatch to cycle formats

Firefox

Accessibility Inspector:

1. DevTools → Accessibility tab
2. Check contrast issues automatically
3. Simulate color vision deficiencies

Design Tool Plugins

Figma

Sketch

Quick Reference Charts

HSL Hue Values

0°   / 360°  Red
30°          Orange
60°          Yellow
90°          Yellow-Green
120°         Green
150°         Teal
180°         Cyan
210°         Sky Blue
240°         Blue
270°         Purple
300°         Magenta
330°         Pink

Contrast Ratio Requirements

Common Color Values

/* Pure colors at max saturation */
--red:     hsl(0, 100%, 50%);
--orange:  hsl(30, 100%, 50%);
--yellow:  hsl(60, 100%, 50%);
--green:   hsl(120, 100%, 50%);
--cyan:    hsl(180, 100%, 50%);
--blue:    hsl(240, 100%, 50%);
--purple:  hsl(270, 100%, 50%);
--magenta: hsl(300, 100%, 50%);

/* Common UI-friendly values */
--ui-blue:    hsl(220, 80%, 50%);
--ui-green:   hsl(142, 70%, 45%);
--ui-red:     hsl(0, 75%, 50%);
--ui-yellow:  hsl(45, 90%, 50%);
--ui-purple:  hsl(270, 60%, 55%);

Harmony Formulas (HSL)

/* Starting from --base-hue */

/* Complementary */
--complement: calc(var(--base-hue) + 180);

/* Analogous */
--analogous-1: calc(var(--base-hue) - 30);
--analogous-2: calc(var(--base-hue) + 30);

/* Triadic */
--triadic-1: calc(var(--base-hue) + 120);
--triadic-2: calc(var(--base-hue) + 240);

/* Split-complementary */
--split-1: calc(var(--base-hue) + 150);
--split-2: calc(var(--base-hue) + 210);

/* Square */
--square-1: calc(var(--base-hue) + 90);
--square-2: calc(var(--base-hue) + 180);
--square-3: calc(var(--base-hue) + 270);

Standard Semantic Colors

:root {
  /* Success (Green) */
  --success-hue: 142;
  --success: hsl(142, 70%, 45%);

  /* Warning (Yellow/Amber) */
  --warning-hue: 38;
  --warning: hsl(38, 90%, 50%);

  /* Error (Red) */
  --error-hue: 0;
  --error: hsl(0, 75%, 50%);

  /* Info (Blue) */
  --info-hue: 210;
  --info: hsl(210, 80%, 50%);
}

Typography Color Guidelines

:root {
  /* Light mode */
  --text-primary: hsl(220, 15%, 15%);   /* Headings */
  --text-secondary: hsl(220, 10%, 40%); /* Body */
  --text-muted: hsl(220, 10%, 55%);     /* Captions */
  --text-disabled: hsl(220, 10%, 70%);  /* Disabled */

  /* Dark mode */
  --dark-text-primary: hsl(220, 15%, 92%);
  --dark-text-secondary: hsl(220, 10%, 68%);
  --dark-text-muted: hsl(220, 10%, 52%);
  --dark-text-disabled: hsl(220, 10%, 38%);
}

Dark Mode Background Scale

:root {
  /* Elevation levels (dark mode) */
  --dark-0: hsl(220, 15%, 8%);   /* Page background */
  --dark-1: hsl(220, 15%, 12%);  /* Cards */
  --dark-2: hsl(220, 15%, 16%);  /* Raised cards */
  --dark-3: hsl(220, 15%, 20%);  /* Modals */
  --dark-4: hsl(220, 15%, 24%);  /* Dropdowns */
  --dark-5: hsl(220, 15%, 28%);  /* Tooltips */
}

CSS Color Functions

Modern CSS (Wide Support)

/* HSL */
color: hsl(220, 80%, 50%);
color: hsl(220 80% 50%);              /* Space-separated */
color: hsl(220 80% 50% / 50%);        /* With alpha */

/* RGB */
color: rgb(59, 130, 246);
color: rgb(59 130 246);               /* Space-separated */
color: rgb(59 130 246 / 50%);         /* With alpha */

/* HEX */
color: #3b82f6;
color: #3b82f680;                     /* With alpha (8 digits) */

Newer CSS (Check Support)

/* OKLCH - perceptually uniform */
color: oklch(60% 0.15 250);

/* LCH */
color: lch(50% 100 270);

/* color-mix() - blend colors */
color: color-mix(in srgb, #3b82f6, white 20%);

/* relative color syntax */
color: hsl(from var(--primary) h s calc(l + 20%));

JavaScript Color Utilities

Convert HEX to RGB

function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

Convert RGB to HSL

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0;
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    l: Math.round(l * 100)
  };
}

Calculate Relative Luminance

function getLuminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

Calculate Contrast Ratio

function getContrastRatio(rgb1, rgb2) {
  const l1 = getLuminance(rgb1.r, rgb1.g, rgb1.b);
  const l2 = getLuminance(rgb2.r, rgb2.g, rgb2.b);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

Darken/Lighten HSL Color

function adjustLightness(hsl, amount) {
  return {
    h: hsl.h,
    s: hsl.s,
    l: Math.max(0, Math.min(100, hsl.l + amount))
  };
}

// Usage
const base = { h: 220, s: 80, l: 50 };
const darker = adjustLightness(base, -10);  // l: 40
const lighter = adjustLightness(base, 10);  // l: 60

Checklist: Color in a New Project

Planning

• [ ] Define brand color(s)
• [ ] Choose color harmony (complement, split, etc.)
• [ ] Plan semantic colors (success, warning, error)
• [ ] Decide on neutral tint (warm, cool, brand)

Building

• [ ] Generate 50-950 scale for each color
• [ ] Create tinted neutral scale
• [ ] Define semantic tokens (bg-primary, text-secondary, etc.)
• [ ] Set up light/dark mode variables

Accessibility

• [ ] Test all text contrast (4.5:1 minimum)
• [ ] Test UI component contrast (3:1 minimum)
• [ ] Simulate color blindness
• [ ] Verify focus states are visible
• [ ] Ensure color isn't the only indicator

Implementation

• [ ] Set up CSS custom properties
• [ ] Create dark mode variant
• [ ] Document color usage guidelines
• [ ] Test on multiple devices/screens

Further Learning

Books

• Interaction of Color by Josef Albers
• Color and Light by James Gurney
• Designing with Color by Chris Cosgrove

Courses

• Coursera: Fundamentals of Graphic Design (color module)
• Skillshare: Color Theory for Designers

Specifications

• WCAG 2.1: w3.org/WAI/WCAG21/quickref (contrast requirements)
• CSS Color Level 4: w3.org/TR/css-color-4

Summary: The Essential Rules

1. Use HSL for color manipulation
2. Start with neutrals - they're 70-80% of your UI
3. Limit hues - 1-2 plus semantic colors
4. Test contrast - 4.5:1 for text, 3:1 for UI
5. Never color alone - add icons, text, patterns
6. Desaturate for dark mode - and adjust lightness
7. Create scales - not individual colors
8. Use semantic tokens - not raw values
9. Test with users - including colorblind simulation
10. Keep it simple - restraint creates impact