Project:Site Color Palette

From Step Mods | Change The Game
Delta c.png

Site Color Palette

Colors and classes by theme for use on the Step platform

by: Step Modifications  | Forum Topic

CSS Classes[edit | edit source]

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[edit | edit source]

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 #f09047 (m)orangebd orange
red #ff7077 (m)redbd red, rwarning, warn
highlight #ddd hltx highlight, brighter
dim #888 dimtx dimmer, dim



Dark[edit | edit source]

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 #f08740 (m)orangebd orange
red #f76770 (m)redbd red, warning, warn
highlight #d8d8d8 hltx highlight, brighter
dim #888 dimx dimmer, dim



Light (theme retired)[edit | edit source]

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 #f08740 (m)orangebd orange
red #f76770 (m)redbd red, warning, warn
highlight #333 hltx highlight, brighter
dimmer #888 dimx dimmer, dim