Complete Color Guide
Master color theory and formats with our comprehensive guide. Learn RGB, HEX, HSL, CMYK conversions, color psychology, and design best practices.
RGB (Red, Green, Blue)
Additive color model used for digital displays and web design.
HEX (Hexadecimal)
Compact representation using base-16 notation, perfect for CSS.
HSL (Hue, Saturation, Lightness)
Intuitive color model based on human perception of color.
CMYK (Cyan, Magenta, Yellow, Key)
Subtractive color model used for print and physical media.
Color Psychology
Energy, passion, urgency. Use for call-to-action buttons and alerts.
Trust, stability, professionalism. Perfect for corporate and tech brands.
Growth, nature, harmony. Great for environmental and health brands.
Optimism, creativity, attention. Use sparingly for highlights and warnings.
Color Harmony
Complementary Colors
Colors opposite on the color wheel (e.g., red and green)
Analogous Colors
Colors next to each other on the color wheel (e.g., blue, blue-green, green)
Triadic Colors
Three colors evenly spaced on the color wheel (e.g., red, yellow, blue)
Accessibility
- Ensure sufficient contrast ratios (4.5:1 for normal text)
- Don't rely solely on color to convey information
- Test with color blindness simulators
Brand Consistency
- Define a primary color palette (3-5 colors)
- Create secondary and accent color variations
- Document color usage guidelines
Accessibility
Always check color contrast ratios for better accessibility.
Design
Use the 60-30-10 rule: 60% dominant, 30% secondary, 10% accent.
Conversion
HEX is perfect for CSS, RGB for programming, HSL for adjustments.