• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Testing
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
      • Failed to execute removeChild on Node
    • FAQ
    • Contributing
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
      • Option Group
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. White
  2. Grey scale colors
  3. Rich colors
    1. Rich Blue
    2. Rich Green
    3. Rich Purple
    4. Rich Red
  4. Vibrant colors
    1. Vibrant Cyan
    2. Vibrant Green
    3. Vibrant Magenta
    4. Vibrant Yellow
    5. Sensitive Colors
  5. Theme palettes
Globals Colors
(external link)

Colors #

All colors listed below are available as global CSS custom properties after importing Liquid stylesheets.

Please be aware of our brand guidelines regarding colors.
For more information visit Brand Hub: Colors.

White #

Grey scale colors #

Rich colors #

Use rich colors for the structure of interfaces, actionable items, and validation. Colors in the 1 to 3 ranges have a WCAG AA contrast ratio above 4.5:1 against white or range 1 backgrounds.

Rich Blue #

Rich Green #

Rich Purple #

Rich Red #

Vibrant colors #

Vibrant Cyan #

Vibrant Green #

Vibrant Magenta #

Vibrant Yellow #

Sensitive Colors #

Theme palettes #

For available theme colors, please have a look at the documentation on Theming.