Jump to content

Site Color Palette


TechAngel85

Recommended Posts

Discussion topic:
Site Color Palette by Step Modifications
Colors and classes by theme for use on the Step platform.


This is our color standardization in use across our official content and features. This is implemented so there aren't multiple staff/curators assigning colors palettes to elements arbitrary, thus, keeping the theme consistent across our official content.

Highlight and dimmer are just that and shouldn't need any special standards. They are simply used to provide dimmer or highlighted text.

Current Color Palette

  • red
  • salmon
  • orange
  • yellow
  • chartreuse
  • green
  • blue
  • purple
  • magenta
  • highlight
  • dimmer


Color Standards

ROYGBIV

  • Red, Orange, Yellow, Green, Blue, Indigo, Violet
  • Step's Color Palette in ROYGBIV order: red, salmon, orange, yellow, chartreuse, green, blue, purple, magenta

Multi-Use Colors
Any time a color must be picked for a feature that will use multiple colors. This includes two versions:

  1. Left to Right
    • The simplest solution is to use the colors in the ROYGBIV order listed above.
  2. Left to Right - Skip
    • Used when there is little to no space between the colors used, and more distinguished colors are required for readability:
    • Standard: red, yellow, blue, salmon, chartreuse, purple, orange, magenta, green
    • The colors sitting in the half way points (salmon, chartreuse, magenta) are ignored during first pass due to them being too similar to the colors before and after. From there, simply select every other color, left to right, until all colors are listed.
    • A good example of this would be the flags in the mod tables. 

 

"Left to Right - Skip" Logic
Pass 1:
 red, salmonignored, orangeskippedyellow, chartreuseignoredgreenskipped, blue, purpleskipped, magentaignored  =  red, yellow, blue
Pass 2: salmon, orangeskippedchartreuse, greenskipped, purple, magentaskipped  =  red, yellow, blue, salmon, chartreuse, purple,
Pass 3: orange, greenskipped, magenta  =  red, yellow, blue, salmon, chartreuse, purple, orange, magenta, 
Pass 4: green  =  red, yellow, blue, salmon, chartreuse, purple, orange, magenta, green

Link to comment
Share on other sites

  • TechAngel85 changed the title to Site Color Palette

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site, you agree to our Guidelines, Privacy Policy, and Terms of Use.