Color Tools Skill

Color Tools Skill

This skill helps you create accessible, harmonious color palettes and ensures your colors meet WCAG contrast requirements. I provide color calculations, palette generation, and accessibility validation.

What I Can Do

Color Contrast Checking

• Calculate contrast ratios
• Verify WCAG AA/​AAA compliance
• Suggest accessible alternatives
• Check text/​background combinations

Palette Generation

• Create tint/​shade scales (50-900)
• Generate color harmonies
• Build complementary palettes
• Design theme variations

Color Conversions

• HEX ↔ RGB ↔ HSL
• Calculate opacity variations
• Generate CSS custom properties
• Create color tokens

Accessibility Tools

• Find accessible color pairs
• Suggest minimum contrast fixes
• Validate interactive state colors
• Check large text requirements

WCAG Contrast Requirements

Minimum Ratios

• Normal text: 4.5:1 (AA), 7:1 (AAA)
• Large text (18px+ or 14px+ bold): 3:1 (AA), 4.5:1 (AAA)
• UI components: 3:1 (AA)
• Graphical objects: 3:1 (AA)

Contrast Formula

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05) Where L1 is lighter color luminance and L2 is darker

Example: Contrast Checking

You: "Check if #3b82f6 on white background is accessible"

I'll provide:

Color: #3b82f6 (Blue)
Background: #ffffff (White)

Contrast Ratio: 4.52:1

WCAG Compliance:
✓ Normal text AA (4.5:1 required) - PASS
✗ Normal text AAA (7:1 required) - FAIL
✓ Large text AA (3:1 required) - PASS
✓ Large text AAA (4.5:1 required) - PASS
✓ UI Components (3:1 required) - PASS

Recommendation:
For AAA compliance with normal text, use #2563eb (darker blue)
New contrast: 7.02:1 - Passes all requirements

Palette Generation

Tint & Shade Scale

/​* Generate 50-900 scale from base color */
:root {
  /​* Base color: #3b82f6 */

  --color-blue-50: #eff6ff;   /​* 90% lighter */
  --color-blue-100: #dbeafe;  /​* 80% lighter */
  --color-blue-200: #bfdbfe;  /​* 60% lighter */
  --color-blue-300: #93c5fd;  /​* 40% lighter */
  --color-blue-400: #60a5fa;  /​* 20% lighter */
  --color-blue-500: #3b82f6;  /​* Base */
  --color-blue-600: #2563eb;  /​* 20% darker */
  --color-blue-700: #1d4ed8;  /​* 40% darker */
  --color-blue-800: #1e40af;  /​* 60% darker */
  --color-blue-900: #1e3a8a;  /​* 80% darker */
}

/​* Usage guide:
 * 50-100: Backgrounds, subtle highlights
 * 200-300: Hover states, borders
 * 400-600: Primary UI, text on light backgrounds
 * 700-900: Text, emphasis, dark themes
 */

Color Harmonies

Complementary Colors

/​* Base: #3b82f6 (Blue) */
:root {
  --color-primary: #3b82f6;      /​* Blue (210°) */
  --color-complement: #f6823b;   /​* Orange (30°) - opposite */
}

Analogous Colors

/​* Base: #3b82f6 (Blue) */
:root {
  --color-primary: #3b82f6;      /​* Blue (210°) */
  --color-analogous-1: #3bf6db;  /​* Cyan (180°) */
  --color-analogous-2: #823bf6;  /​* Purple (270°) */
}

Triadic Colors

/​* Base: #3b82f6 (Blue) */
:root {
  --color-primary: #3b82f6;      /​* Blue (210°) */
  --color-triadic-1: #f6db3b;    /​* Yellow (90°) */
  --color-triadic-2: #db3bf6;    /​* Magenta (330°) */
}

Split-Complementary

/​* Base: #3b82f6 (Blue) */
:root {
  --color-primary: #3b82f6;      /​* Blue (210°) */
  --color-split-1: #f6db3b;      /​* Yellow-Orange (45°) */
  --color-split-2: #f6493b;      /​* Red-Orange (15°) */
}

Accessible Color Palettes

Light Theme

:root {
  /​* Backgrounds - Lightest colors */
  --color-bg: #ffffff;           /​* Pure white */
  --color-bg-secondary: #f9fafb; /​* Near white */
  --color-bg-tertiary: #f3f4f6;  /​* Light gray */

  /​* Text - Darkest colors (AAA contrast) */
  --color-text-primary: #111827;   /​* 16.04:1 */
  --color-text-secondary: #4b5563; /​* 8.49:1 */
  --color-text-tertiary: #6b7280;  /​* 5.77:1 */

  /​* Primary color (accessible) */
  --color-primary: #2563eb;      /​* 7.02:1 on white */
  --color-primary-hover: #1d4ed8; /​* 9.52:1 on white */

  /​* Interactive states */
  --color-link: #2563eb;         /​* 7.02:1 */
  --color-link-hover: #1d4ed8;   /​* 9.52:1 */
  --color-link-visited: #7c3aed; /​* 7.09:1 */

  /​* Status colors (all AAA compliant) */
  --color-success: #047857;      /​* 7.36:1 */
  --color-warning: #b45309;      /​* 7.01:1 */
  --color-error: #dc2626;        /​* 7.29:1 */
}

Dark Theme

