Colors

Colors

For consistency and brand awareness, we use the below defined color palettes throughout our interfaces.

Neutral palette#

The neutral color palette is used for typography and most backgrounds.

Neutral colors help you structure your content. They set a calm and not distractive environment. They don’t typically have a meaning associated with them, though they can imply things like disabled states of elements.

Accent palette#

The accent color palette is used in logical ways throughout the product to guide the eye and highlight the important, interactive UI bits.

Notification palette#

Each color in the notification color palette is selected intentionally to provide meaningful feedback within our experiences. Notification colors should be used purposefully to communicate and inform users.

Info#

Info palette is used to indicate informative notifications, progress, and labels in the system.

Success#

Success palette is used to indicate success states. Green is a vibrant color and should be used sparingly to convey a positive feeling.

Warning#

Warning palette is used to indicate a warning or that progress is hindered. Use yellow to indicate to indicate a user that an issue can be avoided or needs a corrective action.

Danger#

Danger palette is used to indicate error states and messages. Red is an alarming color and should be used with care as it can convey a negative feeling.

Functional tokens#

Base color tokens listed above just represent a static color value and looking at them doesn't tell you much about possible applications. Functional tokens allow us to abstract values to attach a meaning to their intended usage. They allow us to layer references on top of base color tokens to enable more predictable combination and application of colors.

Migration to functional tokens will allow easier implementation of new color-related features like dark mode, custom themes or even simplify future product rebranding. Functional tokens act as an API on top of our color palettes, in a sense that the tokens can be referenced without worrying about their underlying value. Apps that stick to the tokens will get all future color and theme updates "for free", which is a win for maintainability going forward.

Every functional color token follows the same predictable naming convention that helps provide an understanding on how or when the token should be used.

The format of the name is: [property][role][variant][state], where:

• ​
  property is a UI entity the token will be applied to, such as background or border.
• ​
  role describes the intention behind the token.
• ​
  variant refers to variations of the token, for example how prominent it appears. Prominence scale ranges from minimal to contrast.
• ​
  state is optional and can represent available interaction options such as hover or active.

This gives us final token names like:

Finally, the functional tokens are referenced throughout component styles:

import { styled } from '@volue/wave-react';

const Component = styled('div', {
  backgroundColor: '$backgroundSuccessStrong',
  color: '$foregroundSuccessInverse',

  '&:hover': {
    backgroundColor: '$backgroundSuccessStrongHover'
  }
});

Our functional color tokens belong to one of three groups: background, foreground and border.

Pairing#

It is recommended to pair default color foregrounds with their default and subtle background counterparts. These pairings are designed to be legible and meet accessibility guidance (WCAG AA contrast requirements).

However not all colors pair well with each other. For example you shouldn't combine default foregrounds with strong backgrounds as that will result in inaccessible pairings. Instead, use inverse foreground tokens designed to show on strong backgrounds for optimal contrast.

Here are some general color pairings that have been designed and tested for accessible contrast ratios:

Use hover, active and disabled tokens to communicate visual changes related to interaction states:

CSS variables#

Color tokens exist in different formats and can be also consumed as CSS custom properties​ or variables. You can use any styling solution to read those variables.

CSS variable names are formatted in kebab-case​:

.element {
  background: var(--color-background-neutral-moderate);
  color: var(--color-foreground-neutral);
}

There are even more ways of integrating tokens into your product with help of @volue/design-colors package.

Background tokens#

Background color tokens define the background colors used in surfaces of components or UI elements. Do not use these for border colors or foreground colors.

• backgroundNeutralMinimal

  colorWhite

  #ffffff

  Minimal neutral background. Used for the background area of your app and UI components like cards, inputs etc.

  CSS variable:

  var(--color-background-neutral-minimal)

• backgroundNeutralSubtle

  colorGray5

  #f8fcfb

  Subtle neutral background. Used for the background of your app, e.g. when you create a card-based layout.

  CSS variable:

  var(--color-background-neutral-subtle)

• backgroundNeutralModerate

  colorGray10

  #f2f9f8

  Moderate neutral background. Used for the background area of components that should stand out somewhat against minimal neutral surfaces.

  CSS variable:

  var(--color-background-neutral-moderate)

• backgroundNeutral

  colorGray20

  #e2ebe9

  Default neutral background.

  CSS variable:

  var(--color-background-neutral)

• backgroundNeutralBold

  colorGray60

  #5d7570

  Bold neutral background.

  CSS variable:

  var(--color-background-neutral-bold)

