Cloudscape Docs MCP Server

--- title: "Colors - Cloudscape Design System" source: "https://cloudscape.design/foundation/visual-foundation/colors/" created: 2025-10-01 Published: July 1, 2022 description: "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." --- ## Colors In order to use colors in a way that is [visual mode](https://cloudscape.design/foundation/visual-foundation/visual-modes/)  compliant, use  [design tokens](https://cloudscape.design/foundation/visual-foundation/design-tokens/) rather than the constants below. These colors come from the broader [AWS brand palette](https://design.amazon.com/styleguide/9188F3F120Af/aws/visual-identity/color/). By integrating familiar colors as foundational elements, we create brand harmony across AWS offerings. | Preview | Color name | HEX value | Examples | | --- | --- | --- | --- | | | blue-50 | #f0fbff | - The background color of link buttons in hover state. - The background color of normal buttons in hover state. - 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 inactive segments in a segmented control on hover. - The background color of an informational item. For example: information alerts. - The background color of the feedback/input dialogue box. - The color of file upload dropzone background in hovered state. | | | blue-100 | #d1f1ff | - The background color of link buttons in active state. - The background color of normal buttons in active state. - The background color of normal toggle buttons in pressed state. - The color of board placeholder in hovered state. - The color of drag placeholder in hovered state. | | | blue-200 | #b8e7ff | - The background color of checked toggles in disabled state. | | | blue-600 | #006ce0 | - 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. - The background color of the app layout toggle button when it's selected and active. - The default background color of the app layout toggle button when it's selected. - Background color for blue notifications. For example: blue badges and info flash messages. - The background color of the active segment in a segmented control. - The border color of normal buttons. - The border color of normal toggle buttons in pressed state. - The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items. - The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect. - 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 border color of the feedback/input dialogue box. - 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 color of the app layout toggle button on hover. - 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-700 | #004a9e | - The background color of the app layout toggle button on hover when it's selected. | | | blue-900 | #002b66 | - 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 active 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 pressed text color of normal toggle 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. - The text color of inactive segments in a segmented control on hover. - The color of file upload dropzone border in hovered state. | | | green-50 | #effff1 | - The background color of an item in success state. For example: success alerts. | | | green-600 | #00802f | - 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. | | | grey-100 | #f9f9fa | - Text color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1" - Text color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2" - Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5" - 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. | | | grey-150 | #f6f6f9 | - The background color of shaded table cells. - The background color of `incoming` chat bubble. | | | grey-200 | #f3f3f7 | - The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns. | | | grey-250 | #ebebf0 | - 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 border color for row dividers. For example: row dividers for table and collection preferences. - The color of the home header's text, displayed on the Service's home page. - The color of board placeholder in active state. - The color of drag placeholder in active state. | | | grey-300 | #dedee3 | - The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox. - The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar. | | | grey-350 | #c6c6cd | - 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 the home header's secondary text, displayed on the Service's home page. | | | grey-400 | #b4b4bb | - The border color of normal buttons in disabled state. - The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest. - 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-500 | #8c8c94 | - The text color of normal buttons in disabled state. - The color of icon buttons in disabled state. - The text color of primary buttons in disabled state. - 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 color used for the icon delimiter between breadcrumb items. - The default color of file upload dropzone border. | | | grey-600 | #656871 | - Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5" - The background color of the app layout toggle button on hover. - The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles. - The text color that marks the breadcrumb item for the page the user is currently viewing. - 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-650 | #424650 | - The background color of the app layout toggle button when it's active. - The default background color of the app layout toggle button. - Background color for grey notifications. For example: grey badges. - The default background color of avatars. - The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select. - The border color of the active segment in a segmented control. - The border color of inactive segments in a segmented control. - The border color of disabled segments in a segmented control. - The border color of inactive segments in a segmented control on hover. - 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. - The text color of inactive segments in a segmented control. - The default color of file upload dropzone text. - The color of file upload dropzone text in hovered state. | | | grey-950 | #0f141a | - Text color in a notification to represent a medium-level of severity. For example: "Sev-3" - Text color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4" - The background color of the home header, displayed on the Service's home page. - Text color of `outgoing` chat bubble. - Text color of `incoming` chat bubble. - 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 default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect. - 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 2-5. For example: headings in containers, form sections, forms, and app layout panels. - The color of clickable elements in their active state. For example: tabs and icons. - The color of clickable elements on hover. For example: icons on hover. - The pressed text color of icon toggle buttons. - The default color for non-form labels. For example: the key in key/value pairs and card's sections labels. - The color of the title in the top navigation. | | | purple-700 | #7300e5 | - The default color for labels indicating that content is produced by generative AI. | | | red-50 | #fff5f5 | - The background color of an item in error state. For example: error alerts. | | | red-600 | #db0000 | - 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. | | | severity-dark-red | #870303 | - Background color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1" | | | severity-orange | #f89256 | - Background color in a notification to represent a medium-level of severity. For example: "Sev-3" | | | severity-red | #ce3311 | - Background color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2" | | | severity-yellow | #f2cd54 | - Background color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4" | | | white | #ffffff | - The default background color of normal buttons. - The background color of normal buttons in disabled state. - 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. - Background color for the popover container. - The background color of inactive segments in a segmented control. - The background color of disabled segments in a segmented control. - The text and icon color of avatars. - 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 default color of the app layout toggle. - The color of the app layout toggle button when it's active. - The color of the app layout toggle button when it's selected. - The text color of the active segment in a segmented control. - The default color of file upload dropzone background. | | | yellow-50 | #fffef0 | - The background color of an item in warning state. For example: warning alerts. | | | yellow-400 | #ffe347 | - Background color for yellow notifications. For example: yellow badges and warning flash messages. | | | yellow-900 | #855900 | - The border color of an item in warning state. For example: warning alerts. - The color of warning icons. | ## Using color 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](https://cloudscape.design/foundation/visual-foundation/data-vis-colors/). ## Accessibility Make sure there is sufficient contrast between background and foreground colors. For example, text or a button on a background. ## Did this page help you? 1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.