[data-theme="dark"] {
  /​* Backgrounds - Darkest colors */
  --color-bg: #111827;           /​* Very dark gray */
  --color-bg-secondary: #1f2937; /​* Dark gray */
  --color-bg-tertiary: #374151;  /​* Medium-dark gray */

  /​* Text - Lightest colors (AAA contrast) */
  --color-text-primary: #f9fafb;   /​* 14.73:1 */
  --color-text-secondary: #d1d5db; /​* 10.31:1 */
  --color-text-tertiary: #9ca3af;  /​* 6.16:1 */

  /​* Primary color (lighter for dark mode) */
  --color-primary: #60a5fa;      /​* 7.38:1 on dark bg */
  --color-primary-hover: #93c5fd; /​* 10.73:1 on dark bg */

  /​* Status colors (adjusted for dark mode) */
  --color-success: #34d399;      /​* 7.53:1 */
  --color-warning: #fbbf24;      /​* 13.44:1 */
  --color-error: #f87171;        /​* 7.03:1 */
}

Color Conversion Examples

HEX to RGB

#3b82f6 → rgb(59, 130, 246)

Calculation:
R: 3b (hex) = 59 (decimal)
G: 82 (hex) = 130 (decimal)
B: f6 (hex) = 246 (decimal)

RGB to HSL

rgb(59, 130, 246) → hsl(217, 91%, 60%)

Calculation:
H: 217° (hue)
S: 91% (saturation)
L: 60% (lightness)

Adding Opacity

/​* HEX with alpha */
--color-primary: #3b82f6;
--color-primary-10: #3b82f61a; /​* 10% opacity */
--color-primary-50: #3b82f680; /​* 50% opacity */

/​* RGB with alpha */
--color-primary-rgb: 59, 130, 246;
--color-primary-10: rgba(var(--color-primary-rgb), 0.1);
--color-primary-50: rgba(var(--color-primary-rgb), 0.5);

/​* HSL with alpha */
--color-primary: hsl(217, 91%, 60%);
--color-primary-10: hsl(217, 91%, 60%, 0.1);
--color-primary-50: hsl(217, 91%, 60%, 0.5);

Color Token System

Complete Token Architecture

:root {
  /​* 1. Global tokens - Raw colors */
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-gray-50: #f9fafb;
  --color-gray-900: #111827;

  /​* 2. Semantic tokens - Purpose */
  --color-primary: var(--color-blue-600);
  --color-text-primary: var(--color-gray-900);
  --color-surface: var(--color-gray-50);

  /​* 3. Component tokens - Specific */
  --button-bg-primary: var(--color-primary);
  --button-text-primary: white;
  --card-bg: var(--color-surface);
}

Checking Interactive States

Button States Example

.button-primary {
  /​* Default state */
  background: #2563eb;  /​* 7.02:1 on white */
  color: white;

  /​* Hover state */
  &:hover {
    background: #1d4ed8; /​* 9.52:1 on white */
  }

  /​* Focus state */
  &:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    /​* Outline must have 3:1 contrast with adjacent colors */
  }

  /​* Active/​pressed state */
  &:active {
    background: #1e40af; /​* 11.19:1 on white */
  }

  /​* Disabled state */
  &:disabled {
    background: #93c5fd; /​* 3.24:1 - may fail for text */
    color: #6b7280;     /​* Reduced contrast acceptable when disabled */
    opacity: 0.6;
  }
}

Color Accessibility Tips

✓ Good Practices

• Test all text/​background combinations
• Check hover and focus states
• Verify status colors (success, warning, error)
• Don't rely on color alone (use icons/​text too)
• Test with color blindness simulators
• Provide high contrast mode
• Use semantic color names

❌ Common Mistakes

• Light gray text on white (#999 on #fff = 2.85:1 - fails)
• Relying only on color for information
• Insufficient contrast in disabled states
• Forgetting to test dark mode
• Not checking focus indicators
• Ignoring links and interactive elements

Example Usage

You: "Create an accessible blue palette for a light theme"

I'll provide:

:root {
  /​* Blue palette - All colors tested for accessibility */

  /​* Primary actions - AAA compliant on white */
  --color-primary: #1d4ed8;      /​* 9.52:1 */
  --color-primary-hover: #1e40af; /​* 11.19:1 */

  /​* Backgrounds */
  --color-primary-bg: #eff6ff;   /​* Subtle background */
  --color-primary-border: #93c5fd; /​* 3.24:1 - good for borders */

  /​* Text on primary buttons */
  --color-primary-text: #ffffff; /​* 9.52:1 on #1d4ed8 */

  /​* Links */
  --color-link: #2563eb;         /​* 7.02:1 - AAA for large text */
  --color-link-hover: #1d4ed8;   /​* 9.52:1 - AAA */
  --color-link-visited: #7c3aed; /​* 7.09:1 - AAA */

  /​* Status indicators */
  --color-info: #0284c7;         /​* 7.24:1 */
  --color-info-bg: #e0f2fe;      /​* Background for info messages */
}

/​* Usage example */
.button-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

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

.link {
  color: var(--color-link);
}

.link:hover {
  color: var(--color-link-hover);
}

Just Ask!

Tell me what you need:

• "Check contrast for #3b82f6 on white"
• "Generate a blue color palette"
• "Create accessible dark theme colors"
• "Find a complementary color for #2563eb"
• "Make this color more accessible"
• "Convert #3b82f6 to RGB and HSL"

I'll help you create accessible, beautiful color systems!