Skip to content
Awesome GitHub Copilot

Html Css Style Color Guide

Html Css Style Color Guide

Color usage guidelines and styling rules for HTML elements to ensure accessible, professional designs.

Documentation

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.).

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