• backgroundNeutralStrong

  colorGray80

  #2e4540

  Strong neutral background.

  CSS variable:

  var(--color-background-neutral-strong)

• backgroundNeutralStrongHover

  colorGray90

  #162b27

  Strong neutral background hover state.

  CSS variable:

  var(--color-background-neutral-strong-hover)

• backgroundNeutralStrongActive

  colorGray100

  #091a16

  Strong neutral background active state.

  CSS variable:

  var(--color-background-neutral-strong-active)

• backgroundNeutralContrast

  colorGray100

  #091a16

  Contrast neutral background. Used for backgrounds of components that should stand out from the rest of the content, such as app header or tooltips.

  CSS variable:

  var(--color-background-neutral-contrast)

• backgroundAccentSubtle

  colorSolarMist20

  #eefffc

  Subtle accent background.

  CSS variable:

  var(--color-background-accent-subtle)

• backgroundAccentSubtleHover

  colorSolarMist30

  #e3fffa

  Subtle accent background hover state.

  CSS variable:

  var(--color-background-accent-subtle-hover)

• backgroundAccentSubtleActive

  colorSolarMist40

  #d1fff7

  Subtle accent background active state.

  CSS variable:

  var(--color-background-accent-subtle-active)

• backgroundAccent

  colorSolarMist30

  #e3fffa

  Default accent background.

  CSS variable:

  var(--color-background-accent)

• backgroundAccentHover

  colorSolarMist40

  #d1fff7

  Default accent background hover state.

  CSS variable:

  var(--color-background-accent-hover)

• backgroundAccentActive

  colorSolarMist50

  #b8fdf1

  Default accent background active state.

  CSS variable:

  var(--color-background-accent-active)

• backgroundAccentBold

  colorSolarMist60

  #9fe3d7

  Bold accent background.

  CSS variable:

  var(--color-background-accent-bold)

• backgroundAccentStrong

  colorSolarMist80

  #487d74

  Strong accent background.

  CSS variable:

  var(--color-background-accent-strong)

• backgroundDangerSubtle

  colorRed5

  #ffe8e0

  Subtle danger background.

  CSS variable:

  var(--color-background-danger-subtle)

• backgroundDangerSubtleHover

  colorRed10

  #ffd2c8

  Subtle danger background hover state.

  CSS variable:

  var(--color-background-danger-subtle-hover)

• backgroundDangerSubtleActive

  colorRed20

  #ffbcb0

  Subtle danger background active state.

  CSS variable:

  var(--color-background-danger-subtle-active)

• backgroundDanger

  colorRed10

  #ffd2c8

  Default danger background.

  CSS variable:

  var(--color-background-danger)

• backgroundDangerHover

  colorRed20

  #ffbcb0

  Default danger background hover state.

  CSS variable:

  var(--color-background-danger-hover)

• backgroundDangerActive

  colorRed30

  #ffa699

  Default danger background active state.

  CSS variable:

  var(--color-background-danger-active)

• backgroundDangerBold

  colorRed70

  #e4433a

  Bold danger background.

  CSS variable:

  var(--color-background-danger-bold)

• backgroundDangerBoldHover

  colorRed80

  #d91c1c

  Bold danger background hover state.

  CSS variable:

  var(--color-background-danger-bold-hover)

• backgroundDangerBoldActive

  colorRed90

  #a50000

  Bold danger background active state.

  CSS variable:

  var(--color-background-danger-bold-active)

• backgroundDangerStrong

  colorRed80

  #d91c1c

  Strong danger background state.

  CSS variable:

  var(--color-background-danger-strong)

• backgroundDangerStrongHover

  colorRed90

  #a50000

  Strong danger background hover state.

  CSS variable:

  var(--color-background-danger-strong-hover)

• backgroundDangerStrongActive

  colorRed100

  #660000

  Strong danger background active state.

  CSS variable:

  var(--color-background-danger-strong-active)

• backgroundWarningSubtle

  colorYellow5

  #fffbe8

  Subtle warning background.

  CSS variable:

  var(--color-background-warning-subtle)

• backgroundWarningSubtleHover

  colorYellow10

  #fff6c7

  Subtle warning background hover state.

  CSS variable:

  var(--color-background-warning-subtle-hover)

• backgroundWarningSubtleActive

  colorYellow20

  #fff0a6

  Subtle warning background active state.

  CSS variable:

  var(--color-background-warning-subtle-active)

• backgroundWarning

  colorYellow10

  #fff6c7

  Default warning background.

  CSS variable:

  var(--color-background-warning)

