carbon-color-usage.txt

Skip to main content Carbon Design System Search Switch sites - Foundations - IBM Brand Center - IBM Design Language - Implementation - Carbon Design System - Carbon for IBM Products - Carbon for IBM.com - IBM Event Design - IBM Workplace Design - Practices - Enterprise Design Thinking - IBM Accessibility - IBM Design for AI - IBM Design Research - IBM Experience Standards - Community - IBM Design - Racial Equity in Design - All about Carbon - What is Carbon? - Who uses Carbon? - The Carbon ecosystem - The Carbon team - Partners - Case studies - Overview - Consistency in the Cloud - IBM Commerce Platform - What’s happening - Releases - The v11 release - News and articles - Meetups - Work in progress - Designing - Get started - Design kits - Other resources - Tutorials - Developing - Get started - Frameworks - Developer resources - Angular tutorial - React tutorial - Vue tutorial - Contributing - Overview - Bugs and requests - Documentation - Components - Icons - Patterns - Pictograms - Add ons - Guidelines - 2x Grid - Accessibility - Content - Color - Icons - Pictograms - Motion - Spacing - Themes - Typography - Components - Overview - Accordion - Breadcrumb - Button - Checkbox - Code snippet - Content switcher - Data table - Date picker - Dropdown - File uploader - Form - Inline loading - Link - List - Loading - Modal - Notification - Number input - Overflow menu - Pagination - Progress bar - Progress indicator - Radio button - Search - Select - Slider - Structured list - Tabs - Tag - Text input - Tile - Toggle - Tooltip - UI shell header - UI shell left panel - UI shell right panel - Patterns - Overview - Common actions - Dialogs - Disabled states - Empty states - Filtering - Forms - Global header - Loading - Login - Notifications - Overflow content - Search - Status indicators - Text toolbar - Community assets - Overview - Component index - Patterns - Domain guidance - Data visualization - Get started - Chart types - Chart anatomy - Simple charts - Complex charts - Color palettes - Axes and labels - Legends - Dashboards - Help - FAQs - Certificate of Originality - Migration guide - Contact us - GitHub Collapse navigation items Color - Overview - Usage - Code Tokens by theme White Gray 10 Gray 90 Gray 100 Core color tokens Token Role Value $ui-background - Default page background - White - — - #ffffff $interactive-01 - Primary interactive color ; - Primary buttons - Blue 60 - — - #0f62fe $interactive-02 - Secondary interactive color ; - Secondary button - Gray 80 - — - #393939 $interactive-03 - 4.5:1 AA contrast ; - Tertiary button - Blue 60 - — - #0f62fe $interactive-04 - 3:1 AA contrast ; - Selected elements ; - Active elements ; - Accent icons - Blue 60 - — - #0f62fe $danger-01 - Danger button background ; - 3:1 AA contrast - Red 60 - — - #da1e28 $danger-02 - Danger button variant ; - Text ; - Icon ; - Border - Red 60 - — - #da1e28 $ui-01 - Container background on $ui-background ; - Secondary page background - Gray 10 - — - #f4f4f4 $ui-02 - Container background on $ui-01 ; - `Light` variant background - White - — - #ffffff $ui-03 - Subtle border ; - Tertiary background - Gray 20 - — - #e0e0e0 $ui-04 - 3:1 aa element contrast ; - Medium contrast border - Gray 50 - — - #8d8d8d $ui-05 - 4.5:1 aa element contrast ; - High contrast border ; - Emphasis elements - Gray 100 - — - #161616 $button-separator - 3:1 aa element contrast ; - Fluid button separator - Gray 20 - — - #e0e0e0 $decorative-01 - “Light” variant elements - Gray 20 - — - #e0e0e0 $text-01 - Primary text ; - Body copy ; - Headers ; - Hover text color for $text-02 - Gray 100 - — - #161616 $text-02 - Secondary text ; - Input labels - Gray 70 - — - #525252 $text-03 - Placeholder text - Gray 40 - — - #a8a8a8 $text-04 - Text on interactive colors - White - — - #ffffff $text-05 - Tertiary text ; - Help text - Gray 60 - — - #6f6f6f $text-error - Error message text - Red 60 - — - #da1e28 $link-01 - Primary links ; - Ghost button - Blue 60 - — - #0f62fe $link-02 - Secondary link color for lower contrast backgrounds - Blue 70 - — - #0043ce $inverse-link - Links on $inverse-02 backgrounds - Blue 40 - — - #78a9ff $icon-01 - Primary icons - Gray 100 - — - #161616 $icon-02 - Secondary icons - Gray 70 - — - #525252 $icon-03 - Icons on interactive colors ; - Icons on non-ui colors - White - — - #ffffff $field-01 - Default input fields ; - Fields on $ui-backgrounds - Gray 10 - — - #f4f4f4 $field-02 - “Light” variant input fields ; - Fields on $ui-01 backgrounds - White - — - #ffffff $inverse-01 - Inverse text color ; - Inverse icon color - White - — - #ffffff $inverse-02 - High contrast backgrounds ; - High contrast elements - Gray 80 - — - #393939 $support-01 - Error - Red 60 - — - #da1e28 $support-02 - Success - Green 60 - — - #198038 $support-03 - Warning - Yellow - — - #f1c21b $support-04 - Information - Blue 70 - — - #0043ce $inverse-support-01 - Danger in high contrast moments - Red 50 - — - #fa4d56 $inverse-support-02 - Success in high contrast moments - Green 40 - — - #42be65 $inverse-support-03 - Warning in high contrast moments - Yellow - — - #f1c21b $inverse-support-04 - Information in high contrast moments - Blue 50 - — - #4589ff $overlay-01 - Background overlay - Gray 100 - — - #161616 @ 50% Interactive color tokens Token Role Value $focus - Focus border ; - Focus underline - Blue 60 - — - #0f62fe $inverse-focus-ui - Focus on high contrast moments - White - — - #ffffff $hover-primary - $interactive-01 hover - Blue 60 hover - — - #0353e9 $hover-primary-text - $interactive-01 text hover - Blue 70 - — - #0043ce $hover-secondary - $interactive-02 hover - Gray 80 hover - — - #4c4c4c $hover-tertiary - $interactive-03 hover ; - $inverse-01 hover - Blue 60 hover - — - #0353e9 $hover-ui - $ui-01 hover ; - $ui-02 hover ; - Transparent background hover - Gray 10 hover - — - #e5e5e5 $hover-light-ui - “Light” variant hover - Gray 10 hover - — - #e5e5e5 $hover-selected-ui - Selected row hover - Gray 20 hover - — - #cacaca $hover-danger - Danger hover ; - $support-01 hover - Red 60 hover - — - #ba1b23 $hover-row - Row hover - Gray 10 hover - — - #e5e5e5 $inverse-hover-ui - Hover for $inverse-02 - Gray 80 hover - — - #4c4c4c $active-primary - $interactive-01 active - Blue 80 - — - #002d9c $active-secondary - $interactive-02 active ; - $inverse-01 active - Gray 60 - — - #6f6f6f $active-tertiary - $interactive-03 active - Blue 80 - — - #002d9c $active-ui - $ui-01 active ; - $ui-02 active - Gray 30 - — - #c6c6c6 $active-light-ui - “Light” variant active - Gray 30 - — - #c6c6c6 $active-danger - Danger active ; - $support-01 active - Red 80 - — - #750e13 $selected-ui - Selected UI elements - Gray 20 - — - #e0e0e0 $selected-light-ui - “Light” variant selected - Gray 20 - — - #e0e0e0 $highlight - $interactive-01 highlight - Blue 20 - — - #d0e2ff $skeleton-01 - Skeleton state of graphics - Gray 10 hover - — - #e5e5e5 $skeleton-02 - Skeleton state of texts - Gray 30 - — - #c6c6c6 $visited-link - Visited links - Purple 60 - — - #8a3ffc $disabled-01 - Disabled fields ; - Disabled backgrounds ; - Disabled border - Gray 10 - — - #f4f4f4 $disabled-02 - Disabled elements on $disabled-01 ; - Disabled label ; - Disabled text on $disabled-01 ; - Disabled icons ; - Disabled border - Gray 30 - — - #c6c6c6 $disabled-03 - Disabled text on $disabled-02 ; - Disabled icons on $disabled-02 - Gray 50 - — - #8d8d8d Color and accessibility Check out the accessibility section for complete guidance on color and accessibility in Carbon. Edit this page on GitHub Previous Color: Overview Next Color: Code - Contact us - Privacy - Terms of use - IBM.com - Medium - Twitter Have questions? Email us at carbon@us.ibm.com or open an issue on GitHub. Vanilla Components version ^10.56.0 React Components version ^7.56.0 Last updated 19 August 2025 Copyright © 2025 IBM