Color

Core Colors

Core colors form the tonal foundation of the Looker Components color palette.

backgroundkeytext

Intent Colors

Intent colors have a semantic meaning and are used to apply color to components that represent Looker specific ideas (dimension and measures) or components give the user additional context like a positive success message or indication of a critical destructive action.

calculationcriticaldimensioninformlinkmeasurepositivewarn

Derivative colors

Derivative colors are generated from core and intent colors. They represent special color usages, like inverse for tooltips above the background color, or informAccent for message bar background. Overriding the default theme core or intent colors can affect these colors.

fieldinverseinverseOnlinkInteractiveneutralinformAccentpositiveAccentwarnAccent

UI Colors

These colors are generated by tinting or shading the core background color. These are neutral colors that are applied to components in various ways, like borders and backgrounds.

ui1ui2ui3ui4ui5

Text Colors

These colors are generated by blending the core background and text color. Their purpose is to give a variety of colors for text hierarchy.

text1text2text3text4text5

Stateful Colors

Stateful colors are generated based on the core and intent colors. Their purpose is to create a set of colors that can be applied to interactive elements, like buttons, lists, and options.

keySubtlekeyAccentkeyFocuskeyInteractivekeyPressedkeyTextkeyBorder
criticalSubtlecriticalAccentcriticalFocuscriticalInteractivecriticalPressedcriticalTextcriticalBorder
neutralSubtleneutralAccentneutralFocusneutralInteractiveneutralPressedneutralTextneutralBorder
calculationSubtlecalculationAccentcalculationFocuscalculationInteractivecalculationPressedcalculationTextcalculationBorder
dimensionSubtledimensionAccentdimensionFocusdimensionInteractivedimensionPresseddimensionTextdimensionBorder
measureSubtlemeasureAccentmeasureFocusmeasureInteractivemeasurePressedmeasureTextmeasureBorder