• backgroundWarningHover

  colorYellow20

  #fff0a6

  Default warning background hover state.

  CSS variable:

  var(--color-background-warning-hover)

• backgroundWarningActive

  colorYellow30

  #ffeb85

  Default warning background active state.

  CSS variable:

  var(--color-background-warning-active)

• backgroundWarningBold

  colorYellow70

  #ffd000

  Bold warning background.

  CSS variable:

  var(--color-background-warning-bold)

• backgroundWarningBoldHover

  colorYellow80

  #deb900

  Bold warning background hover state.

  CSS variable:

  var(--color-background-warning-bold-hover)

• backgroundWarningBoldActive

  colorYellow90

  #a38400

  Bold warning background active state.

  CSS variable:

  var(--color-background-warning-bold-active)

• backgroundWarningStrong

  colorYellow80

  #deb900

  Strong warning background state.

  CSS variable:

  var(--color-background-warning-strong)

• backgroundWarningStrongHover

  colorYellow90

  #a38400

  Strong warning background hover state.

  CSS variable:

  var(--color-background-warning-strong-hover)

• backgroundWarningStrongActive

  colorYellow100

  #594700

  Strong warning background active state.

  CSS variable:

  var(--color-background-warning-strong-active)

• backgroundSuccessSubtle

  colorGreen5

  #dfffe5

  Subtle success background.

  CSS variable:

  var(--color-background-success-subtle)

• backgroundSuccessSubtleHover

  colorGreen10

  #c6f2cd

  Subtle success background hover state.

  CSS variable:

  var(--color-background-success-subtle-hover)

• backgroundSuccessSubtleActive

  colorGreen20

  #ace3b6

  Subtle success background active state.

  CSS variable:

  var(--color-background-success-subtle-active)

• backgroundSuccess

  colorGreen10

  #c6f2cd

  Default success background.

  CSS variable:

  var(--color-background-success)

• backgroundSuccessHover

  colorGreen20

  #ace3b6

  Default success background hover state.

  CSS variable:

  var(--color-background-success-hover)

• backgroundSuccessActive

  colorGreen30

  #92d49e

  Default success background active state.

  CSS variable:

  var(--color-background-success-active)

• backgroundSuccessBold

  colorGreen70

  #009842

  Bold success background.

  CSS variable:

  var(--color-background-success-bold)

• backgroundSuccessBoldHover

  colorGreen80

  #008928

  Bold success background hover state.

  CSS variable:

  var(--color-background-success-bold-hover)

• backgroundSuccessBoldActive

  colorGreen90

  #00641b

  Bold success background active state.

  CSS variable:

  var(--color-background-success-bold-active)

• backgroundSuccessStrong

  colorGreen80

  #008928

  Strong success background state.

  CSS variable:

  var(--color-background-success-strong)

• backgroundSuccessStrongHover

  colorGreen90

  #00641b

  Strong success background hover state.

  CSS variable:

  var(--color-background-success-strong-hover)

• backgroundSuccessStrongActive

  colorGreen100

  #00400e

  Strong success background active state.

  CSS variable:

  var(--color-background-success-strong-active)

• backgroundInfoSubtle

  colorAqua5

  #e0f7ff

  Subtle info background.

  CSS variable:

  var(--color-background-info-subtle)

• backgroundInfoSubtleHover

  colorAqua10

  #beefff

  Subtle info background hover state.

  CSS variable:

  var(--color-background-info-subtle-hover)

• backgroundInfoSubtleActive

  colorAqua20

  #9ce6ff

  Subtle info background active state.

  CSS variable:

  var(--color-background-info-subtle-active)

• backgroundInfo

  colorAqua10

  #beefff

  Default info background.

  CSS variable:

  var(--color-background-info)

• backgroundInfoHover

  colorAqua20

  #9ce6ff

  Default info background hover state.

  CSS variable:

  var(--color-background-info-hover)

• backgroundInfoActive

  colorAqua30

  #73dcff

  Default info background active state.

  CSS variable:

  var(--color-background-info-active)

• backgroundInfoBold

  colorAqua70

  #009cd0

  Bold info background.

  CSS variable:

  var(--color-background-info-bold)

• backgroundInfoBoldHover

  colorAqua80

  #00769e

  Bold info background hover state.

  CSS variable:

  var(--color-background-info-bold-hover)

• backgroundInfoBoldActive

  colorAqua90

  #004f6a

  Bold info background active state.

  CSS variable:

  var(--color-background-info-bold-active)

• backgroundInfoStrong

  colorAqua80

  #00769e

  Strong info background state.

  CSS variable:

  var(--color-background-info-strong)

