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