Project:Site Color Palette
From Step Mods | Change The Game
{PageTitle|title=Site Color Usage|subtitle=Colors and classes by theme for use on this wiki|author=Step Modifications|forumtid=15793}}{
CSS Classes
Classes are used for colors on the wiki to maintain consistency and to allow variations that accommodate site themes. The following classes should be used as indicated below. Each uses the color name (or shortened name) with 'type' suffix:
- Text - tx - example: orangetx
- Background - bg example: orangebg
- Border - bd example: orangebd
- Color classes can prepend a prefix 'm' to render the 'muted' color with 50% opacity
- Does not apply to 'brighter'/'dimmer'
- Does not apply to text colors
NOTE: Black and white can also be used by substituting 'black'/'white' in any of the color classes. These should ONLY be used in special cases as workarounds.
Invoke by using (for example):
<span class="orangetx">Class for orange text</span>
<span class="morangebg">Class for orange 'muted' background</span>
Classic
| Color | Hex | CSS Class Examples | Template:Fc Keywords |
|---|---|---|---|
| magenta | #d96dc9 | (m)magentbd | magenta |
| purple | #aa88e8 | (m)purplebd | purple, dev |
| blue | #64a5e3 | (m)bluebd | blue, anotice |
| green | #4bb073 | (m)greenbd | green |
| chartreuse | #9ead48 | (m)chartrbd | chartr, bug |
| yellow | #e0b438 | (m)yellowbd | yellow, issue |
| salmon | #daaa99 | (m)salmonbd | salmon, instruction |
| orange | #ff9047 | (m)orangebd | orange |
| red | #ff7077 | (m)redbd | red, rwarning, warn |
| highlight | #ddd | hltx | highlight, brighter |
| dim | #888 | dimtx | dimmer, dim |
Dark
| Color | Hex | CSS Class Examples | Template:Fc Keywords |
|---|---|---|---|
| magenta | #ce56bf | (m)magentbd | magenta |
| purple | #a07fdf | (m)purplebd | purple, dev |
| blue | #5c8dd7 | (m)bluebd | blue, notice |
| green | #43a86b | (m)greenbd | green |
| chartreuse | #96a13f | (m)chartrbd | chartr, bug |
| yellow | #d6b026 | (m)yellowbd | yellow, issue |
| salmon | #d0a08f | (m)salmonbd | salmon, instruction |
| orange | #e78f4f | (m)orangebd | orange |
| red | #f76770 | (m)redbd | red, warning, warn |
| highlight | #d8d8d8 | hltx | highlight, brighter |
| dim | #888 | dimx | dimmer, dim |
Light
| Color | Hex | CSS Class Examples | Template:Fc Keywords |
|---|---|---|---|
| magenta | #d96dc9 | (m)magentbd | magenta |
| purple | #9978d8 | (m)purplebd | purple, dev |
| blue | #5c8dd6 | (m)bluebd | blue, notice |
| green | #3fa963 | (m)greenbd | green |
| chartreuse | #96a13f | (m)chartrbd | chartr, bug |
| yellow | #d0a91a | (m)yellowbd | yellow, issue |
| salmon | #c49584 | (m)salmonbd | salmon, instruction |
| orange | #e38b4b | (m)orangebd | orange |
| red | #f76770 | (m)redbd | red, warning, warn |
| highlight | #333 | hltx | highlight, brighter |
| dimmer | #888 | dimx | dimmer, dim |