• backgroundInfoStrongHover

  colorAqua90

  #004f6a

  Strong info background hover state.

  CSS variable:

  var(--color-background-info-strong-hover)

• backgroundInfoStrongActive

  colorAqua100

  #002b3a

  Strong info background active state.

  CSS variable:

  var(--color-background-info-strong-active)

• backgroundDisabled

  colorGray20

  #e2ebe9

  Disabled background.

  CSS variable:

  var(--color-background-disabled)

• backgroundDisabledSubtle

  colorGray10

  #f2f9f8

  Subtle disabled background.

  CSS variable:

  var(--color-background-disabled-subtle)

Foreground tokens#

Foreground color tokens are used for text content, icons, and other elements rendered on top of a background. Do not use these for border colors or background colors.

• Aa

  foregroundNeutral

  colorGray90

  #162b27

  Default neutral foreground. Used for primary, high-contrast text.

  CSS variable:

  var(--color-foreground-neutral)

• Aa

  foregroundNeutralModerate

  colorGray80

  #2e4540

  Moderate neutral foreground. Used for secondary text.

  CSS variable:

  var(--color-foreground-neutral-moderate)

• Aa

  foregroundNeutralSubtle

  colorGray60

  #5d7570

  Subtle neutral foreground. Used for tertiary, low-contrast text.

  CSS variable:

  var(--color-foreground-neutral-subtle)

• Aa

  foregroundNeutralMinimal

  colorGray40

  #a2b2af

  Minimal neutral foreground. Used for disabled text.

  CSS variable:

  var(--color-foreground-neutral-minimal)

• Aa

  foregroundAccent

  colorSolarMist100

  #1e4a42

  Default accent foreground.

  CSS variable:

  var(--color-foreground-accent)

• Aa

  foregroundAccentModerate

  colorSolarMist90

  #32635b

  Moderate accent foreground.

  CSS variable:

  var(--color-foreground-accent-moderate)

• Aa

  foregroundAccentSubtle

  colorSolarMist80

  #487d74

  Subtle accent foreground.

  CSS variable:

  var(--color-foreground-accent-subtle)

• Aa

  foregroundDanger

  colorRed100

  #660000

  Default danger foreground.

  CSS variable:

  var(--color-foreground-danger)

• Aa

  foregroundDangerModerate

  colorRed80

  #d91c1c

  Moderate danger foreground.

  CSS variable:

  var(--color-foreground-danger-moderate)

• Aa

  foregroundDangerSubtle

  colorRed70

  #e4433a

  Subtle danger foreground.

  CSS variable:

  var(--color-foreground-danger-subtle)

• Aa

  foregroundWarning

  colorYellow100

  #594700

  Default warning foreground.

  CSS variable:

  var(--color-foreground-warning)

• Aa

  foregroundWarningModerate

  colorYellow90

  #a38400

  Moderate warning foreground.

  CSS variable:

  var(--color-foreground-warning-moderate)

• Aa

  foregroundWarningSubtle

  colorYellow70

  #ffd000

  Subtle warning foreground.

  CSS variable:

  var(--color-foreground-warning-subtle)

• Aa

  foregroundWarningInverse

  colorGray100

  #091a16

  Inverse warning foreground. Used on strong warning background for optimal contrast.

  CSS variable:

  var(--color-foreground-warning-inverse)

• Aa

  foregroundSuccess

  colorGreen100

  #00400e

  Default success foreground.

  CSS variable:

  var(--color-foreground-success)

• Aa

  foregroundSuccessModerate

  colorGreen80

  #008928

  Moderate success foreground.

  CSS variable:

  var(--color-foreground-success-moderate)

• Aa

  foregroundSuccessSubtle

  colorGreen70

  #009842

  Subtle success foreground.

  CSS variable:

  var(--color-foreground-success-subtle)

• Aa

  foregroundInfo

  colorAqua100

  #002b3a

  Default info foreground.

  CSS variable:

  var(--color-foreground-info)

• Aa

  foregroundInfoModerate

  colorAqua80

  #00769e

  Moderate info foreground.

  CSS variable:

  var(--color-foreground-info-moderate)

• Aa

  foregroundInfoSubtle

  colorAqua70

  #009cd0

  Subtle info foreground.

  CSS variable:

  var(--color-foreground-info-subtle)

• Aa

  foregroundDisabled

  colorGray40

  #a2b2af

  Disabled foreground.

  CSS variable:

  var(--color-foreground-disabled)

