Style Guide - Colors
Primary Colors
| Description | Name | RGB | HEX | Variable |
|---|---|---|---|---|
| Primary | Silver | RGB(170, 170, 170) | #aaaaaa | primary-color |
| Header | Gray | RGB(120, 120, 120) | #787878 | header-color |
| Secondary | Payne's gray | RGB(90, 100, 110) | #5a646e | secondary-color |
| Highlight | Payne's gray | RGB(100, 110, 130) | #646e82 | highlight-color |
| Border | Davy's gray | RGB(80, 80, 80) | #505050 | border-color |
Banner Colors
| Name | RGB | HEX |
|---|---|---|
| Dim gray | rgb(101,108,115) | #656c73 |
| Cadet gray | rgb(151,160,166) | #97A0A6 |
| Anti-flash white | rgb(235,240,242) | #EBF0F2 |
| Night | rgb(13,13,13) | #0D0D0D |
| Electric blue | rgb(136,242,242) | #88F2F2 |
| Persian orange | rgb(217,144,102) | #D99066 |
Additonal Colors/Accents
The process I used for this Theme
Step 1: Make full page image of Your BBCode Style Guide.
Step 2: Use image color picker extraction tools (I used three for best coverage) to generate selection.
Step 3: Combine results to get your palette.
Step 4: Use Dev Inspector to grab main background colors
Step 5: Use image color inspector to get Banner and Logo, if any, colors.
My extraction Results
Adobe Color
Color Palette Extractor
Coolors Tip: I had to add as many columns as it allows before loading image, for a good spread.
Combined and Grouped
Alwane
Comments