Scioly.org:Design

Design on Scioly.org covers helpful design schemes to use across the wiki and forums. These color schemes can be used in media relating to the site, such as images, tables, and maps.

Colors

Below are some colors used across Scioly.org. Using these colors helps ensure visual consistency across the site. These colors are based on historic site design and have been paired in ways that allow for good color contrast between paired colors, which is helpful for ensuring legibility of text.

Primary Colors

Scioly.org's primary color palette consists of Scioly.org blue, Scioly.org yellow, and white. You can find all of these colors in the site's navigation bar.

Scioly.org blue may be used in range of tints, which can be useful when preparing tables or maps. However, when only one variant of blue is needed, you should opt for the fully tinted version of Scioly.org blue (#2e66b6).

Scioly.org yellow and white should not be used as tints as these colors are already lightly tinted and further tinting the yellow will cause it to lose contrast from white.

Scioly.org Blue	Scioly.org Yellow	White
100% (#2e66b6)	100% (#fee372)	100% (#ffffff)
90% (#4375bd)
80% (#5885c5)
70% (#6d94cc)
60% (#82a3d3)
50% (#97b3db)
40% (#abc2e2)
30% (#c0d1e9)
20% (#d5e0f0)
10% (#eaf0f8)

Secondary Colors

Scioly.org's secondary color palette provides an extended range of colors that complements our primary color palette. You can find Scioly.org red, grey, and light grey all on the site's homepage.

Scioly.org red and grey may be used in a range of tints, which can be useful when preparing tables or maps. However, when only one variant is needed, you should opt for the fully tinted version of the color: Scioly.org red (#aa0000) or grey (#555555).

Light grey (#f4f4f4) should not be used as tints as it is already lightly tinted and further tinting will cause it to lose contrast from white. Light grey should only be used as a background color.

Scioly.org Red	Grey	Light Grey
100% (#aa0000)	100% (#555555)	100% (#f4f4f4)
90% (#b31a1a)	90% (#666666)
80% (#bb3333)	80% (#777777)
70% (#c44d4d)	70% (#888888)
60% (#cc6666)	60% (#999999)
50% (#d58080)	50% (#aaaaaa)
40% (#dd9999)	40% (#bbbbbb)
30% (#e6b3b3)	30% (#cccccc)
20% (#eecccc)	20% (#dddddd)
10% (#f7e6e6)	10% (#eeeeee)

Other Colors

This section contains other colors that are used around the site but are not used widely enough to be part of the primary or secondary color palettes.

Global Moderator Green	Gallery/Wiki Moderator Blue	Purple	Orange
100% (#00aa00)	#000077	#9900ff	#ff6600
90% (#1ab31a)
80% (#33bb33)
70% (#4dc44d)
60% (#66cc66)
50% (#80d580)
40% (#99dd99)
30% (#b3e6b3)
20% (#cceecc)
10% (#e6f7e6)

Maintaining Color Contrast

Maintaining contrast between colors is important to ensure accessibility. Lightly-tinted text on light backgrounds or darkly-shaded text on dark backgrounds can make the text difficult to read.

The following color pairings allow for visual consistency across the site and legibility of text. In general, when using tints, use white text if the tint is 80% and above.

Text Color	Background Color	Example
White (#ffffff)	Scioly.org Blue (#2e66b6)	Scioly.org
White (#ffffff)	Scioly.org Red (#aa0000)	Scioly.org
White (#ffffff)	Grey (#555555)	Scioly.org
White (#ffffff)	Global Moderator Green (#00aa00)	Scioly.org
Grey (#555555)	Scioly.org Yellow (#fee372)	Scioly.org
Grey (#555555)	Light Grey (#f4f4f4)	Scioly.org
Scioly.org Blue (#2e66b6)	Light Grey (#f4f4f4)	Scioly.org

Map Colors

For the convenience of map editors, this section contains the same tints from above that are useful for coloring maps. It is recommended that you add new colors to maps in the order shown (blue, then red, then green, then grey). For grey tints, you may need to work with a limited range to ensure contrast between your grey tints and the background of your map, which might be a light grey.

Scioly.org Blue	Scioly.org Red	Global Moderator Green	Grey
100% (#2e66b6)	100% (#aa0000)	100% (#00aa00)	100% (#555555)
90% (#4375bd)	90% (#b31a1a)	90% (#1ab31a)	90% (#666666)
80% (#5885c5)	80% (#bb3333)	80% (#33bb33)	80% (#777777)
70% (#6d94cc)	70% (#c44d4d)	70% (#4dc44d)	70% (#888888)
60% (#82a3d3)	60% (#cc6666)	60% (#66cc66)	60% (#999999)
50% (#97b3db)	50% (#d58080)	50% (#80d580)	50% (#aaaaaa)
40% (#abc2e2)	40% (#dd9999)	40% (#99dd99)	40% (#bbbbbb)
30% (#c0d1e9)	30% (#e6b3b3)	30% (#b3e6b3)	30% (#cccccc)
20% (#d5e0f0)	20% (#eecccc)	20% (#cceecc)	20% (#dddddd)
10% (#eaf0f8)	10% (#f7e6e6)	10% (#e6f7e6)	10% (#eeeeee)