• Aa

  foregroundDisabledSubtle

  colorGray30

  #c4d0cd

  Subtle disabled foreground.

  CSS variable:

  var(--color-foreground-disabled-subtle)

• Aa

  foregroundInverse

  colorWhite

  #ffffff

  Inverse foreground. Used for text on strong backgrounds.

  CSS variable:

  var(--color-foreground-inverse)

Border tokens#

Border color tokens define the color of borders, as seen in toasts, cards, form fields, and more. Do not use these for background colors or foreground colors.

• borderNeutralSubtle

  colorGray20

  #e2ebe9

  Subtle neutral border.

  CSS variable:

  var(--color-border-neutral-subtle)

• borderNeutralModerate

  colorGray30

  #c4d0cd

  Moderate neutral border.

  CSS variable:

  var(--color-border-neutral-moderate)

• borderNeutral

  colorGray40

  #a2b2af

  Default neutral border.

  CSS variable:

  var(--color-border-neutral)

• borderNeutralBold

  colorGray70

  #475e59

  Bold neutral border.

  CSS variable:

  var(--color-border-neutral-bold)

• borderNeutralContrast

  colorGray100

  #091a16

  Contrast neutral border.

  CSS variable:

  var(--color-border-neutral-contrast)

• borderAccent

  colorSolarMist50

  #b8fdf1

  Default accent border.

  CSS variable:

  var(--color-border-accent)

• borderAccentHover

  colorSolarMist60

  #9fe3d7

  Default accent border hover state.

  CSS variable:

  var(--color-border-accent-hover)

• borderAccentActive

  colorSolarMist70

  #7ebdb2

  Default accent border active state.

  CSS variable:

  var(--color-border-accent-active)

• borderAccentBold

  colorSolarMist80

  #487d74

  Bold accent border.

  CSS variable:

  var(--color-border-accent-bold)

• borderAccentStrong

  colorSolarMist90

  #32635b

  Strong accent border.

  CSS variable:

  var(--color-border-accent-strong)

• borderDanger

  colorRed30

  #ffa699

  Default danger border.

  CSS variable:

  var(--color-border-danger)

• borderDangerBold

  colorRed80

  #d91c1c

  Bold danger border.

  CSS variable:

  var(--color-border-danger-bold)

• borderDangerStrong

  colorRed90

  #a50000

  Strong danger border.

  CSS variable:

  var(--color-border-danger-strong)

• borderWarning

  colorYellow50

  #ffdc42

  Default warning border.

  CSS variable:

  var(--color-border-warning)

• borderWarningBold

  colorYellow80

  #deb900

  Bold warning border.

  CSS variable:

  var(--color-border-warning-bold)

• borderWarningStrong

  colorYellow90

  #a38400

  Strong warning border.

  CSS variable:

  var(--color-border-warning-strong)

• borderSuccess

  colorGreen40

  #77c588

  Default success border.

  CSS variable:

  var(--color-border-success)

• borderSuccessBold

  colorGreen80

  #008928

  Bold success border.

  CSS variable:

  var(--color-border-success-bold)

• borderSuccessStrong

  colorGreen90

  #00641b

  Strong success border.

  CSS variable:

  var(--color-border-success-strong)

• borderInfo

  colorAqua40

  #53d4ff

  Default info border.

  CSS variable:

  var(--color-border-info)

• borderInfoBold

  colorAqua80

  #00769e

  Bold info border.

  CSS variable:

  var(--color-border-info-bold)

• borderInfoStrong

  colorAqua90

  #004f6a

  Strong info border.

  CSS variable:

  var(--color-border-info-strong)

• borderDisabled

  colorGray20

  #e2ebe9

  Disabled border.

  CSS variable:

  var(--color-border-disabled)

• borderDisabledSubtle

  colorGray10

  #f2f9f8

  Subtle disabled border.

  CSS variable:

  var(--color-border-disabled-subtle)

• borderInverse

  colorWhite

  rgba(255, 255, 255, 0.85)

  Inverse border. Used for borders on strong backgrounds.

  CSS variable:

  var(--color-border-inverse)

RGB channels#

When a token translates to #000000 (hex) or rgb(0, 0, 0) color value in CSS, it becomes a challenge to apply opacity just to the color value without making the whole component transparent.

While sticking to solid colors is the default, recommended way, in some special cases there might be a need to reduce the opacity of a color. For example, transparent shades adapt easier to different backgrounds, since they keep the contrast between the element and its background more consistent.

That's why for a subset of background color tokens, their RGB channel values are exposed as separate tokens to be combined with an alpha/opacity. You can use them with the rgba color function​ like this:

