Edit page

Colors

Colors help you communicate the structure of your UI, emphasize any important information, or signal different states of the UI. Use colors intentionally — they are not a decoration, they should always serve a purpose.

👉 You can adjust all custom properties on this page (and more) in your theme by overriding values in the design tokens section.

General Guidelines

We have different shades for all of our brand and UI colors in React UI. The following principles apply for them:

  • Every color has three additional shades defined: light, dark, and darker. These additional shades should only be used for specific cases.
  • Light shade of any color should only be used for background.
  • Dark shades should be used for text on light shade background to improve contrast, or to reflect a state of a component (hover, focus, active).
  • Every color suggests what color should be used for text placed on it. You don't have to think if black or white is better — just use on-primary for text on primary color background or on-success for success color background, and you should be safe.

A full scale of shades of gray is here at your disposal. But remember it's better to choose just a couple of them rather than using all shades of gray impulsively. Reducing your gray color palette to three or four shades will help you keep your UI clean and unobtrusive.

All colors can be changed by overriding the corresponding CSS custom properties.

Brand Colors

Primary and secondary brand colors represent the visual identity of your project.

primary
--rui-color-primary
primary-dark
--rui-color-primary-dark
primary-darker
--rui-color-primary-darker
primary-light
--rui-color-primary-light
on-primary
--rui-color-on-primary
secondary
--rui-color-secondary
secondary-dark
--rui-color-secondary-dark
secondary-darker
--rui-color-secondary-darker
secondary-light
--rui-color-secondary-light
on-secondary
--rui-color-on-secondary

UI Colors

UI colors communicate a meaning: green means success, orange means warning, red means danger or error, etc.

success
--rui-color-success
success-dark
--rui-color-success-dark
success-darker
--rui-color-success-darker
success-light
--rui-color-success-light
on-success
--rui-color-on-success
warning
--rui-color-warning
warning-dark
--rui-color-warning-dark
warning-darker
--rui-color-warning-darker
warning-light
--rui-color-warning-light
on-warning
--rui-color-on-warning
danger
--rui-color-danger
danger-dark
--rui-color-danger-dark
danger-darker
--rui-color-danger-darker
danger-light
--rui-color-danger-light
on-danger
--rui-color-on-danger
help
--rui-color-help
help-dark
--rui-color-help-dark
help-darker
--rui-color-help-darker
help-light
--rui-color-help-light
on-help
--rui-color-on-help
info
--rui-color-info
info-dark
--rui-color-info-dark
info-darker
--rui-color-info-darker
info-light
--rui-color-info-light
on-info
--rui-color-on-info
note
--rui-color-note
note-dark
--rui-color-note-dark
note-darker
--rui-color-note-darker
note-light
--rui-color-note-light
on-note
--rui-color-on-note

Grays

Shades of should be used to communicate structure, either with backgrounds, or with borders. They are all neutral grays, which means they are derived from pure white color (#fff).

white
--rui-color-white
gray-50
--rui-color-gray-50
gray-100
--rui-color-gray-100
gray-200
--rui-color-gray-200
gray-300
--rui-color-gray-300
gray-400
--rui-color-gray-400
gray-500
--rui-color-gray-500
gray-600
--rui-color-gray-600
gray-700
--rui-color-gray-700
gray-800
--rui-color-gray-800
gray-900
--rui-color-gray-900
black
--rui-color-black
light
--rui-color-light
dark
--rui-color-dark
muted
--rui-color-muted

Applying Colors

Components can apply non-gray colors above using one of the following color palettes.

Component Colors

Some components (Alert, Badge, and more) come in more color variants to help you better reflect their importance or nature of their content. Following colors are available in such cases:

  • basic shades of all brand colors: primary and secondary,
  • basic shades of all UI colors: success, warning, danger, help, info, and note,
  • selected shades of gray: light (neutral shade to stand out on dark surfaces) and dark (neutral shade to stand out on light surfaces).

There is always a reasonable default for the component in question which can be changed to any of supported values above through the color prop.

Validation States

All form field components that support validation states (CheckboxField, TextField, Toggle and more) apply selected UI colors for individual states:

  • success UI color for valid state,
  • warning UI color for warning state,
  • danger UI color for invalid state.

Validation state is always optional so default styling is applied for the component when its validationState prop is not specified.