mirror of
https://github.com/github/awesome-copilot.git
synced 2026-02-20 02:15:12 +00:00
Merge pull request #570 from jhauga/html-css-style-color-guide
Instructions for best color practices
This commit is contained in:
Aaron Powell
GitHub
@@ -86,6 +86,7 @@ Team and project-specific instructions to enhance GitHub Copilot's behavior for
|
||||
| [Go MCP Server Development Guidelines](../instructions/go-mcp-server.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fgo-mcp-server.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fgo-mcp-server.instructions.md) | Best practices and patterns for building Model Context Protocol (MCP) servers in Go using the official github.com/modelcontextprotocol/go-sdk package. |
|
||||
| [Guidance for Localization](../instructions/localization.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Flocalization.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Flocalization.instructions.md) | Guidelines for localizing markdown documents |
|
||||
| [How to Use the Sample Components](../instructions/pcf-sample-components.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpcf-sample-components.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpcf-sample-components.instructions.md) | How to use and run PCF sample components from the PowerApps-Samples repository |
|
||||
| [HTML CSS Style Color Guide](../instructions/html-css-style-color-guide.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fhtml-css-style-color-guide.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fhtml-css-style-color-guide.instructions.md) | Color usage guidelines and styling rules for HTML elements to ensure accessible, professional designs. |
|
||||
| [Instructions for accessibility](../instructions/a11y.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fa11y.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fa11y.instructions.md) | Guidance for creating more accessible code |
|
||||
| [Java 11 to Java 17 Upgrade Guide](../instructions/java-11-to-java-17-upgrade.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava-11-to-java-17-upgrade.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava-11-to-java-17-upgrade.instructions.md) | Comprehensive best practices for adopting new Java 17 features since the release of Java 11. |
|
||||
| [Java 17 to Java 21 Upgrade Guide](../instructions/java-17-to-java-21-upgrade.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava-17-to-java-21-upgrade.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava-17-to-java-21-upgrade.instructions.md) | Comprehensive best practices for adopting new Java 21 features since the release of Java 17. |
|
||||
|
||||
104
instructions/html-css-style-color-guide.instructions.md
Normal file
104
instructions/html-css-style-color-guide.instructions.md
Normal file
@@ -0,0 +1,104 @@
|
||||
---
|
||||
description: 'Color usage guidelines and styling rules for HTML elements to ensure accessible, professional designs.'
|
||||
applyTo: '**/*.html, **/*.css, **/*.js'
|
||||
---
|
||||
|
||||
# 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
|
||||
|
||||
- [Color Tool](https://civicactions.github.io/uswds-color-tool/)
|
||||
- [Government or Professional Color Standards](https://designsystem.digital.gov/design-tokens/color/overview/)
|
||||
- [UI Color Palette Best Practices](https://www.interaction-design.org/literature/article/ui-color-palette)
|
||||
- [Color Combination Resource](https://www.figma.com/resource-library/color-combinations/)
|
||||
Reference in New Issue
Block a user