As designed by Canonical, we use the following system palette (from Michał Prędotka and Ubuntu documentation):

Operating system and app palette#

../../_images/color-white.svg
  • #FFFFFF White

Recommended for background on Ambiance theme (light theme) or regular text on Suru Dark theme.

../../_images/color-TextGrey.svg
  • #111111 Jet

Recommended for regular text on Ambiance theme or background in Suru Dark.

../../_images/UT-color-inkstone.svg
  • #3B3B3B Inkstone

Recommended for foreground colours in dark themes.

../../_images/UT-color-Slate.svg
  • #5D5D5D Slate

Recommended for text and action icons.

../../_images/UT-color-Graphite.svg
  • #666666 Graphite

Recommended for coloring dark themes’ background.

../../_images/UT-color-Ash.svg
  • #888888 Ash

Recommended for subtitles and other tertiary content.

../../_images/UT-color-Silk.svg
  • #CDCDCD Silk

Recommended for neutral action buttons and secondary text.

../../_images/UT-color-Porcelain.svg
  • #F7F7F7 Porcelain

Recommended for foregrounds.

../../_images/UT-color-Blue.svg
  • #335280 Blue

Recommended for progress bars, selected areas, text selection and text cursor. Also neutral actions (Ambiance).

../../_images/UT-color-lightBlue.svg
  • #19B6EE Light Blue

Recommended for progress bars, selected areas, text selection and text cursor. Also neutral actions (SuruDark).

../../_images/UT-color-Green.svg
  • #0E8420 Green

Recommended for positive action buttons (Ambiance).

../../_images/UT-color-lightGreen.svg
  • #3EB34F Light Green

Recommended for positive action buttons (SuruDark).

../../_images/color-Red.svg
  • #C7162B Red

Recommended for negative and irreversible action buttons, errors and alerts (Ambiance).

../../_images/color-lightRed.svg
  • #ED3146 Light Red

Recommended for negative and irreversible action buttons, errors and alerts (SuruDark).

../../_images/color-orange.svg
  • #E95420 Orange

Orange is recommended for branded elements, focus and intensity.