const Component = styled('div', {
  backgroundColor: 'rgba($rgbBackgroundNeutralBold, 0.15)'
});

.element {
  background: rgba(var(--color-rgb-background-neutral-bold), 0.15);
}

The following rgb channel tokens are available:

• rgbBackgroundNeutralMinimal

  backgroundNeutralMinimal

  255, 255, 255

  CSS variable:

  rgba(var(--color-rgb-background-neutral-minimal), 0.5)

• rgbBackgroundNeutral

  backgroundNeutral

  226, 235, 233

  CSS variable:

  rgba(var(--color-rgb-background-neutral), 0.5)

• rgbBackgroundNeutralBold

  backgroundNeutralBold

  93, 117, 112

  CSS variable:

  rgba(var(--color-rgb-background-neutral-bold), 0.5)

• rgbBackgroundNeutralStrong

  backgroundNeutralStrong

  46, 69, 64

  CSS variable:

  rgba(var(--color-rgb-background-neutral-strong), 0.5)

• rgbBackgroundAccent

  backgroundAccent

  227, 255, 250

  CSS variable:

  rgba(var(--color-rgb-background-accent), 0.5)

• rgbBackgroundAccentBold

  backgroundAccentBold

  159, 227, 215

  CSS variable:

  rgba(var(--color-rgb-background-accent-bold), 0.5)

• rgbBackgroundAccentStrong

  backgroundAccentStrong

  72, 125, 116

  CSS variable:

  rgba(var(--color-rgb-background-accent-strong), 0.5)

• rgbBackgroundDanger

  backgroundDanger

  255, 210, 200

  CSS variable:

  rgba(var(--color-rgb-background-danger), 0.5)

• rgbBackgroundDangerBold

  backgroundDangerBold

  228, 67, 58

  CSS variable:

  rgba(var(--color-rgb-background-danger-bold), 0.5)

• rgbBackgroundDangerStrong

  backgroundDangerStrong

  217, 28, 28

  CSS variable:

  rgba(var(--color-rgb-background-danger-strong), 0.5)

• rgbBackgroundWarning

  backgroundWarning

  255, 246, 199

  CSS variable:

  rgba(var(--color-rgb-background-warning), 0.5)

• rgbBackgroundWarningBold

  backgroundWarningBold

  255, 208, 0

  CSS variable:

  rgba(var(--color-rgb-background-warning-bold), 0.5)

• rgbBackgroundWarningStrong

  backgroundWarningStrong

  222, 185, 0

  CSS variable:

  rgba(var(--color-rgb-background-warning-strong), 0.5)

• rgbBackgroundSuccess

  backgroundSuccess

  198, 242, 205

  CSS variable:

  rgba(var(--color-rgb-background-success), 0.5)

• rgbBackgroundSuccessBold

  backgroundSuccessBold

  0, 152, 66

  CSS variable:

  rgba(var(--color-rgb-background-success-bold), 0.5)

• rgbBackgroundSuccessStrong

  backgroundSuccessStrong

  0, 137, 40

  CSS variable:

  rgba(var(--color-rgb-background-success-strong), 0.5)

• rgbBackgroundInfo

  backgroundInfo

  190, 239, 255

  CSS variable:

  rgba(var(--color-rgb-background-info), 0.5)

• rgbBackgroundInfoBold

  backgroundInfoBold

  0, 156, 208

  CSS variable:

  rgba(var(--color-rgb-background-info-bold), 0.5)

• rgbBackgroundInfoStrong

  backgroundInfoStrong

  0, 118, 158

  CSS variable:

  rgba(var(--color-rgb-background-info-strong), 0.5)

Secondary colors#

Colors other than Aqua, Green, Yellow and Red have a unique purpose and should be used only only for data visualisation and information highlighting.

Teal#

Purple#

Pink#

Blue#

Lazuli#

Lime#

Orange#

Pear#

Brown#

RGB channels#

RGB channel values of secondary colors are exposed as separate tokens to be combined with an alpha/opacity.

• rgbColorTeal20

  colorTeal20

  171, 225, 210

  CSS variable:

  rgba(var(--color-rgb-color-teal20), 0.5)

• rgbColorTeal40

  colorTeal40

  122, 194, 176

  CSS variable:

  rgba(var(--color-rgb-color-teal40), 0.5)

• rgbColorTeal60

  colorTeal60

  68, 164, 143

  CSS variable:

  rgba(var(--color-rgb-color-teal60), 0.5)

