{"kind":"AgentDefinition","metadata":{"namespace":"community","name":"html-css-style-color-guide","version":"0.1.0"},"spec":{"agents_md":"---\ndescription: 'Color usage guidelines and styling rules for HTML elements to ensure accessible, professional designs.'\napplyTo: '**/*.html, **/*.css, **/*.js'\n---\n\n# HTML CSS Style Color Guide\n\nFollow these guidelines when updating or creating HTML/CSS styles for browser rendering. Color names\nrepresent the full spectrum of their respective hue ranges (e.g., \"blue\" includes navy, sky blue, etc.).\n\n## Color Definitions\n\n- **Hot Colors**: Oranges, reds, and yellows\n- **Cool Colors**: Blues, greens, and purples\n- **Neutral Colors**: Grays and grayscale variations\n- **Binary Colors**: Black and white\n- **60-30-10 Rule**\n  - **Primary Color**: Use 60% of the time (*cool or light color*)\n  - **Secondary Color**: Use 30% of the time (*cool or light color*)\n  - **Accent**: Use 10% of the time (*complementary hot color*)\n\n## Color Usage Guidelines\n\nBalance the colors used by applying the **60-30-10 rule** to graphic design elements like backgrounds,\nbuttons, cards, etc...\n\n### Background Colors\n\n**Never Use:**\n\n- Purple or magenta\n- Red, orange, or yellow\n- Pink\n- Any hot color\n\n**Recommended:**\n\n- White or off-white\n- Light cool colors (e.g., light blues, light greens)\n- Subtle neutral tones\n- Light gradients with minimal color shift\n\n### Text Colors\n\n**Never Use:**\n\n- Yellow (poor contrast and readability)\n- Pink\n- Pure white or light text on light backgrounds\n- Pure black or dark text on dark backgrounds\n\n**Recommended:**\n\n- Dark neutral colors (e.g., #1f2328, #24292f)\n- Near-black variations (#000000 to #333333)\n  - Ensure background is a light color\n- Dark grays (#4d4d4d, #6c757d)\n- High-contrast combinations for accessibility\n- Near-white variations (#ffffff to #f0f2f3)\n  - Ensure background is a dark color\n\n### Colors to Avoid\n\nUnless explicitly required by design specifications or user request, avoid:\n\n- Bright purples and magentas\n- Bright pinks and neon colors\n- Highly saturated hot colors\n- Colors with low contrast ratios (fails WCAG accessibility standards)\n\n### Colors to Use Sparingly\n\n**Hot Colors** (red, orange, yellow):\n\n- Reserve for critical alerts, warnings, or error messages\n- Use only when conveying urgency or importance\n- Limit to small accent areas rather than large sections\n- Consider alternatives like icons or bold text before using hot colors\n\n## Gradients\n\nApply gradients with subtle color transitions to maintain professional aesthetics.\n\n### Best Practices\n\n- Keep color shifts minimal (e.g., #E6F2FF to #F5F7FA)\n- Use gradients within the same color family\n- Avoid combining hot and cool colors in a single gradient\n- Prefer linear gradients over radial for backgrounds\n\n### Appropriate Use Cases\n\n- Background containers and sections\n- Button hover states and interactive elements\n- Drop shadows and depth effects\n- Header and navigation bars\n- Card components and panels\n\n## Additional Resources\n\n- [Color Tool](https://civicactions.github.io/uswds-color-tool/)\n- [Government or Professional Color Standards](https://designsystem.digital.gov/design-tokens/color/overview/)\n- [UI Color Palette Best Practices](https://www.interaction-design.org/literature/article/ui-color-palette)\n- [Color Combination Resource](https://www.figma.com/resource-library/color-combinations/)\n","description":"Color usage guidelines and styling rules for HTML elements to ensure accessible, professional designs.","import":{"commit_sha":"541b7819d8c3545c6df122491af4fa1eae415779","imported_at":"2026-05-18T20:05:35Z","license_text":"MIT License\n\nCopyright GitHub, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","owner":"github","repo":"github/awesome-copilot","source_url":"https://github.com/github/awesome-copilot/blob/541b7819d8c3545c6df122491af4fa1eae415779/instructions/html-css-style-color-guide.instructions.md"},"manifest":{}},"content_hash":[33,107,251,67,29,98,195,222,191,156,110,151,252,235,207,222,207,35,9,57,252,114,239,189,109,149,25,182,74,87,22,54],"trust_level":"unsigned","yanked":false}