A next-generation tool to create blazing-fast documentation sites
API
created:9/17/2020
,
updated:10/5/2020

Overview

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.

AltaColor

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';
<AltaColorPalette
palette={{
'color-1': '#fbce4a',
'color-2': '#fcfbe8',
'color-3': '#fff4d5',
'color-4': '#f6cab7',
'color-5': '#ec96ad',
'color-6': '#ca589d',
}}
/>
color-1
HEX: #fbce4a
RGB: 251, 206, 74
color-2
HEX: #fcfbe8
RGB: 252, 251, 232
color-3
HEX: #fff4d5
RGB: 255, 244, 213
color-4
HEX: #f6cab7
RGB: 246, 202, 183
color-5
HEX: #ec96ad
RGB: 236, 150, 173
color-6
HEX: #ca589d
RGB: 202, 88, 157

AntdHorzColor

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';
<AntdHorzColorPalette
palette={{
'red-1': '#fff1f0',
'red-2': '#ffccc7',
'red-3': '#ffa39e',
'red-4': '#ff7875',
'red-5': '#ff4d4f',
'red-6': '#f5222d',
'red-7': '#cf1322',
'red-8': '#a8071a',
}}
/>
red-1
#fff1f0
red-2
#ffccc7
red-3
#ffa39e
red-4
#ff7875
red-5
#ff4d4f
red-6
#f5222d
red-7
#cf1322
red-8
#a8071a

AntdVertColor

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';
<AntdVertColorPalette
palette={{
'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',
}}
/>
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

AnvilColor

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';
<AnvilColorPalette
palette={{
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

Red400 #f94d32

Warning

Yellow400 #ffc902

Success

Green500 #18a761

Info

Blue400 #2270ee

Border

Neutral60 #dfe0e1

Black

Black40 #000000

AtlassianColor

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';
<AtlassianColorPalette
palette={{
'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' },
}}
/>
APASS
APASS
APASS
AFAIL
NAME
R300 - Poppy surprise
HEX
#FF5630
RGB
255, 86, 48
APASS
APASS
AFAIL
AFAIL
NAME
Y300 - Golden state
HEX
#FFAB00
RGB
255, 171, 0
APASS
APASS
AFAIL
AFAIL
NAME
G300 - Fine pine
HEX
#36B37E
RGB
54, 179, 126
APASS
APASS
AFAIL
AFAIL
NAME
T300 - Tamarama
HEX
#00B8D9
RGB
0, 184, 217
APASS
AFAIL
APASS
APASS
NAME
P300 - Da' juice
HEX
#6554C0
RGB
101, 84, 192
APASS
APASS
APASS
AFAIL
NAME
Red400 - Critical
HEX
#F94D32
RGB
249, 77, 50

AudiDSColor

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';
<AudiDSColorPalette
palette={{
'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' },
}}
/>
Poppy surprise
RGB: 255/86/48
HEX: #ff5630
CMYK: 0/66/81/0
Pantone 171C
RAL: 2004
Golden state
RGB: 255/171/0
HEX: #ffab00
CMYK: 0/33/100/0
Pantone 137C
RAL: 1003
Fine pine
RGB: 54/179/126
HEX: #36b37e
CMYK: 70/0/30/30
Pantone 339C
RAL: 6024
Tamarama
RGB: 0/184/217
HEX: #00b8d9
CMYK: 100/15/0/15
Pantone 3125C
RAL: 5012
Da' juice
RGB: 101/84/192
HEX: #6554c0
CMYK: 47/56/0/25
Pantone 2725C
RAL: 5002
Critical
RGB: 249/77/50
HEX: #f94d32
CMYK: 0/69/80/2
Pantone 171C
RAL: 3028

BackpackColor

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';
<BackpackColorPalette
palette={{
'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' },
}}
/>
Poppy surprise R300
RGB 255, 86, 48
HEX #ff5630
CMYK: 0, 66, 81, 0
PMS 171C
Golden state Y300
RGB 255, 171, 0
HEX #ffab00
CMYK: 0, 33, 100, 0
PMS 137C
Fine pine G300
RGB 54, 179, 126
HEX #36b37e
CMYK: 70, 0, 30, 30
PMS 339C
Tamarama
light: T300
dark: #084eb2
Da' juice P300
RGB 101, 84, 192
HEX #6554c0
CMYK: 47, 56, 0, 25
PMS 2725C
Critical Red400
RGB 249, 77, 50
HEX #f94d32
CMYK: 0, 69, 80, 2
PMS 171C

