Embedded Files
Maintaining color consistency is important for uniformity among the varying works of ETX. The colors presented here should be used for ETX created content.
Downloads
Downloads
This file contains the same information as this guide. All colors have been given a variable name. For example, instead of defining a color of a background as:
background-color: #006586;
Use the variable name:
background-color: var(--blue100);
The ETX Swatch file, ETX-Swatch_v01.ase, can be downloaded and used with Adobe programs.
Color Palette Value Reference
Color Palette Value Reference
Blue (ocean)
Blue (ocean)
Used for primary buttons such as ‘Next’ or ‘Submit’. The blue color group is generally reserved for major headers, inputs, and actions.
100
hex: #006586
rgb: 0, 101, 134
rgba: 0, 101, 134, 1
Orange (autumn)
Orange (autumn)
Used to call out vocabulary terms. Used most often after blue.
60 Dark
hex: #814305
rgb: 129, 67, 5
rgba: 215, 112, 9, .6
80 Dark
hex:#ac5a07
rgb: 172, 90, 7
rgba: 215, 112, 9, .8
Purple (royal)
Purple (royal)
Commonly pairs with Green as they contrast the best.
100
hex: #5b2778
rgb: 191, 39, 120
rgba: 191, 39, 120, 1
80
hex: #7c5293
rgb: 124, 82, 147
rgba: 191, 39, 120, .8
60 Dark
hex: #371748
rgb: 55, 23, 72
rgba: 191, 39, 120, .6
80 Dark
hex: #491f60
rgb: 273, 31, 96
rgba: 191, 39, 120, .8
Green (pine)
Green (pine)
Used for "correct" UI. Commonly pairs with Purple as they contrast the best.
80
hex: #477e59
rgb: 25, 94, 47
rgba: 25, 94, 47, .8
60 Dark
hex: #0f381c
rgb: 15, 56, 28
rgba: 25, 94, 47, .6
80 Dark
hex: #144b26
rgb: 20, 75, 38
rgba: 25, 94, 47, .8
Red (cardinal)
Red (cardinal)
Used for "incorrect" UI. Used less often to avoid negative connotations. Works well as a color for charts.
100
hex: #bd1f2e
rgb: 189, 31, 46
rgba: 189, 31, 46, 1
80
hex: #ca4c58
rgb: 202, 76, 88
rgba: 189, 31, 46, .8
60 Dark
hex: #71131c
rgb: 113, 19, 28
rgba: 189, 31, 46, .6
80 Dark
hex: #971925
rgb: 113, 19, 28
rgba: 189, 31, 46, .8
Yellow (canary)
Yellow (canary)
Most frequently used to highlight: behind text, paths, areas, diagrams, etc.
60 Dark
hex: #978800
rgb: 151, 136, 0
rgba: 252, 227, 0, .6
Dark Gray (Graphite)
Dark Gray (Graphite)
Use as needed. Can also use full black (not listed).
40
hex: #717171
rgb: 113, 113, 113
rgba: 51, 51, 51, .4
20
hex: #858585
rgb: 133, 133, 133
rgba: 51, 51, 51, .2
Light Gray (Rain Cloud)
Light Gray (Rain Cloud)
Use as needed. Can also use full white (not listed).
Helpful Information
Helpful Information
Contrast for Readability
Contrast for Readability
Accessibility Standards
In order to create content that meets accessibility standards it is important to be mindful of users with low-vision impairment. Make sure that text color and its background have enough contrast to ensure readability.
Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Contrast Checker
The colors on this page include a Contrast Checker that indicates which can be paired with Black, Dark Gray, Near White, and White text. If the contrast requirement is met, a link to WebAIM: Color Contrast Checker will be provided. If the contrast requirement is not met, then it is crossed out.
In the example below the text color of "Lorem ipsum" has a background color (red then gray) that meets the contrast minimum requirement.
Black
Black text (#00000) is safe to use on this color.
Dark Gray
Dark Gray text (#333333) is safe to use on this color.
Near White
Near White text (#ebebeb) is safe to use on this color.
White
White text (#ffffff) is safe to use on this color.
*
A * indicates that it can only be used with large/bold text.
See WebAIM: Color Contrast Checker for verification.
Also see the Color Friendly Combinations to determine which color combinations are distinguishable for the main color blindess types.
Hierarchy Explained
Hierarchy Explained
Order
The palette on this page is in order by usage frequency; From higher to lower.
For example, Blue (ocean) is the most commonly used color while Yellow (canary) is the least commonly used.
What is 60 Dark?
When a color is labeled as 60 Dark, or 80 Dark, it refers to the what the color becomes once its full color (100) is faded to 80% or 60% over a black background.
Page updated
Report abuse