# Colors (/foundations/colors)



<div className="hd-colors">
  ## Palettes [#palettes]

  Each palette has 26 solid steps (`s00`–`s125`) and a matching alpha scale (`a00`–`a125`). Start with the main steps, or reveal the full scale. Select a swatch to copy its token; hover or focus to see its value. Values follow the site's light or dark theme.

  <ColorPalettes />

  ## What each step is for [#what-each-step-is-for]

  <ColorStepGuide />

  The twelve main steps come from Radix Colors. Intermediate steps (`s05`, `s15`, and so on) use OKLCH interpolation. The endpoints extend the scale to its lightest and darkest values. A step's purpose is a starting point; check contrast in the final composition.

  ## Semantic colors [#semantic-colors]

  Use these roles in components instead of choosing a raw step. The tables show the neutral palette, including each published interaction state. Select a token or value to copy its token name. A dash means there is no separate token for that state.

  Panda color properties accept these names without the `colors.` prefix. Every palette provides the same roles: use `blue.fg.body` for a fixed palette, or `colorPalette.fg.body` within a reusable element.

  ### Backgrounds [#backgrounds]

  <ColorTokenTable kind="backgrounds" />

  `bg.min` through `bg.shaded` are alpha colors: they blend with whatever is underneath. Their `bgSolid.*` equivalents are opaque. Use an opaque surface for popovers and dialogs. `bg.solid` is the opaque accent fill in either family.

  ### Text [#text]

  <ColorTokenTable kind="text" />

  Use `fg.heading` for titles and `fg.body` for reading and labels. Reserve `fg.muted` and `fg.subtle` for secondary information after checking contrast. Pair `fg.onSolid` with the same palette's `bg.solid`; the table shows this pair together.

  ### Borders [#borders]

  <ColorTokenTable kind="borders" />

  Borders use alpha colors too. Pick enough contrast for the boundary's purpose; a decorative separator and an input outline do different jobs. Check focus indicators independently of these border roles.

  ## Status and brand [#status-and-brand]

  Status colors keep the same meaning across brands. Pair the color with an icon and useful text, as in these examples.

  <ColorStatus />

  [Brand colors](/brands) identify a product; they do not redefine success, warning, or error. Each status alias has a complete set of roles, such as `status.error.fg.body` and `status.error.bg.subtle`.

  ## How a scale is built [#how-a-scale-is-built]

  The main steps follow a shared progression: surface, interaction, border, accent, then text. Semantic tokens name the role and can choose different steps for particular palettes. For example, neutral `bg.solid` uses `s125`, while chromatic palettes use `s90`.

  <ColorStepGuide />

  ```tsx
  import { css } from "@hashintel/ds-helpers/css";

  export const accent = css({
    colorPalette: "blue",
    backgroundColor: "colorPalette.bg.solid",
    color: "colorPalette.fg.onSolid",
    _hover: { backgroundColor: "colorPalette.bg.solid.hover" },
  });
  ```

  ## Opacity [#opacity]

  Alpha steps reproduce the corresponding solid colors over the theme's reference ground. On another background, the result changes with the layers beneath it.

  * **Layered surfaces use alpha.** `bg.min` through `bg.shaded` and every border role blend with the surface below.
  * **Solid fills and text stay opaque.** Use `bgSolid.*` when a panel must cover content beneath it. Foreground roles use solid values.
  * **Keep content at full strength.** Change a background token instead of applying opacity to a whole component, which also fades text, icons, and focus indicators.
  * **Disabled is a state token.** Use the relevant `.disabled` value and preserve the component's accessible behavior.

  ## Color layering [#color-layering]

  Nest the same alpha level to add depth. Change the palette to see how the same roles behave across the color system. These examples use the live semantic tokens.

  <ColorLayering />

  ## Rules [#rules]

  <ColorRules />

  Check text, control boundaries, and focus indicators in both themes. A name such as `muted` or `subtle` is not a guarantee of sufficient contrast. See [Accessibility](/foundations/accessibility#contrast) for targets, and [DASH](/foundations/design-system#source-and-setup) for setup and the token playground.
</div>