Valo defines a set of CSS custom properties you can use to apply a consistent color palette across your application.
Import color.html to use them.
The default color palette is WCAG 2.0 AA level compliant unless otherwise noted.
The base color is used as the main background color for the system. The grayscale colors are designed to be used on top of it, and the text colors are designed to have proper contrast with it.
The most prominent color in the system. It is used to bring attention to certain elements in the interface. Accompanying text and contrast colors are also defined.
Usually a red color, used for error indicators, error messages and buttons that can cause permanent data loss. Accompanying text and contrast colors are also defined.
Usually a green color, used for success messages and buttons that complete a certain task. Accompanying text and contrast colors are also defined.
The --valo-success-color does not have enough contrast by default to meet WCAG 2.0 AA level requirements (3:1). Use hsl(144, 82%, 38%) for compliant contrast.
The --valo-success-text-color is compliant by default.
These colors form the foundation for your application colors. The grayscale colors consist of 11 different shades of “black” and “white”, each with a degree of transparency.
The tint and shade colors not always pure grayscale by default, but tinted slightly with the primary color.
The grayscale colors are useful for dividing pages into sections with different backgrounds and borders, or used as text colors, for example.
The default text colors are tested to have enough contrast on top of the Base color and “Base + 5–20% Contrast color”. Avoid using a a higher Contrast color as a background color for any important content.
The contrast colors work automatically for both light and dark variations. For the light palette the shade colors are used, and for the dark palette the tint colors are used.
The following text colors have the desired contrast with the Base color.
Note, that --valo-primary-text-color is not necessarily the same as --valo-primary-color. Use the main color for backgrounds and the “text” version for text.
The same applies for the “error” and “success” colors as well.
The “tertiary” and “disabled” text colors do not have enough contrast by default to meet WCAG 2.0 AA level requirements (3:1). Only use them for text which is not crucial for the end user to see.
The system has a dark color variation available out of the box.
Each color has two variations: the default variation which is used for the light palette, and another variation used for the dark palette.
You need to import and include the “valo-color” style module before you can use the dark palette. It needs to be imported in the same style scope where you want to apply the dark colors.
Apply the theme="dark" attribute on the HTML element:
<html theme="dark">
<!-- The whole page/app will use the dark palette colors -->
</html>
You can apply the theme="dark" attribute on any element inside the style scope where you include the style module:
The above example doesn’t work in Internet Explorer 11 or Edge 14. Read the compatibility instructions how to make the dark colors, scoped inside an element, work in all supported browsers.
The following elements, when you apply the theme="dark" attribute for them, will also set their background color to the dark palette Base color.
var(--valo-primary-text-color)You will see the light palette colors here on Internet Explorer 11 and Edge 14. See Browser compatibility for more info.
var(--valo-primary-text-color)