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.

Visual mode compliance
In order to use colors in a way that is visual mode compliant, use design tokens rather than the constants below.

On this page

System color palette

Display value
Color name
HEX value
Examples
white#ffffff

  • The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.

  • The background color of container headers. For example: headers of form sections, containers, tables, and card collections.

  • The default background color of form controls. For example: radio buttons and checkboxes default background fill color.

  • The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.

  • The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.

  • The background color of the main content area on a page. For example: content area in app layout.

  • The background color of an item in warning state. For example: warning alerts.

  • The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.

  • The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.

  • The active text color of primary buttons.

  • The default text color of primary buttons.

  • The hover text color of primary buttons.

  • The color of the home header's text, displayed on the Service's home page.

red-600#d91515

  • Background color for red notifications. For example: red badges and error flash messages.

  • The border color of an item in error state. For example: error alerts.

  • The color of error text and icons. For example: form field error text and error status indicators.

  • The color of warning icons.

red-100#fff7f7

  • The background color of an item in error state. For example: error alerts.

grey-900#000716

  • The background color of the home header, displayed on the Service's home page.

  • The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.

  • The text color of hovered or selected dropdown items. For example: label text color of the item on hover in a select, multiselect, and autosuggest.

  • The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.

  • The default color for headings 1-5. For example: headings in tables, card collections, containers, form sections, forms, and app layout panels.

  • The color of clickable elements on hover. For example: icons on hover.

  • This is the default color for non-form labels. For example: the key in key/value pairs and card's sections labels.

grey-600#414d5c

  • The color of text that is secondary to base text. For example: text in the navigation and tools panels.

  • The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.

  • The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.

  • The color of clickable elements in their default state. For example: tabs, and icons.

grey-550#5f6b7a

  • The default color for counters. For example: counters in table headers

  • The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.

  • The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.

  • The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.

  • The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.

grey-500#7d8998

  • The default border color of form controls. For example: radio buttons and checkboxes.

  • The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.

  • The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.

  • The border color of an item in warning state. For example: warning alerts.

grey-400#9ba7b6

  • The border color of normal buttons in disabled state.

  • The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.

  • The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.

grey-300#d1d5db

  • The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.

  • The color of the home header's secondary text, displayed on the Service's home page.

  • The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.

grey-200#e9ebed

  • The background color of primary buttons in disabled state.

  • The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.

  • The border color of primary buttons in disabled state.

  • The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.

  • The color of board placeholder in active state.

grey-150#f4f4f4

  • The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.

grey-125#f8f8f8

  • The background color of shaded table cells.

grey-100#fbfbfb

  • The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.

  • Default text color for notifications. For example: the text on badges and flashes.

green-600#037f0c

  • Background color for green notifications. For example: green badges and success flash messages.

  • The border color of an item in success state. For example: success alerts.

  • The color of success text and icons. For example: success status indicators and success alert icon.

green-100#f2fcf3

  • The background color of an item in success state. For example: success alerts.

blue-800#033160

  • The background color of primary buttons in active state.

  • The background color of primary buttons in hover state.

  • The border color of normal buttons in hover state.

  • The active text color of normal buttons. For example: Active text color in normal and link buttons.

  • The hover text color of normal buttons.

  • The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.

blue-600#0972d3

  • The default background color of primary buttons.

  • The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.

  • Background color for blue notifications. For example: blue badges and info flash messages.

  • The border color of normal buttons.

  • The color of focus states. For example: the focus ring around interactive elements.

  • The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.

  • The border color of an informational item. For example: information alerts.

  • The accent text color used to guide a user. For example: the highlighted page in the side navigation, active tab text, selected day text color in date picker, and hover state in expandable section.

  • The default text color of normal buttons.

  • The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.

  • The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.

  • The color of info text and icons. For example: info status indicators and info alert icon.

blue-300#b5d6f4

  • The background color of checked toggles in disabled state.

blue-200#d3e7f9

  • The color of board placeholder in hovered state.

blue-100#f2f8fd

  • The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.

  • The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.

  • The background color of an informational item. For example: information alerts.

-transparent

  • The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.

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.