• rgbColorTeal80

  colorTeal80

  0, 134, 111

  CSS variable:

  rgba(var(--color-rgb-color-teal80), 0.5)

• rgbColorTeal100

  colorTeal100

  0, 50, 40

  CSS variable:

  rgba(var(--color-rgb-color-teal100), 0.5)

• rgbColorPurple20

  colorPurple20

  227, 191, 255

  CSS variable:

  rgba(var(--color-rgb-color-purple20), 0.5)

• rgbColorPurple40

  colorPurple40

  198, 146, 255

  CSS variable:

  rgba(var(--color-rgb-color-purple40), 0.5)

• rgbColorPurple60

  colorPurple60

  171, 99, 250

  CSS variable:

  rgba(var(--color-rgb-color-purple60), 0.5)

• rgbColorPurple80

  colorPurple80

  144, 30, 232

  CSS variable:

  rgba(var(--color-rgb-color-purple80), 0.5)

• rgbColorPurple100

  colorPurple100

  51, 0, 92

  CSS variable:

  rgba(var(--color-rgb-color-purple100), 0.5)

• rgbColorPink20

  colorPink20

  255, 180, 216

  CSS variable:

  rgba(var(--color-rgb-color-pink20), 0.5)

• rgbColorPink40

  colorPink40

  255, 131, 184

  CSS variable:

  rgba(var(--color-rgb-color-pink40), 0.5)

• rgbColorPink60

  colorPink60

  249, 75, 154

  CSS variable:

  rgba(var(--color-rgb-color-pink60), 0.5)

• rgbColorPink80

  colorPink80

  229, 0, 125

  CSS variable:

  rgba(var(--color-rgb-color-pink80), 0.5)

• rgbColorPink100

  colorPink100

  80, 0, 40

  CSS variable:

  rgba(var(--color-rgb-color-pink100), 0.5)

• rgbColorAqua20

  colorAqua20

  156, 230, 255

  CSS variable:

  rgba(var(--color-rgb-color-aqua20), 0.5)

• rgbColorAqua40

  colorAqua40

  83, 212, 255

  CSS variable:

  rgba(var(--color-rgb-color-aqua40), 0.5)

• rgbColorAqua60

  colorAqua60

  8, 193, 255

  CSS variable:

  rgba(var(--color-rgb-color-aqua60), 0.5)

• rgbColorAqua80

  colorAqua80

  0, 118, 158

  CSS variable:

  rgba(var(--color-rgb-color-aqua80), 0.5)

• rgbColorAqua100

  colorAqua100

  0, 43, 58

  CSS variable:

  rgba(var(--color-rgb-color-aqua100), 0.5)

• rgbColorBlue20

  colorBlue20

  175, 211, 255

  CSS variable:

  rgba(var(--color-rgb-color-blue20), 0.5)

• rgbColorBlue40

  colorBlue40

  127, 175, 255

  CSS variable:

  rgba(var(--color-rgb-color-blue40), 0.5)

• rgbColorBlue60

  colorBlue60

  87, 145, 255

  CSS variable:

  rgba(var(--color-rgb-color-blue60), 0.5)

• rgbColorBlue80

  colorBlue80

  34, 80, 229

  CSS variable:

  rgba(var(--color-rgb-color-blue80), 0.5)

• rgbColorBlue100

  colorBlue100

  0, 32, 135

  CSS variable:

  rgba(var(--color-rgb-color-blue100), 0.5)

• rgbColorLazuli20

  colorLazuli20

  199, 201, 255

  CSS variable:

  rgba(var(--color-rgb-color-lazuli20), 0.5)

• rgbColorLazuli40

  colorLazuli40

  162, 160, 255

  CSS variable:

  rgba(var(--color-rgb-color-lazuli40), 0.5)

• rgbColorLazuli60

  colorLazuli60

  130, 118, 255

  CSS variable:

  rgba(var(--color-rgb-color-lazuli60), 0.5)

• rgbColorLazuli80

  colorLazuli80

  101, 64, 251

  CSS variable:

  rgba(var(--color-rgb-color-lazuli80), 0.5)

• rgbColorLazuli100

  colorLazuli100

  35, 0, 114

  CSS variable:

  rgba(var(--color-rgb-color-lazuli100), 0.5)

• rgbColorGreen20

  colorGreen20

  172, 227, 182

  CSS variable:

  rgba(var(--color-rgb-color-green20), 0.5)

• rgbColorGreen40

  colorGreen40

  119, 197, 136

  CSS variable:

  rgba(var(--color-rgb-color-green40), 0.5)

