Color Design and Palette Guide
Color is one of the most powerful tools in design, capable of influencing emotions, guiding user behavior, and establishing brand identity. This comprehensive guide covers color theory, palette creation, and practical implementation strategies.
1. Color Theory Fundamentals
Understanding Color Systems
Color Models and Spaces
const colorSystems = {
rgb: {
description: 'Red, Green, Blue - Additive color model',
use_case: 'Digital displays and web design',
range: '0-255 for each channel',
example: 'rgb(255, 0, 0) = Pure red'
},
hex: {
description: 'Hexadecimal representation of RGB',
use_case: 'Web development and CSS',
format: '#RRGGBB or #RGB',
example: '#FF0000 = Pure red'
},
hsl: {
description: 'Hue, Saturation, Lightness',
use_case: 'Intuitive color manipulation',
advantages: 'Easy to create variations',
example: 'hsl(0, 100%, 50%) = Pure red'
},
cmyk: {
description: 'Cyan, Magenta, Yellow, Black',
use_case: 'Print design and physical media',
note: 'Subtractive color model'
}
};
Color Psychology and Emotional Impact
Color Associations
const colorPsychology = {
red: {
emotions: ['passion', 'energy', 'urgency', 'danger'],
use_cases: ['call-to-action buttons', 'sale notifications', 'warning alerts'],
cultural_notes: 'Good luck in China, danger in Western cultures'
},
blue: {
emotions: ['trust', 'calm', 'professionalism', 'stability'],
use_cases: ['corporate branding', 'healthcare', 'technology'],
variations: {
light_blue: 'Peaceful, healing',
dark_blue: 'Professional, trustworthy',
navy: 'Authoritative, sophisticated'
}
},
green: {
emotions: ['growth', 'nature', 'money', 'success'],
use_cases: ['environmental brands', 'financial services', 'health products'],
accessibility: 'Avoid red-green combinations for color-blind users'
},
yellow: {
emotions: ['happiness', 'optimism', 'caution', 'creativity'],
use_cases: ['children products', 'warning signs', 'creative industries'],
caution: 'Can cause eye strain in large amounts'
},
purple: {
emotions: ['luxury', 'creativity', 'spirituality', 'mystery'],
use_cases: ['premium brands', 'beauty products', 'creative services'],
note: 'Historically associated with royalty'
}
};
2. Creating Color Palettes
Harmony Rules and Combinations
Color Harmony Types
class ColorHarmonyGenerator {
constructor() {
this.harmonies = {
monochromatic: 'Variations of a single hue',
analogous: 'Adjacent colors on the color wheel',
complementary: 'Opposite colors on the color wheel',
triadic: 'Three evenly spaced colors',
tetradic: 'Four colors forming a rectangle',
splitComplementary: 'Base color plus two colors adjacent to its complement'
};
}
generateMonochromatic(baseHue, count = 5) {
const colors = [];
const saturationValues = [20, 40, 60, 80, 100];
const lightnessValues = [20, 35, 50, 65, 80];
for (let i = 0; i < count; i++) {
colors.push({
hsl: `hsl(${baseHue}, ${saturationValues[i]}%, ${lightnessValues[i]}%)`,
hex: this.hslToHex(baseHue, saturationValues[i], lightnessValues[i]),
usage: this.getUsageSuggestion(i, count)
});
}
return colors;
}
generateComplementary(baseHue) {
const complement = (baseHue + 180) % 360;
return [
{
hsl: `hsl(${baseHue}, 70%, 50%)`,
role: 'primary',
usage: 'Main brand color, important elements'
},
{
hsl: `hsl(${complement}, 70%, 50%)`,
role: 'accent',
usage: 'Call-to-action, highlights, contrast'
}
];
}
generateTriadic(baseHue) {
return [0, 120, 240].map((offset, index) => ({
hsl: `hsl(${(baseHue + offset) % 360}, 70%, 50%)`,
role: ['primary', 'secondary', 'tertiary'][index],
usage: ['Main elements', 'Supporting elements', 'Accent details'][index]
}));
}
hslToHex(h, s, l) {
// Convert HSL to RGB then to HEX
s /= 100;
l /= 100;
const c = (1 - Math.abs(2 * l - 1)) * s;
const x = c * (1 - Math.abs((h / 60) % 2 - 1));
const m = l - c / 2;
let r, g, b;
if (0 <= h < 60) {
r = c; g = x; b = 0;
} else if (60 <= h < 120) {
r = x; g = c; b = 0;
} else if (120 <= h < 180) {
r = 0; g = c; b = x;
} else if (180 <= h < 240) {
r = 0; g = x; b = c;
} else if (240 <= h < 300) {
r = x; g = 0; b = c;
} else {
r = c; g = 0; b = x;
}
r = Math.round((r + m) * 255);
g = Math.round((g + m) * 255);
b = Math.round((b + m) * 255);
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
}
}
Brand Color Systems
Brand Palette Structure
const brandColorSystem = {
primary: {
description: 'Main brand color',
usage: ['Logo', 'Primary buttons', 'Main navigation'],
variations: {
50: '#f0f9ff', // Very light
100: '#e0f2fe', // Light
500: '#0ea5e9', // Base
700: '#0369a1', // Dark
900: '#0c4a6e' // Very dark
}
},
secondary: {
description: 'Supporting brand color',
usage: ['Secondary buttons', 'Links', 'Highlights'],
relationship: 'Complementary or analogous to primary'
},
neutral: {
description: 'Grayscale colors',
usage: ['Text', 'Backgrounds', 'Borders', 'Dividers'],
variations: {
50: '#f8fafc', // White-like
200: '#e2e8f0', // Light gray
400: '#94a3b8', // Medium gray
600: '#475569', // Dark gray
900: '#0f172a' // Almost black
}
},
semantic: {
success: { base: '#10b981', usage: 'Confirmations, positive states' },
warning: { base: '#f59e0b', usage: 'Cautions, pending states' },
error: { base: '#ef4444', usage: 'Errors, destructive actions' },
info: { base: '#3b82f6', usage: 'Information, neutral notifications' }
}
};
3. Accessibility and Color Contrast
WCAG Compliance Guidelines
Contrast Ratio Requirements
class ColorAccessibility {
calculateContrastRatio(color1, color2) {
const luminance1 = this.getLuminance(color1);
const luminance2 = this.getLuminance(color2);
const lighter = Math.max(luminance1, luminance2);
const darker = Math.min(luminance1, luminance2);
return (lighter + 0.05) / (darker + 0.05);
}
getLuminance(hex) {
// Convert hex to RGB
const rgb = this.hexToRgb(hex);
// Convert to relative luminance
const rsrgb = rgb.r / 255;
const gsrgb = rgb.g / 255;
const bsrgb = rgb.b / 255;
const r = rsrgb <= 0.03928 ? rsrgb / 12.92 : Math.pow((rsrgb + 0.055) / 1.055, 2.4);
const g = gsrgb <= 0.03928 ? gsrgb / 12.92 : Math.pow((gsrgb + 0.055) / 1.055, 2.4);
const b = bsrgb <= 0.03928 ? bsrgb / 12.92 : Math.pow((bsrgb + 0.055) / 1.055, 2.4);
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}
checkWCAGCompliance(foreground, background) {
const ratio = this.calculateContrastRatio(foreground, background);
return {
ratio: ratio.toFixed(2),
aa_normal: ratio >= 4.5, // Normal text
aa_large: ratio >= 3, // Large text (18pt+ or 14pt+ bold)
aaa_normal: ratio >= 7, // Enhanced normal text
aaa_large: ratio >= 4.5, // Enhanced large text
level: this.getComplianceLevel(ratio)
};
}
getComplianceLevel(ratio) {
if (ratio >= 7) return 'AAA';
if (ratio >= 4.5) return 'AA';
if (ratio >= 3) return 'AA Large';
return 'Fail';
}
suggestAccessibleColors(baseColor, targetRatio = 4.5) {
const suggestions = [];
// Try different lightness values
for (let l = 0; l <= 100; l += 5) {
const testColor = this.adjustLightness(baseColor, l);
const ratio = this.calculateContrastRatio(baseColor, testColor);
if (ratio >= targetRatio) {
suggestions.push({
color: testColor,
ratio: ratio.toFixed(2),
lightness: l
});
}
}
return suggestions.sort((a, b) => Math.abs(a.ratio - targetRatio) - Math.abs(b.ratio - targetRatio));
}
}
Color-Blind Friendly Design
Color Blindness Considerations
const colorBlindnessGuidelines = {
types: {
deuteranopia: {
description: 'Green-blind (6% of men)',
difficulty: 'Distinguishing red and green',
solution: 'Use blue and orange instead'
},
protanopia: {
description: 'Red-blind (2% of men)',
difficulty: 'Distinguishing red and green',
solution: 'Avoid red-green combinations'
},
tritanopia: {
description: 'Blue-blind (very rare)',
difficulty: 'Distinguishing blue and yellow',
solution: 'Use red and green alternatives'
}
},
design_principles: [
'Never use color alone to convey information',
'Add patterns, textures, or shapes for differentiation',
'Use sufficient contrast ratios',
'Test with color blindness simulators',
'Provide alternative text descriptions'
],
safe_color_combinations: {
high_contrast: ['#000000', '#FFFFFF'],
blue_orange: ['#0077BE', '#FF8800'],
purple_yellow: ['#663399', '#FFDD00'],
teal_coral: ['#007A7A', '#FF6B6B']
}
};