BaseWebColor

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';
<BaseWebColorPalette
palette={{
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

BeelineColor

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';
<BeelineColorPalette
palette={{
'Blue 5': '#001b38',
'Blue Accessibility': '#0352a0',
'Blue Primary': '#0575e6',
'Blue 1': '#4fa7ff',
'Blue 2': '#85dfff',
'Blue 3': '#ecf5ff',
'Blue 4': '#FBFDFF',
}}
/>
Blue 5
HEX:
#001b38
RGB:
rgb(0,27,56)
Pantone:
289C:
Blue Accessibility
HEX:
#0352a0
RGB:
rgb(3,82,160)
Pantone:
2945C:
Blue Primary
HEX:
#0575e6
RGB:
rgb(5,117,230)
Pantone:
2727C:
Blue 1
HEX:
#4fa7ff
RGB:
rgb(79,167,255)
Pantone:
279C:
Blue 2
HEX:
#85dfff
RGB:
rgb(133,223,255)
Pantone:
636C:
Blue 3
HEX:
#ecf5ff
RGB:
rgb(236,245,255)
Pantone:
656C:
Blue 4
HEX:
#fbfdff
RGB:
rgb(251,253,255)
Pantone:
656C:

BoltColor

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';
<BoltColorPalette
palette={{
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)' },
}}
/>
Navy
#001f5f
var(--bolt-color-navy)
Text sizeAaAa
#ffffff (15.43)
pass
pass
#000000 (1.36)
fail
fail
Teal
#10a5ac
var(--bolt-color-teal)
Text sizeAaAa
#ffffff (3.00)
pass
fail
#000000 (7.00)
pass
pass
Orange
#f76923
var(--bolt-color-orange)
Text sizeAaAa
#ffffff (3.00)
pass
fail
#000000 (7.00)
pass
pass
Yellow
#ffc836
var(--bolt-color-yellow)
Text sizeAaAa
#ffffff (1.55)
fail
fail
#000000 (13.57)
pass
pass
Wine
#661d34
var(--bolt-color-wine)
Text sizeAaAa
#ffffff (11.73)
pass
pass
#000000 (1.79)
fail
fail
Pink
#e63690
var(--bolt-color-pink)
Text sizeAaAa
#ffffff (3.97)
pass
fail
#000000 (5.29)
pass
pass
Berry
#ac1361
var(--bolt-color-berry)
Text sizeAaAa
#ffffff (6.95)
pass
pass
#000000 (3.02)
pass
fail
Violet
#5f67b9
var(--bolt-color-violet)
Text sizeAaAa
#ffffff (5.09)
pass
pass
#000000 (4.13)
pass
fail
Gray
#8d8e99
var(--bolt-color-gray)
Text sizeAaAa
#ffffff (3.25)
pass
fail
#000000 (6.46)
pass
pass
Black
#151619
var(--bolt-color-black)
Text sizeAaAa
#ffffff (18.09)
pass
pass
#000000 (1.16)
fail
fail
White
#ffffff
var(--bolt-color-white)
Text sizeAaAa
#ffffff (1.00)
fail
fail
#000000 (21.00)
pass
pass

CanvasColor

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';
<CanvasColorPalette
palette={{
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',
},
}}
/>
Primary
SORBET
#ff8f59
$color-sorbet
Shade
SORBET_DARK
#e68250
$color-sorbet-dark
Medium Tint
SORBET_MEDIUM
#ffc7ac
$color-sorbet-medium
Light Tint
SORBET_LIGHT
#fff3ee
$color-sorbet-light

