---
title: "Color classes"
description: "The token color primitives as Tailwind colors, shown with `bg-*`."
requested_language: cs
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/cs/reference/utilities/colors
version: unreleased (main)
docs_index: https://docs.systhema.app/cs/llms.txt
---
> This page isn't translated yet. Showing English.


<!-- generated by pnpm docs:generate; do not edit -->

Every primitive is a Tailwind color, so every color utility takes it: `text-theme-600`, `border-base-200`, `fill-theme-500`. The table shows the `bg-*` form; values per shade are on [Color tokens](https://docs.systhema.app/cs/reference/tokens/colors.md).

| Class          | Styles                                        |
| -------------- | --------------------------------------------- |
| `bg-base-0`    | `background-color: var(--color-white);`       |
| `bg-base-50`   | `background-color: var(--color-neutral-50);`  |
| `bg-base-100`  | `background-color: var(--color-neutral-100);` |
| `bg-base-200`  | `background-color: var(--color-neutral-200);` |
| `bg-base-300`  | `background-color: var(--color-neutral-300);` |
| `bg-base-400`  | `background-color: var(--color-neutral-400);` |
| `bg-base-500`  | `background-color: var(--color-neutral-500);` |
| `bg-base-600`  | `background-color: var(--color-neutral-600);` |
| `bg-base-700`  | `background-color: var(--color-neutral-700);` |
| `bg-base-800`  | `background-color: var(--color-neutral-800);` |
| `bg-base-900`  | `background-color: var(--color-neutral-900);` |
| `bg-base-950`  | `background-color: var(--color-neutral-950);` |
| `bg-base-1000` | `background-color: var(--color-black);`       |
| `bg-theme-50`  | `background-color: var(--color-blue-50);`     |
| `bg-theme-100` | `background-color: var(--color-blue-100);`    |
| `bg-theme-200` | `background-color: var(--color-blue-200);`    |
| `bg-theme-300` | `background-color: var(--color-blue-300);`    |
| `bg-theme-400` | `background-color: var(--color-blue-400);`    |
| `bg-theme-500` | `background-color: var(--color-blue-500);`    |
| `bg-theme-600` | `background-color: var(--color-blue-600);`    |
| `bg-theme-700` | `background-color: var(--color-blue-700);`    |
| `bg-theme-800` | `background-color: var(--color-blue-800);`    |
| `bg-theme-900` | `background-color: var(--color-blue-900);`    |
| `bg-theme-950` | `background-color: var(--color-blue-950);`    |