1.1 colors.colors Colors

Toggle example guides Toggle HTML markup

Use the color() function to add colors to CSS properties. To learn more, read the Chroma documentation.

Example

branding

The site's main colors. Can be used to define colors in other color schemes.

color(red) uses the color: #e92a39 This color is inherited by: link, link-visited, button-bg, progress-bar
color(red-dark) uses the color: #c61826 This color is inherited by: link-active
color(maroon) uses the color: #6d140e
color(maroon-dark) uses the color: #59100a
color(green) uses the color: #0eb992
color(green-dark) uses the color: #009d79
color(black) uses the color: #222 This color is inherited by: text, button-secondary
color(grey-dark) uses the color: #2a2a2a This color is inherited by: progress-bar-border, skip-link-bg
color(grey-light) uses the color: #d6d6d6 This color is inherited by: border, button-disabled, progress-bar-bg
color(grey-extra-light) uses the color: #f3f3f3
color(white) uses the color: #fff This color is inherited by: text-bg, body-bg, button, button-secondary-bg, skip-link

functional

Colors used by functional parts of the design.

color(text) uses the color: #222 (black) This color is inherited by: button-secondary
color(text-bg) uses the color: #fff (white) This color is inherited by: body-bg
color(link) uses the color: #e92a39 (red)
color(link-visited) uses the color: #e92a39 (red)
color(link-active) uses the color: #c61826 (red-dark)
color(border) uses the color: #d6d6d6 (grey-light)
color(body-bg) uses the color: #fff (text-bg)
color(button) uses the color: #fff (white)
color(button-bg) uses the color: #e92a39 (red)
color(button-disabled) uses the color: #d6d6d6 (grey-light)
color(button-secondary) uses the color: #222 (text)
color(button-secondary-bg) uses the color: #fff (white)
color(footer-fat-bg) uses the color: #292929
color(mark-bg) uses the color: yellow
color(progress-bar) uses the color: #e92a39 (red)
color(progress-bar-bg) uses the color: #d6d6d6 (grey-light)
color(progress-bar-border) uses the color: #2a2a2a (grey-dark)
color(skip-link) uses the color: #fff (white)
color(skip-link-bg) uses the color: #2a2a2a (grey-dark)
Source: init/_colors.scss, line 3