zero·style

Dictionary entry

semantic color

View related-term graphUse in a brief
Was this helpful?
UI / UXCurated · verified

A color defined by the job it does in an interface — like 'success', 'warning', or 'danger' — instead of by its actual hue, so the same role can map to a different shade in light and dark themes.

Synonyms

  • semantic color role
  • color role

Related terms

In plain words

  • naming a color by its job, like 'error red', instead of its shade
  • colors labelled by what they mean, such as green for success

Usage example

We map the semantic color 'danger' to a bright red in light mode and a softer red in dark mode.

Don't confuse with…

  • hex codeA hex code is one fixed literal color; a semantic color is a named role that can point to different hex codes depending on the theme.

Categories

  • Color

Related-term graph

Two hops from semantic color — click a term to open its entry, or re-center the graph on it

Focus term

Directly related

Two hops away

  • Relatedsemantic color related of accent color
  • Relatedsemantic color related of color token
  • Relatedsemantic color related of design token
  • Relatedsemantic color related of semantic token
  • Synonymsemantic token synonym of alias token
  • Relatedaccent color related of call to action
  • Relatedcolor token related of color palette
  • Relatedaccent color related of color palette
  • Relatedsemantic token related of dark mode
  • Relatedsemantic token related of design system
  • Relateddesign token related of design system
  • Relatedcolor token related of design token
  • Relatedsemantic token related of design tokens
  • Relateddesign token related of primitive token
  • Relatedsemantic token related of primitive token
  • Relatedcolor token related of primitive token
  • Relatedcolor token related of semantic color
  • Relateddesign token related of semantic token
  • Relatedcolor token related of semantic token
  • Relateddesign token related of single source of truth
  • Relatedsemantic token related of theming
  • Relateddesign token related of theming

Stop describing. Start naming.

Turn a plain-language description into a designer-ready brief in minutes.

Start a brief