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

Additional Resources#

• Color Tool
• Government or Professional Color Standards
• UI Color Palette Best Practices
• Color Combination Resource