Liquipedia Color Scheme

The following page is a resource to help aid contributors in using colors on Liquipedia. Due to the complexity of Liquipedia's new color system we felt it was important to categorize how color is/should be used on the wiki, ensuring that Liquipedia wikis are meeting accessibility guidelines and that the right colors are being used for the right purposes (cross-wiki).

Below you’ll find a grid of colors grouped by their scope, and additional details on where and how they should be used. You can click on each swatch to show detailed statistics, and where it is used.

See the notes below for more information on the color system.

Core System Colors

The following are the default colors used for non branch-specific needs. From links, to placement colors, group tables, event types, and more. They are the most commonly used colors on the wiki.

1. -2
2. +2
3. +7
4. +7
5. 0
6. +7
7. 0
8. +2
9. +7
10. *
11. 0
12. +7
13. *
14. +6
15. +7
16. -3
17. +2
18. +7
19. +6
20. +6
21. +6
22. *
23. 0
24. +3
25. +6
26. -2
27. +6
28. 0
29. +6
30. -5
31. 0
32. +3
33. +6
34. +7.5
35. +8
36. White

Core Colors, Dark Backgrounds

These core system colors are only to be used on dark backgrounds. Their usage as a result is very limited.

1. -6
2. -5
3. -4.5
4. -4
5. -3

Theme Colors

The following are all the possible theme colors that can be used when developing new wiki branches. Please note that +6 variations should only be used for frontpage boxes and borders, and not as a primary/secondary color.

1. -2
2. +6
3. +7
4. -1
5. +6
6. +7
7. 0
8. +6
9. +7
10. 0
11. +6
12. +7
13. 0
14. +6
15. +7
16. -2
17. +6
18. +7
19. -3
20. +6
21. +7
22. -4
23. +6
24. +7
25. -5
26. +6
27. +7
28. -4
29. +6
30. +7
31. -4
32. +6
33. +7
34. -3
35. +6
36. +7
37. -2
38. +6
39. +7

Faction Colors

Variations for various branch-specific factions (hero classes, map sides, races, etc...) are contained here. There are three faction sub-groups: desaturated in-core system uses, and two variations for saturated colors on either light or dark backgrounds.

Note that the two variations per background-type are for non-text and text content (in that order). This is in order to satisfy WCAG contrast guidelines. If there is only one color in a group, it satisfies both non-text and text situations.

1. +7
2. +7
3. +7
4. +7
5. +7
6. +7
7. +7
8. +6
9. +6
10. +6
11. +6
12. +6
13. +6

1. -2
2. 0
3. 0
4. 0
5. 0
6. 0
7. *
8. *
9. **
10. *
11. **
12. *
13. **
14. *
15. **
16. *
17. **
18. *
19. **
20. 0
21. *

1. 0
2. *
3. *
4. **
5. *
6. **
7. *
8. **
9. *
10. **
11. 0
12. **
13. 0
14. 0
15. 0
16. 0
17. 0
18. 0
19. +3

Notes

The base color pallette was constructed in the following fashion: A single color was first chosen (rgb 49, 81, 156), and then each adjacent swatch was spaced in 30° increments from it. To get the necessary light and dark variations each swatch was overlaid with black/white in 12% increments of opacity, up to 84% (96% for grey in the light direction).

To display this systemization of color, numbers in each swatch indicate the deviation from the base swatch shown in the grid below. For example, Gigas +2 is two steps lighter than its base swatch, Gigas 0.

1. 0
2. 0
3. 0
4. 0
5. 0
6. 0
7. 0
8. 0
9. 0
10. 0
11. 0
12. 0
13. 0

Gold is missing in the base colors above as it is a unique swatch only to be used for placements.

In order for faction colors to comply with accessibility guidelines, unique adjustments outside of the color system were necessary. From the base color adjustments for brightness were made first, and then saturation if the former could not reach the correct contrast ratio. These adjustments are marked on swatches with asterisks (* and **).

Please also note that color names are designed/labeled as approximations for CSS use, and not to be considered official color names.

Color Use Categories