1  # BrowserEQ Updated Color Palette
 2  
 3  This document outlines the color palette used in the BrowserEQ documentation website, based on the palette from [Coolors.co](https://coolors.co/000022-c42847-ff9b71-6bd425).
 4  
 5  ## Primary Colors
 6  
 7  | Color Name | Hex Code | RGB | Description | Usage |
 8  |------------|----------|-----|-------------|-------|
 9  | Midnight | `#000022` | rgb(0, 0, 34) | Dark navy blue | Backgrounds, footer, header |
10  | Ruby | `#c42847` | rgb(196, 40, 71) | Bold red | Primary actions, headings, accents |
11  | Atomic Tangerine | `#ff9b71` | rgb(255, 155, 113) | Warm orange | Accents, links, highlights |
12  | Green Lizard | `#6bd425` | rgb(107, 212, 37) | Bright green | Success states, special features |
13  
14  ## Supporting Colors
15  
16  | Color Name | Hex Code | Description |
17  |------------|----------|-------------|
18  | Midnight Light | `#1a1a4e` | Lighter version of midnight for hover states |
19  | Ruby Light | `#e14b67` | Lighter version of ruby |
20  | Atomic Tangerine Light | `#ffb293` | Lighter version of atomic tangerine |
21  | Green Lizard Light | `#84e93e` | Lighter version of green lizard |
22  
23  ## Functional Color Assignments
24  
25  | Function | Color | Description |
26  |----------|-------|-------------|
27  | Primary Color | Ruby | Used for primary buttons, headings |
28  | Secondary Color | Midnight | Used for dark backgrounds, footer |
29  | Accent Color | Atomic Tangerine | Used for highlighting, links, language toggles |
30  | Success Color | Green Lizard | Used for success indicators |
31  | Background | `#f5f7fa` | Light gray background |
32  | Text Color | `#222233` | Dark text with slight blue tint |
33  | Border Color | `#e1e2ea` | Very light bluish-gray for borders |
34  
35  ## Color Palette Hierarchy
36  
37  The color palette has been created with a clear hierarchy:
38  
39  1. **Ruby** - Primary action color for buttons, headings, and important UI elements
40  2. **Midnight** - Secondary color for backgrounds, footer, header
41  3. **Atomic Tangerine** - Accent color for links, highlights, and accent UI elements
42  4. **Green Lizard** - Supporting color for success states and special features
43  
44  ## Feature Card Color Coding
45  
46  The feature cards on the homepage use a color-coding system:
47  
48  - Default cards: Ruby border
49  - Every third card: Atomic Tangerine border  
50  - Every fourth card: Green Lizard border
51  
52  ## Accessibility Considerations
53  
54  All color combinations have been checked for accessibility and maintain at least a 4.5:1 contrast ratio for text content, in accordance with WCAG 2.1 Level AA guidelines.
55  
56  ## Example Usage
57  
58  ```css
59  :root {
60    --midnight: #000022;
61    --ruby: #c42847;
62    --atomic-tangerine: #ff9b71;
63    --green-lizard: #6bd425;
64  }
65  
66  h1 {
67    color: var(--ruby);
68  }
69  
70  a {
71    color: var(--atomic-tangerine);
72  }
73  
74  .success-message {
75    color: var(--green-lizard);
76  }
77  ```
78  
79  This updated color palette gives the BrowserEQ documentation a bold, cohesive look with a focused color scheme while maintaining readability and visual hierarchy.