title

route

type

Overview

Colors are one of the main design tokens elements, and component-controls provides multiple components to document your colors and color palettes.

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 from 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',
  }}
/>

AntdHorzColor

The AntdHorzColor component displays a horizontal color block, with the color value visible on hover.

Design inspired from 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',
  }}
/>

AntdVertColor

The AntdVertColor component displays a horizontal color block, with the color value visible on hover.

Design inspired from 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',
  }}
/>

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 from 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' },
  }}
/>

AtlassianColor

The AtlassianColor component displays a color block with AA color contrast tests.

Design inspired from 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' },
  }}
/>

AudiDSColor

The AudiDSColor component displays a color block and color aliases for various standard is Pantone, CMYK.

Design inspired from 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' },
  }}
/>

BackpackColor

The BackpackColor component displays a color block and color aliases for various standard is Pantone, CMYK. If specified, will display the dark color as a bottom-right side triangle.

Design inspired from 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' },
  }}
/>

BaseWebColor

The BaseWebColor component displays a color block as a row, with color, name and hex value.

Design inspired from 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',
  }}
/>

BeelineColor

The BeelineColor component displays a color block with values for rgb and Pantone colors.

Design inspired from Beeline Design System.

import { BeelineColorPalette } from '@component-controls/design-tokens';

<BeelineColorPalette
  palette={{
    'Blue 5': { value: '#001b38' },
    'Blue Accessibility': { value: '#0352a0' },
    'Blue Primary': { value: '#0575e6' },
    'Blue 1': { value: '#4fa7ff' },
    'Blue 2': { value: '#85dfff' },
    'Blue 3': { value: '#ecf5ff' },
    'Blue 4': { value: '#FBFDFF' },
  }}
/>

BoltColor

The BoltColor component displays the color as a block with AA color contrast tests.

Design inspired from 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)' },
  }}
/>

CanvasColor

The CanvasColor component displays the color as a row, with color, name, sass variable name and hex value.

Design inspired from 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',
    },
  }}
/>

CedarColor

The CedarColor component displays the color as a row, with color, name, description and hex value.

Design inspired from 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',
    },
  }}
/>

CometColor

The CometColor component displays the color as a row, with color, name sass variable name and AA/AAA tests.

Design inspired from 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',
    },
  }}
/>

DuetColor

The DuetColor component displays the color as a row, with color, name, description, var and sas variables and contrast ratio.

Design inspired from 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',
    },
  }}
/>

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 from 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',
    },
  }}
/>

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 from 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',
    },
  }}
/>

FishTankColor

The FishTankColor component displays the color as a row with the sass var name and hex color.

Design inspired from 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',
    },
  }}
/>

GovUKColor

The GovUKColor component displays the color as a row with a color circle and the sass var name and hex color.

Design inspired from 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',
    },
  }}
/>

HelpScoutColor

The HelpScoutColor component displays the color as a row, expanding on hover. Separate visualization (header) for primary color.

Design inspired from 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' },
  }}
/>

IBMDLColor

The IBMDLColor component displays the color as a row with the color name and display option of hex, rgb, pms or cmyk color display.

Design inspired from 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>

{display => ( )}

LightningColor

The LightningColor component displays the color as a row, with color, name, description, var and sas variables and contrast ratio. allows for custom columns.

Design inspired from 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',
    },
  }}
/>

<LightningColorPalette columns={[ { title: 'Released', name: 'released', render: value => <div style={{ textAlign: 'right' }}>{value}, }, { title: 'Themeable', name: 'themeable', render: value => ( <div style={{ textAlign: 'center' }}>{value ? 'Yes' : 'No'} ), }, { 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} ), }, ]} 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', }, }} />

LiquidColor

The LiquidColor component displays the color as a block with values for rgb and a palette of lighter and darker colors.

Design inspired from 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',
  }}
/>

MorningstarColor

The MorningstarColor component displays the color as a table row, with color, name, sass variable name and hex value.

Design inspired from 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',
    },
  }}
/>

OPatternColor

The OPatternColor component displays the color as a table row, with color block, sass name, andhex, rgb and cmyk color values.

Design inspired from 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',
    },
  }}
/>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

colors.mdx

colors.mdx

Overview

AltaColor

AntdHorzColor

AntdVertColor

AnvilColor

AtlassianColor

AudiDSColor

BackpackColor

BaseWebColor

BeelineColor

BoltColor

CanvasColor

CedarColor

CometColor

DuetColor

ETradeColor

FinastraColor

FishTankColor

GovUKColor

HelpScoutColor

IBMDLColor

LightningColor

LiquidColor

MorningstarColor

OPatternColor

Files

colors.mdx

Latest commit

History

colors.mdx

File metadata and controls

Overview

AltaColor

AntdHorzColor

AntdVertColor

AnvilColor

AtlassianColor

AudiDSColor

BackpackColor

BaseWebColor

BeelineColor

BoltColor

CanvasColor

CedarColor

CometColor

DuetColor

ETradeColor

FinastraColor

FishTankColor

GovUKColor

HelpScoutColor

IBMDLColor

LightningColor

LiquidColor

MorningstarColor

OPatternColor