• rgbColorGreen60

  colorGreen60

  72, 180, 101

  CSS variable:

  rgba(var(--color-rgb-color-green60), 0.5)

• rgbColorGreen80

  colorGreen80

  0, 137, 40

  CSS variable:

  rgba(var(--color-rgb-color-green80), 0.5)

• rgbColorGreen100

  colorGreen100

  0, 64, 14

  CSS variable:

  rgba(var(--color-rgb-color-green100), 0.5)

• rgbColorLime20

  colorLime20

  190, 225, 169

  CSS variable:

  rgba(var(--color-rgb-color-lime20), 0.5)

• rgbColorLime40

  colorLime40

  147, 194, 117

  CSS variable:

  rgba(var(--color-rgb-color-lime40), 0.5)

• rgbColorLime60

  colorLime60

  106, 164, 62

  CSS variable:

  rgba(var(--color-rgb-color-lime60), 0.5)

• rgbColorLime80

  colorLime80

  63, 134, 0

  CSS variable:

  rgba(var(--color-rgb-color-lime80), 0.5)

• rgbColorLime100

  colorLime100

  20, 52, 0

  CSS variable:

  rgba(var(--color-rgb-color-lime100), 0.5)

• rgbColorOrange20

  colorOrange20

  255, 210, 176

  CSS variable:

  rgba(var(--color-rgb-color-orange20), 0.5)

• rgbColorOrange40

  colorOrange40

  255, 182, 134

  CSS variable:

  rgba(var(--color-rgb-color-orange40), 0.5)

• rgbColorOrange60

  colorOrange60

  251, 152, 88

  CSS variable:

  rgba(var(--color-rgb-color-orange60), 0.5)

• rgbColorOrange80

  colorOrange80

  240, 109, 0

  CSS variable:

  rgba(var(--color-rgb-color-orange80), 0.5)

• rgbColorOrange100

  colorOrange100

  91, 37, 0

  CSS variable:

  rgba(var(--color-rgb-color-orange100), 0.5)

• rgbColorPear20

  colorPear20

  224, 237, 175

  CSS variable:

  rgba(var(--color-rgb-color-pear20), 0.5)

• rgbColorPear40

  colorPear40

  206, 222, 135

  CSS variable:

  rgba(var(--color-rgb-color-pear40), 0.5)

• rgbColorPear60

  colorPear60

  187, 207, 89

  CSS variable:

  rgba(var(--color-rgb-color-pear60), 0.5)

• rgbColorPear80

  colorPear80

  170, 192, 0

  CSS variable:

  rgba(var(--color-rgb-color-pear80), 0.5)

• rgbColorPear100

  colorPear100

  59, 69, 0

  CSS variable:

  rgba(var(--color-rgb-color-pear100), 0.5)

• rgbColorBrown20

  colorBrown20

  238, 205, 174

  CSS variable:

  rgba(var(--color-rgb-color-brown20), 0.5)

• rgbColorBrown40

  colorBrown40

  210, 168, 129

  CSS variable:

  rgba(var(--color-rgb-color-brown40), 0.5)

• rgbColorBrown60

  colorBrown60

  182, 133, 85

  CSS variable:

  rgba(var(--color-rgb-color-brown60), 0.5)

• rgbColorBrown80

  colorBrown80

  154, 98, 38

  CSS variable:

  rgba(var(--color-rgb-color-brown80), 0.5)

• rgbColorBrown100

  colorBrown100

  44, 20, 0

  CSS variable:

  rgba(var(--color-rgb-color-brown100), 0.5)

• rgbColorRed20

  colorRed20

  255, 188, 176

  CSS variable:

  rgba(var(--color-rgb-color-red20), 0.5)

• rgbColorRed40

  colorRed40

  255, 143, 129

  CSS variable:

  rgba(var(--color-rgb-color-red40), 0.5)

• rgbColorRed60

  colorRed60

  248, 104, 91

  CSS variable:

  rgba(var(--color-rgb-color-red60), 0.5)

• rgbColorRed80

  colorRed80

  217, 28, 28

  CSS variable:

  rgba(var(--color-rgb-color-red80), 0.5)

• rgbColorRed100

  colorRed100

  102, 0, 0

  CSS variable:

  rgba(var(--color-rgb-color-red100), 0.5)

Colors accessibility#

Found colors in the Wave palette that you would like to use together, but not sure if they will pass WCAG AA contrast requirements?

Recommended tools below can find you to test the colors you're planning on using to see if the pair meets the minimum color contrast requirements.