---
title: "Colors"
description: "Every primitive and semantic color token in Sanity ID."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/colors"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/colors.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# Colors

## Primitive colors

Fixed values that do not change between themes.

| Token | CSS variable | Value |
| --- | --- | --- |
| `black` | `var(--color-black)` | #0b0b0b |
| `white` | `var(--color-white)` | #fff |
| `brand` | `var(--color-brand)` | #ff5500 |
| `gray-100` | `var(--color-gray-100)` | #ededed |
| `gray-200` | `var(--color-gray-200)` | #d6d6d6 |
| `gray-300` | `var(--color-gray-300)` | #b9b9b9 |
| `gray-500` | `var(--color-gray-500)` | #797979 |
| `gray-700` | `var(--color-gray-700)` | #4a4a4a |
| `gray-800` | `var(--color-gray-800)` | #353535 |
| `gray-900` | `var(--color-gray-900)` | #212121 |
| `blue-100` | `var(--color-blue-100)` | #afe3ff |
| `blue-300` | `var(--color-blue-300)` | #55beff |
| `blue-500` | `var(--color-blue-500)` | #027fff |
| `blue-700` | `var(--color-blue-700)` | #0053ef |
| `green-100` | `var(--color-green-100)` | #96ff6f |
| `green-300` | `var(--color-green-300)` | #45ff00 |
| `green-500` | `var(--color-green-500)` | #3fea00 |
| `green-700` | `var(--color-green-700)` | #19d600 |
| `magenta-100` | `var(--color-magenta-100)` | #fcb9ff |
| `magenta-300` | `var(--color-magenta-300)` | #fa84ff |
| `magenta-500` | `var(--color-magenta-500)` | #f84eff |
| `magenta-700` | `var(--color-magenta-700)` | #f500ff |
| `yellow-100` | `var(--color-yellow-100)` | #fcffd6 |
| `yellow-300` | `var(--color-yellow-300)` | #ffff9f |
| `yellow-500` | `var(--color-yellow-500)` | #ffff00 |
| `yellow-700` | `var(--color-yellow-700)` | #fff500 |

## Semantic colors

Theme-aware. Prefer these over primitives so a component works in both themes.

| Token | CSS variable | Light | Dark |
| --- | --- | --- | --- |
| `fg-base` | `var(--color-fg-base)` | #0b0b0b | #fff |
| `fg-dim` | `var(--color-fg-dim)` | #4a4a4a | #b9b9b9 |
| `fg-faint` | `var(--color-fg-faint)` | #797979 | #797979 |
| `fg-inverse-base` | `var(--color-fg-inverse-base)` | #fff | #0b0b0b |
| `fg-inverse-dim` | `var(--color-fg-inverse-dim)` | #b9b9b9 | #4a4a4a |
| `fg-inverse-faint` | `var(--color-fg-inverse-faint)` | #797979 | #797979 |
| `fg-accent-blue` | `var(--color-fg-accent-blue)` | #027fff | #027fff |
| `fg-accent-green` | `var(--color-fg-accent-green)` | #3fea00 | #3fea00 |
| `fg-accent-magenta` | `var(--color-fg-accent-magenta)` | #f84eff | #f84eff |
| `fg-accent-yellow` | `var(--color-fg-accent-yellow)` | #ffff00 | #ffff00 |
| `fg-error` | `var(--color-fg-error)` | #dd0000 | #ff2222 |
| `bg-base` | `var(--color-bg-base)` | #fff | #0b0b0b |
| `bg-dim` | `var(--color-bg-dim)` | #ededed | #212121 |
| `bg-inverse-base` | `var(--color-bg-inverse-base)` | #0b0b0b | #fff |
| `bg-inverse-dim` | `var(--color-bg-inverse-dim)` | #212121 | #ededed |
| `bg-accent-blue-base` | `var(--color-bg-accent-blue-base)` | #027fff | #027fff |
| `bg-accent-blue-dim` | `var(--color-bg-accent-blue-dim)` | #afe3ff | #0053ef |
| `bg-accent-green-base` | `var(--color-bg-accent-green-base)` | #3fea00 | #3fea00 |
| `bg-accent-green-dim` | `var(--color-bg-accent-green-dim)` | #96ff6f | #19d600 |
| `bg-accent-magenta-base` | `var(--color-bg-accent-magenta-base)` | #f84eff | #f84eff |
| `bg-accent-magenta-dim` | `var(--color-bg-accent-magenta-dim)` | #fcb9ff | #f500ff |
| `bg-accent-yellow-base` | `var(--color-bg-accent-yellow-base)` | #ffff00 | #ffff00 |
| `bg-accent-yellow-dim` | `var(--color-bg-accent-yellow-dim)` | #fcffd6 | #fff500 |
| `border-base` | `var(--color-border-base)` | #0b0b0b | #fff |
| `border-dim` | `var(--color-border-dim)` | #d6d6d6 | #353535 |
| `border-faint` | `var(--color-border-faint)` | #ededed | #212121 |
| `border-inverse-base` | `var(--color-border-inverse-base)` | #fff | #0b0b0b |
| `border-accent-blue` | `var(--color-border-accent-blue)` | #0053ef | #027fff |
| `border-accent-green` | `var(--color-border-accent-green)` | #19d600 | #3fea00 |
| `border-accent-magenta` | `var(--color-border-accent-magenta)` | #f500ff | #f84eff |
| `border-accent-yellow` | `var(--color-border-accent-yellow)` | #fff500 | #ffff00 |