Colors
Colors set the emotional tone of a user interface and are a powerful way to establish consistency. Each color, as well as the palette as a whole, has specific usage guidelines and role definitions to meet accessibility requirements.
On this page
Did this page help you?
Tell us more - optional
System color palette
Preview | Color name | HEX value | Examples |
---|---|---|---|
Guidelines
Creating a strong contrast is key to directing attention to the right place. That’s why most of Cloudscape user interface (UI) is built from white with grayscale, contrasting with the colorful calls to action and status indicators. The colors in our color palette reinforce our brand as well as user actions. Using colors as intended will help achieve consistency between interfaces. If you use color casually, without thinking about the results at a larger scale, you're likely to confuse your users and be less successful at getting your point across.
There are various ways colors can be used to convey messages; however, color should never be the only visual means of conveying information. Ensure users who cannot see color can still perceive information by using other visual means, such as pairing color with iconography or text. Cloudscape uses color to highlight primary actions, encode statuses, and trigger associations through the colors of those statuses.
Highlighting and accent: Blue should be used mainly to bring attention to the primary action on a page. It should also be used for secondary actions, links, and giving an accent to interactive elements.
Encoding and associations: Red and green status colors should be used mainly to indicate the status of resources, so the user can take action, and be confident that their other resources are performing correctly.
For information on how to apply colors on charts, see data visualization colors.
Accessibility
Make sure there is sufficient contrast between background and foreground colors. For example, text or a button on a background.