Color Tool Guide

Color Fundamentals and Representation Methods

Understanding color tools first requires mastering color fundamentals. Common color representation methods in computers include: RGB (red, green, blue - additive model for screen display), HEX (hexadecimal RGB shorthand), HSL (hue, saturation, lightness - more intuitive for humans), CMYK (cyan, magenta, yellow, black - subtractive model for printing). Each representation method has its applicable scenarios.

Core functions of color tools include: color picker (extracting colors from any position on screen), color palette (predefined color sets), color scheme generation (automatically generating harmonious color combinations based on color theory), and color conversion (converting between different formats). Modern color tools also provide color accessibility checking to ensure color contrast meets WCAG standards.

Color Handling in Programming

// JavaScript color handling

// 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;
}

// RGB to HSL
function rgbToHsl(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;

  const max = Math.max(r, g, b);
  const 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)
  };
}

// Check color contrast (WCAG AA standard)
function checkContrast(color1, color2) {
  const lum1 = getLuminance(color1);
  const lum2 = getLuminance(color2);
  const ratio = (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
  return {
    ratio: ratio.toFixed(2),
    passAA: ratio >= 4.5,
    passAAA: ratio >= 7
  };
}

Color Scheme Design Principles

Good color schemes should follow these principles: brand consistency (colors should match brand tone), hierarchy (using different brightness to distinguish information levels), contrast (ensuring text readability), and emotional conveyance (different colors convey different emotions). Common color scheme types include: Monochromatic, Complementary, Analogous, and Triadic.

In practical projects, it is recommended to establish a Design System defining primary colors, secondary colors, neutral colors, and functional colors (success, warning, error) as standard color palettes. Use CSS variables for color management to facilitate unified global changes. Also use tools to check color accessibility to ensure all users can use the site properly.

Recommended Tools

Coolors is an online color scheme generator. Adobe Color is a professional color tool supporting color wheel matching. Contrast Checker is a WCAG color contrast checking tool. Color Hunt provides color scheme inspiration.