CedarColor

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';
<CedarColorPalette
palette={{
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

CometColor

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';
<CometColorPalette
palette={{
'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

DuetColor

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';
<DuetColorPalette
palette={{
'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',
},
}}
/>
ExampleDescriptionTokenContrastStatus
#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-darkervar(--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-darkvar(--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-01var(--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-06var(--color-data-06)5.85:1

ETradeColor

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';
<ETradeColorPalette
palette={{
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',
},
}}
/>
Purple
#5627d8
$link-color
Text links and other interactive elements
Negative red
#cc0000
$negative
Error state
Data trending down
Positive green
#107a1b
.text-positive
$positive
Success state
Data trending up
Background accent color
#f1ecff
.background-accent-color-1
$background-accent-color-1
Background color
Not for text

FinastraColor

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';
<FinastraColorPalette
palette={{
'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',
},
}}
/>
C 100 - dark
#2d2d2d
C
C 100
#414141
C 75
#707070
C 50
#9f9f9f
C 25
#cecece

FishTankColor

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';
<FishTankColorPalette
palette={{
'highlight-1': {
sass: '$color-highlight-1',
value: '#FFF8B0',
},
'highlight-2': {
sass: '$color-highlight-2',
value: '#E3F7FF',
},
'highlight-3': {
sass: '$color-highlight-3',
value: '#E0FFE0',
},
}}
/>
$color-highlight-1
#FFF8B0
$color-highlight-2
#E3F7FF
$color-highlight-3
#E0FFE0

GovUKColor

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';
<GovUKColorPalette
palette={{
'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

HelpScoutColor

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';
<HelpScoutColorPalette
palette={{
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' },
}}
/>
LAVENDER
500
#9fa6ff
100
#f9f9ff
200
#ebecff
300
#d9dcfd
400
#b9beff
500
#9fa6ff
600
#818aec

IBMDLColor

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 => (
<IBMDLColorPalette
display={display}
palette={{
'Red 100': '#2d0709',
'Red 90': '#520408',
'Red 80': '#750e13',
'Red 70': '#a2191f',
'Red 60': '#da1e28',
}}
/>
)}
</ColorTabs>
Red 100
2d0709
Red 90
520408
Red 80
750e13
Red 70
a2191f
Red 60
da1e28

LightningColor

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';
<LightningColorPalette
columns={[
{
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 => (
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<div
style={{
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',
},
}}
/>
TokenExampleReleasedThemeableSupport
$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

LiquidColor

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';
<LiquidColorPalette
palette={{
'Vibrant Magenta': '#EB3C96',
'Rich Blue': '#0F69AF',
'Vibrant Cyan': '#2DBECD',
'Vibrant Green': '#A5CD50',
'Rich Red': '#E61E50',
'Vibrant Yellow': '#FFC832',
'Rich Green': '#149B5F',
}}
/>
#EB3C96
Vibrant Magenta
RGB (235,60,150)
#0F69AF
Rich Blue
RGB (15,105,175)
#2DBECD
Vibrant Cyan
RGB (45,190,205)
#A5CD50
Vibrant Green
RGB (165,205,80)
#E61E50
Rich Red
RGB (230,30,80)
#FFC832
Vibrant Yellow
RGB (255,200,50)
#149B5F
Rich Green
RGB (20,155,95)

MorningstarColor

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';
<MorningstarColorPalette
palette={{
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',
},
}}
/>
NameConstantColor
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

OPatternColor

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';
<OPatternColorPalette
palette={{
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',
},
}}
/>
ColorVariableHexRGBCMYK
$primary-color
#107CB2
16, 124, 178
91, 30, 0, 30
$primary-color-light30% of $primary-color
$alert-color
#D8400F
216, 64, 15
0, 70, 93, 15
$alert-color-light30% of $alert-color
$weather-color
#990099
153, 0, 153
0, 100, 0, 40

PajamasColor

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';
<PajamasColorPalette
palette={{
'$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',
}}
/>
$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

PatternFlyColor

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';
<PatternFlyColorPalette
palette={{
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.',
},
}}
/>
#004080 (Hover)
--pf-global--primary-color--200
#0066cc
--pf-global--primary-color--100
#470000 (alert icon)
--pf-global--primary-color--100
#a30000 (alert title)
--pf-global--danger-color--200
#c9190b (alert icon background)
--pf-global--danger-color--100

PhotonColor

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';
<PhotonColorPalette
palette={{
'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

PrimerColor

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';
<PrimerColorPalette
palette={{
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' },
}}
/>
Yellow
$yellow-500
#ffd33d
$yellow-400
#ffdf5d
$yellow-500
#ffd33d
$yellow-600
#f9c513
$yellow-700
#dbab09

SeedsColor

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';
<SeedsColorPalette
palette={{
'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'],
},
}}
/>
RGB: 111,94,211
CMYK: 47,55,0,17
purple.700

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.

RGB: 0,40,56
CMYK: 100,29,0,78
aqua.1100

Use Aqua 1100 for dark backgrounds and solid drop shadows. Aqua 1100 should not be used on text.

RGB: 7,151,174
CMYK: 96,13,0,32
aqua.600

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.

RGB: 32,121,195
CMYK: 84,38,0,24
Primary CTA
cta.primary
blue.700

RGB: 54,65,65
CMYK: 17,0,0,75
Secondary CTA
cta.scondary
neutral.800

SeekColor

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';
<SeekColorPalette
palette={{
'@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',
}}
/>
#001b38
@sk-blue-darker
#042763
@sk-blue-dark
#0d3880
@sk-blue
#184da8
@sk-blue-light
#2765cf
@sk-blue-lighter
#e60278
@sk-pink
#157e00
@sk-green

SkylineColor

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';
<SkylineColorPalette
palette={{
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)',
},
}}
/>
NameUse on WhiteUse on Gray 200ScssExample
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

