ClawHub

HTML CSS Style Color Guide

Color usage guidelines and styling rules for HTML and CSS elements to ensure accessible, professional designs. Use when creating or updating HTML/CSS styles, choosing colors for web pages, styling backgrounds, text, buttons, or gradients. Applies the 60-30-10 rule for balanced color schemes.

Audits

Pass
ClawScanPass

Agentic behavior and permission review.

Static analysisPass

Pattern checks against bundled files.

VirusTotalPass

Multi-engine malware detections and file reputation.

Install

openclaw skills install html-css-style-color-guide

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