Colors are one of the foundational design tokens, and component-controls
provides multiple components to document your colors and color palettes.
All components accept a name
and a color value
property, where the color can be a HEX, RGB, or HSL string value.
The AltaColor component displays the color name and value in a compact block.
Design inspired by Oracle's Alta UI.
import { AltaColorPalette } from '@component-controls/design-tokens';<AltaColorPalettepalette={{'color-1': '#fbce4a','color-2': '#fcfbe8','color-3': '#fff4d5','color-4': '#f6cab7','color-5': '#ec96ad','color-6': '#ca589d',}}/>
The AntdHorzColor component displays a horizontal color block, with the color value visible on hover.
Design inspired by Antd.
import { AntdHorzColorPalette } from '@component-controls/design-tokens';<AntdHorzColorPalettepalette={{'red-1': '#fff1f0','red-2': '#ffccc7','red-3': '#ffa39e','red-4': '#ff7875','red-5': '#ff4d4f','red-6': '#f5222d','red-7': '#cf1322','red-8': '#a8071a',}}/>
The AntdVertColor component displays a horizontal color block, with the color value visible on hover.
Design inspired by Antd.
import { AntdVertColorPalette } from '@component-controls/design-tokens';<AntdVertColorPalettepalette={{'green-1': '#f6ffed','green-2': '#d9f7be','green-3': '#b7eb8f','green-4': '#95de64','green-5': '#73d13d','green-6': '#52c41a','green-7': '#389e0d','green-8': '#237804','green-9': '#135200','green-10': '#092b00',}}/>
The AnvilColor component displays a color block with a dot suggesting the best text color and a block of text with the color title, name, and value.
Design inspired by Anvil.
import { AnvilColorPalette } from '@component-controls/design-tokens';<AnvilColorPalettepalette={{Critical: { value: '#f94d32', name: 'Red400' },Warning: { value: '#ffc902', name: 'Yellow400' },Success: { value: '#18a761', name: 'Green500' },Info: { value: '#2270ee', name: 'Blue400' },Border: { value: '#dfe0e1', name: 'Neutral60' },Accent: { value: '#f5f5f5', name: 'Neutral40' },}}/>
Critical
Warning
Success
Info
Border
Black
The AtlassianColor component displays a color block with AA color contrast tests.
Design inspired by Atlassian Design System.
import { AtlassianColorPalette } from '@component-controls/design-tokens';<AtlassianColorPalettepalette={{'Poppy surprise': { value: '#FF5630', name: 'R300' },'Golden state': { value: '#FFAB00', name: 'Y300' },'Fine pine': { value: '#36B37E', name: 'G300' },Tamarama: { value: '#00B8D9', name: 'T300' },"Da' juice": { value: '#6554C0', name: 'P300' },Critical: { value: '#f94d32', name: 'Red400' },}}/>
The AudiDSColor component displays a color block and the values for RGB, RML, CMYK and Pantone.
Design inspired by Audi Design System.
import { AudiDSColorPalette } from '@component-controls/design-tokens';<AudiDSColorPalettepalette={{'Poppy surprise': { value: '#FF5630', name: 'R300' },'Golden state': { value: '#FFAB00', name: 'Y300' },'Fine pine': { value: '#36B37E', name: 'G300' },Tamarama: { value: '#00B8D9', name: 'T300' },"Da' juice": { value: '#6554C0', name: 'P300' },Critical: { value: '#f94d32', name: 'Red400' },}}/>
The BackpackColor component displays a color block and the values for RGB, CMYK and Pantone. If specified, will display the dark color as a bottom-right side triangle.
Design inspired by Backpack.
import { BackpackColorPalette } from '@component-controls/design-tokens';<BackpackColorPalettepalette={{'Poppy surprise': { value: '#FF5630', name: 'R300' },'Golden state': { value: '#FFAB00', name: 'Y300' },'Fine pine': { value: '#36B37E', name: 'G300' },Tamarama: { value: '#00B8D9', name: 'T300', dark: '#084eb2' },"Da' juice": { value: '#6554C0', name: 'P300' },Critical: { value: '#f94d32', name: 'Red400' },}}/>
The BaseWebColor component displays a color block as a row, with color, name and hex value.
Design inspired by BaseWeb.
import { BaseWebColorPalette } from '@component-controls/design-tokens';<BaseWebColorPalettepalette={{yellow50: '#FFFAF0',yellow100: '#FFF2D9',yellow200: '#FFE3AC',yellow300: '#FFCF70',yellow400: '#FFC043',yellow500: '#BC8B2C',yellow600: '#997328',yellow700: '#674D1B',}}/>
yellow50 | #FFFAF0 | |
yellow100 | #FFF2D9 | |
yellow200 | #FFE3AC | |
yellow300 | #FFCF70 | |
yellow400 | #FFC043 | |
yellow500 | #BC8B2C | |
yellow600 | #997328 | |
yellow700 | #674D1B |
The BeelineColor component displays a color block with values for rgb and Pantone colors.
Design inspired by Beeline Design System.
import { BeelineColorPalette } from '@component-controls/design-tokens';<BeelineColorPalettepalette={{'Blue 5': '#001b38','Blue Accessibility': '#0352a0','Blue Primary': '#0575e6','Blue 1': '#4fa7ff','Blue 2': '#85dfff','Blue 3': '#ecf5ff','Blue 4': '#FBFDFF',}}/>
The BoltColor component displays the color as a block with AA color contrast tests.
Design inspired by Bolt.
import { BoltColorPalette } from '@component-controls/design-tokens';<BoltColorPalettepalette={{Navy: { value: '#001f5f', varName: 'var(--bolt-color-navy)' },Teal: { value: '#10a5ac', varName: 'var(--bolt-color-teal)' },Orange: { value: '#f76923', varName: 'var(--bolt-color-orange)' },Yellow: { value: '#ffc836', varName: 'var(--bolt-color-yellow)' },Wine: { value: '#661d34', varName: 'var(--bolt-color-wine)' },Pink: { value: '#e63690', varName: 'var(--bolt-color-pink)' },Berry: { value: '#ac1361', varName: 'var(--bolt-color-berry)' },Violet: { value: '#5f67b9', varName: 'var(--bolt-color-violet)' },Gray: { value: '#8d8e99', varName: 'var(--bolt-color-gray)' },Black: { value: '#151619', varName: 'var(--bolt-color-black)' },White: { value: '#ffffff', varName: 'var(--bolt-color-white)' },}}/>
var(--bolt-color-navy) | ||
Text size | Aa | Aa |
#ffffff (15.43) | pass | pass |
#000000 (1.36) | fail | fail |
var(--bolt-color-teal) | ||
Text size | Aa | Aa |
#ffffff (3.00) | pass | fail |
#000000 (7.00) | pass | pass |
var(--bolt-color-orange) | ||
Text size | Aa | Aa |
#ffffff (3.00) | pass | fail |
#000000 (7.00) | pass | pass |
var(--bolt-color-yellow) | ||
Text size | Aa | Aa |
#ffffff (1.55) | fail | fail |
#000000 (13.57) | pass | pass |
var(--bolt-color-wine) | ||
Text size | Aa | Aa |
#ffffff (11.73) | pass | pass |
#000000 (1.79) | fail | fail |
var(--bolt-color-pink) | ||
Text size | Aa | Aa |
#ffffff (3.97) | pass | fail |
#000000 (5.29) | pass | pass |
var(--bolt-color-berry) | ||
Text size | Aa | Aa |
#ffffff (6.95) | pass | pass |
#000000 (3.02) | pass | fail |
var(--bolt-color-violet) | ||
Text size | Aa | Aa |
#ffffff (5.09) | pass | pass |
#000000 (4.13) | pass | fail |
var(--bolt-color-gray) | ||
Text size | Aa | Aa |
#ffffff (3.25) | pass | fail |
#000000 (6.46) | pass | pass |
var(--bolt-color-black) | ||
Text size | Aa | Aa |
#ffffff (18.09) | pass | pass |
#000000 (1.16) | fail | fail |
var(--bolt-color-white) | ||
Text size | Aa | Aa |
#ffffff (1.00) | fail | fail |
#000000 (21.00) | pass | pass |
The CanvasColor component displays the color as a row, with color, name, sass variable name and hex value.
Design inspired by Canvas Design System.
import { CanvasColorPalette } from '@component-controls/design-tokens';<CanvasColorPalettepalette={{Primary: { value: '#ff8f59', name: 'SORBET', sass: '$color-sorbet' },Shade: {value: '#e68250',name: 'SORBET_DARK',sass: '$color-sorbet-dark',},'Medium Tint': {value: '#ffc7ac',name: 'SORBET_MEDIUM',sass: '$color-sorbet-medium',},'Light Tint': {value: '#fff3ee',name: 'SORBET_LIGHT',sass: '$color-sorbet-light',},}}/>
The CedarColor component displays the color as a row, with color, name, description and hex value.
Design inspired by REI's Cedar.
import { CedarColorPalette } from '@component-controls/design-tokens';<CedarColorPalettepalette={{primary: {name: 'cdr-color-text-primary',value: 'rgba(12, 11, 8, 0.75)',description: 'The default, primary text color',},brand: {name: 'cdr-color-text-brand',value: '#113731',description: 'Text set in our primary brand color',},sale: {name: 'cdr-color-text-sale',value: '#cc0000',description: 'The color of sale text',},success: {name: 'cdr-color-text-success',value: '#2e6b34',description: 'Color of success messages',},warning: {name: 'cdr-color-text-warning',value: '#854714',description: 'Color of warning messages',},}}/>
cdr-color-text-primary The default, primary text color | #0c0b08 | |
cdr-color-text-brand Text set in our primary brand color | #113731 | |
cdr-color-text-sale The color of sale text | #cc0000 | |
cdr-color-text-success Color of success messages | #2e6b34 | |
cdr-color-text-warning Color of warning messages | #854714 |
The CometColor component displays the color as a row, with color, name sass variable name and AA/AAA tests.
Design inspired by Comet.
import { CometColorPalette } from '@component-controls/design-tokens';<CometColorPalettepalette={{'midnight-30': {name: '30',value: '#0C518D',sass: '$comet-color-midnight-30',},'midnight-40': {name: '40',value: '#106CBC',sass: '$comet-color-midnight-40',},'midnight-50': {name: '50',value: '#1487EB',sass: '$comet-color-midnight-50',},'midnight-60': {name: '60',value: '#439FEF',sass: '$comet-color-midnight-60',},}}/>
30 | $comet-color-midnight-30 | #0C518D | AAA |
40 | $comet-color-midnight-40 | #106CBC | AA |
50 | $comet-color-midnight-50 | #1487EB | AA |
60 | $comet-color-midnight-60 | #439FEF | AAA |
The DuetColor component displays the color as a row, with color, name, description, var, and sass variables as well as the contrast ratio ad status.
Design inspired by Duet.
import { DuetColorPalette } from '@component-controls/design-tokens';<DuetColorPalettepalette={{'Gray Darker': {value: '#657787',description:'Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts.',sass: '$color-gray-darker',varName: 'var(--color-gray-darker)',status: 'ok',},'Gray Dark': {value: '#909599',description:'Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text.',sass: '$color-gray-dark',varName: 'var(--color-gray-dark)',status: 'ok',},'Data 01': {value: '#7a01c4',description:'Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.',sass: '$color-data-01',varName: 'var(--color-data-01)',status: 'warning',},'Data 06': {value: '#c21565',description:'Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.',sass: '$color-data-06',varName: 'var(--color-data-06)',status: 'error',},}}/>
Example | Description | Token | Contrast | Status |
---|---|---|---|---|
#657787 rgb(101, 119, 135) | Gray Darker Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts. | $color-gray-darker var(--color-gray-darker) | 4.62:1 | |
#909599 rgb(144, 149, 153) | Gray Dark Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text. | $color-gray-dark var(--color-gray-dark) | 3.02:1 | |
#7a01c4 rgb(122, 1, 196) | Data 01 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-01 var(--color-data-01) | 7.99:1 | |
#c21565 rgb(194, 21, 101) | Data 06 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-06 var(--color-data-06) | 5.85:1 |
The ETradeColor component displays the color as a block with values for hex, class, and sass can be copied to clipboard on hover.
Design inspired by E-Trade Design System.
import { ETradeColorPalette } from '@component-controls/design-tokens';<ETradeColorPalettepalette={{Purple: {value: '#5627d8',description: 'Text links and other interactive elements',sass: '$link-color',},'Negative red': {value: '#cc0000',name: 'Error state',description: 'Data trending down',sass: '$negative',},'Positive green': {value: '#107a1b',name: 'Success state',description: 'Data trending up',sass: '$positive',css: '.text-positive',},'Background accent color': {value: '#f1ecff',description: 'Background color',sass: '$background-accent-color-1',css: '.background-accent-color-1',},}}/>
FinastraColor The FinastraColor component displays the color as a small block, with name and hex color on the side. If the color is a primary color, will display as a circle.
Design inspired by Finsstra.
import { FinastraColorPalette } from '@component-controls/design-tokens';<FinastraColorPalettepalette={{'C 100 - dark': {value: '#2D2D2D',},'C 100': {value: '#414141',name: 'C',primary: true,},'C 75': {value: '#707070',},'C 50': {value: '#9F9F9F',},'C 25': {value: '#CECECE',},}}/>
The FishTankColor component displays the color as a row with the sass var name and hex color.
Design inspired by Blooomberg BNA's FishTank.
import { FishTankColorPalette } from '@component-controls/design-tokens';<FishTankColorPalettepalette={{'highlight-1': {sass: '$color-highlight-1',value: '#FFF8B0',},'highlight-2': {sass: '$color-highlight-2',value: '#E3F7FF',},'highlight-3': {sass: '$color-highlight-3',value: '#E0FFE0',},}}/>
The GovUKColor component displays the color as a row with a color circle and the sass var name and hex color.
Design inspired by GOV.UK Design System.
import { GovUKColorPalette } from '@component-controls/design-tokens';<GovUKColorPalettepalette={{'brand-colour': {sass: '$govuk-brand-colour',value: '#1d70b8',},'hover-colour': {sass: '$govuk-link-hover-colour',value: '#003078',},'visited-colour': {sass: '$govuk-link-visited-colour',value: '#4c2c92',},red: {varName: 'govuk-colour("red")',value: '#d4351c',},}}/>
$govuk-brand-colour | #1d70b8 | |
$govuk-link-hover-colour | #003078 | |
$govuk-link-visited-colour | #4c2c92 | |
govuk-colour("red") | #d4351c |
The HelpScoutColor component displays the color as a row, expanding on hover. Separate visualization (header) for the primary color.
Design inspired by HelpScout.
import { HelpScoutColorPalette } from '@component-controls/design-tokens';<HelpScoutColorPalettepalette={{lavender: { value: '#9FA6FF', name: '500', primary: true },'lavender-100': { value: '#F9F9FF', name: '100' },'lavender-200': { value: '#EBECFF', name: '200' },'lavender-300': { value: '#D9DCFD', name: '300' },'lavender-400': { value: '#B9BEFF', name: '400' },'lavender-500': { value: '#9FA6FF', name: '500' },'lavender-600': { value: '#818AEC', name: '600' },}}/>
The IBMDLColor component displays the color as a row with the color name and display option of HEX, RGB, PMS, or CMYK color values.
Design inspired by IBM's Design Language.
import { ColorTabs, IBMDLColorPalette } from '@component-controls/design-tokens';<ColorTabs>{display => (<IBMDLColorPalettedisplay={display}palette={{'Red 100': '#2d0709','Red 90': '#520408','Red 80': '#750e13','Red 70': '#a2191f','Red 60': '#da1e28',}}/>)}</ColorTabs>
- HEX
- RGB
- PMS
- CMYK
The LightningColor component displays the color as a table row, with color, name, description, and allows for custom columns.
Design inspired by Oracle's Lightning Design System.
import { LightningColorPalette } from '@component-controls/design-tokens';<LightningColorPalettecolumns={[{title: 'Released',name: 'released',render: value => <div style={{ textAlign: 'right' }}>{value}</div>,},{title: 'Themeable',name: 'themeable',render: value => (<div style={{ textAlign: 'center' }}>{value ? 'Yes' : 'No'}</div>),},{title: 'Support',name: 'support',render: value => (<divstyle={{display: 'flex',flexDirection: 'column',alignItems: 'center',}}><divstyle={{textAlign: 'center',width: '1.5rem',height: '1.5rem',lineHeight: '1.5rem',fontSize: '.625rem',color: '#fff',backgroundColor: value === 'GA' ? '#54c473' : '#6488e3',}}>{value}</div></div>),},]}palette={{BRAND_DISABLED: {value: '#c9c7c5',description: 'Disabled state of BRAND_A11Y',sass: '$brand-disabled',released: '2.6.0',themeable: true,support: 'GA',},PALETTE_GRAY_1: {value: '#ffffff',description: 'Background color a branded app header',sass: '$brand-header',released: '2.6.0',themeable: true,support: 'I',},BRAND_HEADER_CONTRAST: {value: '#5e5e5e',description:'Variant of BRAND_HEADER that is accessible with BRAND_HEADER',sass: '$brand-header-contrast',released: '2.6.0',themeable: true,support: 'I',},BRAND_HEADER_CONTRAST_WARM: {value: '#bf0201',description:'Variant of BRAND_HEADER_CONTRAST that provides a warm color',sass: '$brand-header-contrast-warm',released: '2.6.0',themeable: true,support: 'I',},BRAND_PRIMARY: {value: '#1589ee',description: 'Primary brand color',sass: '$brand-primary',released: '2.6.0',themeable: true,support: 'GA',},}}/>
Token | Example | Released | Themeable | Support |
---|---|---|---|---|
$brand-disabled Disabled state of BRAND_A11Y | rgb(201, 199, 197) #c9c7c5 BRAND_DISABLED | 2.6.0 | Yes | GA |
$brand-header Background color a branded app header | rgb(255, 255, 255) #ffffff PALETTE_GRAY_1 | 2.6.0 | Yes | I |
$brand-header-contrast Variant of BRAND_HEADER that is accessible with BRAND_HEADER | rgb(94, 94, 94) #5e5e5e BRAND_HEADER_CONTRAST | 2.6.0 | Yes | I |
$brand-header-contrast-warm Variant of BRAND_HEADER_CONTRAST that provides a warm color | rgb(191, 2, 1) #bf0201 BRAND_HEADER_CONTRAST_WARM | 2.6.0 | Yes | I |
$brand-primary Primary brand color | rgb(21, 137, 238) #1589ee BRAND_PRIMARY | 2.6.0 | Yes | GA |
The LiquidColor component displays the color as a block with the RGB value and a palette of lighter and darker colors.
Design inspired by Liquid Design System.
import { LiquidColorPalette } from '@component-controls/design-tokens';<LiquidColorPalettepalette={{'Vibrant Magenta': '#EB3C96','Rich Blue': '#0F69AF','Vibrant Cyan': '#2DBECD','Vibrant Green': '#A5CD50','Rich Red': '#E61E50','Vibrant Yellow': '#FFC832','Rich Green': '#149B5F',}}/>
The MorningstarColor component displays the color as a table row, with color, name, sass variable name and hex value.
Design inspired by Morningstar Design System.
import { MorningstarColorPalette } from '@component-controls/design-tokens';<MorningstarColorPalettepalette={{Error: {value: '#ff0000',sass: '$mds-feedback-color-error',},Warning: {value: '#f5c400',sass: '$mds-feedback-color-warning',},Success: {value: '#00af41',sass: '$mds-feedback-color-success',},'Success Background': {value: '#e5f7eb',sass: '$mds-feedback-color-success-background',},Active: {value: '#004376',sass: '$mds-interactive-color-primary-active',},}}/>
Name | Constant | Color |
---|---|---|
Error | $mds-feedback-color-error | #ff0000 |
Warning | $mds-feedback-color-warning | #f5c400 |
Success | $mds-feedback-color-success | #00af41 |
Success Background | $mds-feedback-color-success-background | #e5f7eb |
Active | $mds-interactive-color-primary-active | #004376 |
The OPatternColor component displays the color as a table row, with color block, sass name, and hex, RGB, and CMYK color values.
Design inspired by OPattern.
import { OPatternColorPalette } from '@component-controls/design-tokens';<OPatternColorPalettepalette={{Primary: {value: '#107CB2',sass: '$primary-color',},PrimaryLight: {value: '#b7d8e8',description: '30% of $primary-color',sass: '$primary-color-light',},Alert: {value: '#D8400F',sass: '$alert-color',},AlertLight: {value: '#f3c6b7',description: '30% of $alert-color',sass: '$alert-color-light',},Weather: {value: '#990099',sass: '$weather-color',},}}/>
Color | Variable | Hex | RGB | CMYK |
---|---|---|---|---|
$primary-color | #107CB2 | 16, 124, 178 | 91, 30, 0, 30 | |
$primary-color-light | 30% of $primary-color | |||
$alert-color | #D8400F | 216, 64, 15 | 0, 70, 93, 15 | |
$alert-color-light | 30% of $alert-color | |||
$weather-color | #990099 | 153, 0, 153 | 0, 100, 0, 40 |
The PajamasColor component displays the color as a table row, expanding on hover to display the contrast and passing level.
Design inspired by GitLab's Pajamas.
import { PajamasColorPalette } from '@component-controls/design-tokens';<PajamasColorPalettepalette={{'$orange-50': '#fdf1dd','$orange-100': '#f5d9a8','$orange-200': '#e9be74','$orange-300': '#d99530','$orange-400': '#c17d10','$orange-500': '#ab6100','$orange-600': '#9e5400','$orange-700': '#8f4700','$orange-800': '#703800','$orange-900': '#5c2900','$orange-950': '#421f00',}}/>
The PatternFlyColor component displays the color as a row with a color circle with CSS var name and on click popup.
Design inspired by PatternFly.
import { PatternFlyColorPalette } from '@component-controls/design-tokens';<PatternFlyColorPalettepalette={{hover: {css: '--pf-global--primary-color--200',name: 'Hover',value: '#004080',description:'This color is most commonly used as the hover or focus state for components that use the default primary color, such as buttons and dropdowns.',},link: {css: '--pf-global--primary-color--100',value: '#0066CC',description:'This color is most commonly used as a link text and icon color for many components, such as navigation and accordions. Blue icons use the same primary color variable as the blue text.',},dangerAlertIcon: {css: '--pf-global--primary-color--100',name: 'alert icon',value: '#470000',description:'This color is used as the icon color for the danger alert component.',},dangerAlertTitle: {css: '--pf-global--danger-color--200',name: 'alert title',value: '#A30000',description:'This color is used as the title color for the danger alert as well as the background color for the danger button.',},dangerAlertIconBackground: {css: '--pf-global--danger-color--100',name: 'alert icon background',value: '#C9190B',description:'This color is most commonly used as an indication of danger or error for components, such as alerts and form inputs.',},}}/>
The PhotonColor component displays the color as a row, with a color block, name, hex value and AA/AAA tests for text and backgorund.
Design inspired by Firefox's Photon Design System.
import { PhotonColorPalette } from '@component-controls/design-tokens';<PhotonColorPalettepalette={{'Teal 50': '#00feff','Teal 60': '#00c8d7','Teal 70': '#008ea4','Teal 80': '#005a71','Teal 90': '#002d3e',}}/>
Teal 50 | #00feff | AAA | F |
Teal 60 | #00c8d7 | AAA | F |
Teal 70 | #008ea4 | AA | AA+ |
Teal 80 | #005a71 | F | AAA |
Teal 90 | #002d3e | F | AAA |
The PrimerColor component displays the color as a row, with sass variable name. Separate visualization (header) for the primary color.
Design inspired by GitHub's Primer.
import { PrimerColorPalette } from '@component-controls/design-tokens';<PrimerColorPalettepalette={{Yellow: { value: '#ffd33d', sass: '$yellow-500', primary: true },'yellow-400': { value: '#ffdf5d', sass: '$yellow-400' },'yellow-500': { value: '#ffd33d', sass: '$yellow-500' },'yellow-600': { value: '#f9c513', sass: '$yellow-600' },'yellow-700': { value: '#dbab09', sass: '$yellow-700' },}}/>
The SeedsColor component displays the color as a block with RGB and CMYK colors. The color name and description are displayed below the block.
Design inspired by SproutSocial's Seed.
import { SeedsColorPalette } from '@component-controls/design-tokens';<SeedsColorPalettepalette={{'Purple.700': {value: '#6f5ed3',variants: ['purple.700'],description:'Use Purple 700 to highlight or draw attention to important information that has no interaction. When using our primary purple with our primary green, green should always be the dominant color of the two.',},'Aqua.1100': {value: '#002838',variants: ['aqua.1100'],description:'Use Aqua 1100 for dark backgrounds and solid drop shadows. Aqua 1100 should not be used on text.',},'Aqua.600': {value: '#0797ae',variants: ['aqua.600'],description:'Use Aqua 600 for in-app text links and to highlight or draw attention to important information that has no interaction. Aqua is also the primary spot illustration color and is used for color blocking.',},Primary: {value: '#2079c3',name: 'Primary CTA',variants: ['cta.primary', 'blue.700'],},Secondary: {value: '#364141',name: 'Secondary CTA',variants: ['cta.scondary', 'neutral.800'],},}}/>
Use Purple 700 to highlight or draw attention to important information that has no interaction. When using our primary purple with our primary green, green should always be the dominant color of the two.
Use Aqua 1100 for dark backgrounds and solid drop shadows. Aqua 1100 should not be used on text.
Use Aqua 600 for in-app text links and to highlight or draw attention to important information that has no interaction. Aqua is also the primary spot illustration color and is used for color blocking.
The SeekColor component displays the color as a circle with the HEX value and variable name below.
Design inspired by Seek OSS.
import { SeekColorPalette } from '@component-controls/design-tokens';<SeekColorPalettepalette={{'@sk-blue-darker': '#001b38','@sk-blue-dark': '#042763','@sk-blue': '#0d3880','@sk-blue-light': '#184da8','@sk-blue-lighter': '#2765cf','@sk-pink': '#e60278','@sk-green': '#157e00',}}/>
The SkylineColor component displays the color as a row, with color name, custom columns for contrast checks scss variable name and color block.
Design inspired by Skyline.
import { SkylineColorPalette } from '@component-controls/design-tokens';<SkylineColorPalettepalette={{Green: {value: '#1a801b',scss: 'get-hue(green)',},'Gray 500': {value: '#8b8b8b',scss: 'get-gray(500)',},'Gray 600': {value: '#757575',scss: 'get-gray(600)',},'Gray 700': {value: '#616161',scss: 'get-gray(700)',},}}/>
Name | Use on White | Use on Gray 200 | Scss | Example |
---|---|---|---|---|
Green | Yes | Yes | get-hue(green) | #1a801b |
Gray 500 | No | No | get-gray(500) | #8b8b8b |
Gray 600 | Yes | No | get-gray(600) | #757575 |
Gray 700 | Yes | Yes | get-gray(700) | #616161 |
The SolidColor component displays the color as a block. The CSS class, HEX value, and SASS name are placed above the color block.
Design inspired by Solid.
import { SolidColorPalette } from '@component-controls/design-tokens';<SolidColorPalettepalette={{fillRed: { value: '#ee3322', sass: '$fill-red', css: '.fill-red' },fillRedLighter: {value: '#feebe9',sass: '$fill-red-lighter',css: '.fill-red-lighter',},fillPink: { value: '#e40c78', sass: '$fill-pink', css: '.fill-pink' },fillBlue: { value: '#0f65ef', sass: '$fill-blue', css: '.fill-blue' },fillPurple: {value: '#6645dd',sass: '$fill-purple',css: '.fill-purple',},fillYellow: {value: '#ffee00',sass: ' $fill-yellow',css: '.fill-promoted-orange',},fillTwitter: {value: '#55acee',sass: '$fill-twitter',css: '.fill-twitter',},}}/>
The TableColor component displays the color as a table row, with support for dark mode colors and AA accessibility tests. Design created to accomodate theme-ui-type color palettes.
import { TableColorPalette } from '@component-controls/design-tokens';<TableColorPalettepalette={{text: { value: '#454f5b', dark: '#d3d4db' },background: { value: '#ffffff', dark: '#38404a' },primary: { value: '#5c6ac4', dark: '#efefef' },secondary: { value: '#006fbb', dark: '#b4e1fa' },muted: { value: '#e6e6e6', dark: '#e6e6e6' },accent: '#f49342',darken: '#00044c',}}/>
Score | Contrast ratio | Result |
---|---|---|
AAA | >= 7.0:1 | Passes WCAG 2.0 AAA |
AA | >= 4.5:1 | Passes WCAG 2.0 AA |
AA+ | >= 3.0:1 | Passes WCAG 2.0 Large Text AA |
F | < 3.0:1 | AA Test failed |
AA color | AA dark | ||||
---|---|---|---|---|---|
color / dark | name | #FFFFFF | #000000 | #FFFFFF | #000000 |
#454F5B #D3D4DB | text | F | AAA | F | AAA |
#FFFFFF #38404A | background | AAA | F | AAA | F |
#5C6AC4 #EFEFEF | primary | AA+ | AA | F | AAA |
#006FBB #B4E1FA | secondary | AA+ | AA | F | AAA |
#E6E6E6 #E6E6E6 | muted | AAA | F | F | AAA |
#F49342 | accent | AAA | F | ||
#00044C | darken | F | AAA |
The UniformColor component displays the color as a table row, with color block, color name and rgb value.
Design inspired by Uniform.
import { UniformColorPalette } from '@component-controls/design-tokens';<UniformColorPalettepalette={{Primary: '#107CB2',PrimaryLight: '#b7d8e8',Alert: '#D8400F',AlertLight: '#f3c6b7',Weather: '#990099',}}/>
Color | Name | RGBA |
---|---|---|
Primary | 16, 124, 178 | |
PrimaryLight | 183, 216, 232 | |
Alert | 216, 64, 15 | |
AlertLight | 243, 198, 183 | |
Weather | 153, 0, 153 |
The VanillaColor component displays the color as a color block with sass variable name and hex color value.
Design inspired by Vanilla.
import { VanillaColorPalette } from '@component-controls/design-tokens';<VanillaColorPalettepalette={{'x-light': { value: '#FFF', sass: '$color-x-light' },brand: { value: '#333', sass: '$color-brand' },caution: { value: '#F99B11', sass: '$color-caution' },negative: { value: '#C7162B', sass: '$color-negative' },positive: { value: '#0E8420', sass: '$color-positive' },information: { value: '#06C', sass: '$color-information' },'navigation-background': {value: '#FFF',sass: '$color-navigation-background',},}}/>
The XColor component displays the color as a circle with the variable name, HEX, RGB, CMYK, and PANTONE values below.
Design inspired by Biteable's Design System X.
import { XColorPalette } from '@component-controls/design-tokens';<XColorPalettepalette={{'Dame Tangerine': '#FF5000','Señor Purple': '#5F285A','Baron Von Teal': '#1DE9B6','Agent Cyan': '#18FFFF','Madam Yellow': '#FFF500','Pastor Pink': '#FF96B4','Brigadier Blue': '#000A47',}}/>
The ZendeskColor component displays the color as a small block with the color name and hex value.
Design inspired by Zendesk Garden.
import { ZendeskColorPalette } from '@component-controls/design-tokens';<ZendeskColorPalettepalette={{support: '#00A656',message: '#37B8AF',explore: '#30AABC',gather: '#F6C8BE',guide: '#FF6224',connect: '#FF6224',chat: '#F79A3E',talk: '#EFC93D',sell: '#C38F00','100 ': '#F8F9F9',}}/>