HTML CSS Style Color Guide
Follow these guidelines when updating or creating HTML/CSS styles for browser rendering. Color names represent the full spectrum of their respective hue ranges (e.g., "blue" includes navy, sky blue, etc.).
When to Use This Skill
- Creating or updating HTML/CSS styles
- Choosing colors for web page elements
- Styling backgrounds, text, buttons, cards, or gradients
- Ensuring accessible color combinations
- Applying professional color schemes
Color Definitions
- Hot Colors: Oranges, reds, and yellows
- Cool Colors: Blues, greens, and purples
- Neutral Colors: Grays and grayscale variations
- Binary Colors: Black and white
- 60-30-10 Rule
- Primary Color: Use 60% of the time (cool or light color)
- Secondary Color: Use 30% of the time (cool or light color)
- Accent: Use 10% of the time (complementary hot color)
Color Usage Guidelines
Balance the colors used by applying the 60-30-10 rule to graphic design elements like backgrounds, buttons, cards, etc...
Background Colors
Never Use:
- Purple or magenta
- Red, orange, or yellow
- Pink
- Any hot color
Recommended:
- White or off-white
- Light cool colors (e.g., light blues, light greens)
- Subtle neutral tones
- Light gradients with minimal color shift
Text Colors
Never Use:
- Yellow (poor contrast and readability)
- Pink
- Pure white or light text on light backgrounds
- Pure black or dark text on dark backgrounds
Recommended:
- Dark neutral colors (e.g., #1f2328, #24292f)
- Near-black variations (#000000 to #333333)
- Ensure background is a light color
- Dark grays (#4d4d4d, #6c757d)
- High-contrast combinations for accessibility
- Near-white variations (#ffffff to #f0f2f3)
- Ensure background is a dark color
Colors to Avoid
Unless explicitly required by design specifications or user request, avoid:
- Bright purples and magentas
- Bright pinks and neon colors
- Highly saturated hot colors
- Colors with low contrast ratios (fails WCAG accessibility standards)
Colors to Use Sparingly
Hot Colors (red, orange, yellow):
- Reserve for critical alerts, warnings, or error messages
- Use only when conveying urgency or importance
- Limit to small accent areas rather than large sections
- Consider alternatives like icons or bold text before using hot colors
Gradients
Apply gradients with subtle color transitions to maintain professional aesthetics.
Best Practices
- Keep color shifts minimal (e.g., #E6F2FF to #F5F7FA)
- Use gradients within the same color family
- Avoid combining hot and cool colors in a single gradient
- Prefer linear gradients over radial for backgrounds
Appropriate Use Cases
- Background containers and sections
- Button hover states and interactive elements
- Drop shadows and depth effects
- Header and navigation bars
- Card components and panels