SolidColor

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';
<SolidColorPalette
palette={{
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',
},
}}
/>
.fill-red
#ee3322, $fill-red
.fill-red-lighter
#feebe9, $fill-red-lighter
.fill-pink
#e40c78, $fill-pink
.fill-blue
#0f65ef, $fill-blue
.fill-purple
#6645dd, $fill-purple
.fill-promoted-orange
#ffee00, $fill-yellow
.fill-twitter
#55acee, $fill-twitter

TableColor

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';
<TableColorPalette
palette={{
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',
}}
/>
ScoreContrast ratioResult
AAA
>= 7.0:1Passes WCAG 2.0 AAA
AA
>= 4.5:1Passes WCAG 2.0 AA
AA+
>= 3.0:1Passes WCAG 2.0 Large Text AA
F
< 3.0:1AA Test failed
AA colorAA dark
color / darkname
#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

UniformColor

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';
<UniformColorPalette
palette={{
Primary: '#107CB2',
PrimaryLight: '#b7d8e8',
Alert: '#D8400F',
AlertLight: '#f3c6b7',
Weather: '#990099',
}}
/>
ColorNameRGBA
Primary
16, 124, 178
PrimaryLight
183, 216, 232
Alert
216, 64, 15
AlertLight
243, 198, 183
Weather
153, 0, 153

VanillaColor

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';
<VanillaColorPalette
palette={{
'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',
},
}}
/>
$color-x-light
#FFF
$color-brand
#333
$color-caution
#F99B11
$color-negative
#C7162B
$color-positive
#0E8420
$color-information
#06C
$color-navigation-background
#FFF

XColor

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';
<XColorPalette
palette={{
'Dame Tangerine': '#FF5000',
'Señor Purple': '#5F285A',
'Baron Von Teal': '#1DE9B6',
'Agent Cyan': '#18FFFF',
'Madam Yellow': '#FFF500',
'Pastor Pink': '#FF96B4',
'Brigadier Blue': '#000A47',
}}
/>
Dame Tangerine
HEX
FF5000
RGB
255,80,0
CMYK
0,69,100,0
Pantone
1655C
Señor Purple
HEX
5F285A
RGB
95,40,90
CMYK
0,58,5,63
Pantone
261C
Baron Von Teal
HEX
1DE9B6
RGB
29,233,182
CMYK
88,0,22,9
Pantone
3385C
Agent Cyan
HEX
18FFFF
RGB
24,255,255
CMYK
91,0,0,0
Pantone
3252C
Madam Yellow
HEX
FFF500
RGB
255,245,0
CMYK
0,4,100,0
Pantone
3945C
Pastor Pink
HEX
FF96B4
RGB
255,150,180
CMYK
0,41,29,0
Pantone
183C
Brigadier Blue
HEX
000A47
RGB
0,10,71
CMYK
100,86,0,72
Pantone
274C

ZendeskColor

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';
<ZendeskColorPalette
palette={{
support: '#00A656',
message: '#37B8AF',
explore: '#30AABC',
gather: '#F6C8BE',
guide: '#FF6224',
connect: '#FF6224',
chat: '#F79A3E',
talk: '#EFC93D',
sell: '#C38F00',
'100 ': '#F8F9F9',
}}
/>
support
#00a656
message
#37b8af
explore
#30aabc
gather
#f6c8be
guide
#ff6224
connect
#ff6224
chat
#f79a3e
talk
#efc93d
sell
#c38f00
100
#f8f9f9