---
title: Farbe
description: Die Color-Komponente zeigt Farbpaletten zur Dokumentation von Designsystemen, Markenrichtlinien und Farbspezifikationen.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Color zeigt Hex-, RGB- und RGBA-Werte als anklickbare Farbfelder zum Kopieren an. Sie bietet zwei Layoutvarianten: ein kompaktes Raster und eine gruppierte Tabelle, jeweils mit integrierter Unterstützung für den hellen und dunklen Modus.

Verwenden Sie Color für:
- **Designsysteme dokumentieren** mit Markenfarben
- **Theme-Farben anzeigen** für den hellen und dunklen Modus
- **Farbskalen darstellen** (primary-100 bis primary-900)
- **Markenrichtlinien teilen** mit Hex-/RGB-Werten

## Verwendung

```mdx
<Color>
  <ColorItem name="Primary" value="#635BFF" />
</Color>
```

## Kompakte Variante

Das Standardlayout zeigt Farben in einem responsiven Raster an:

<Color>
  <ColorItem name="Primär" value="#3b82f6" />
  <ColorItem name="Erfolg" value="#22c55e" />
  <ColorItem name="Warnung" value="#f59e0b" />
  <ColorItem name="Fehler" value="#ef4444" />
</Color>

```mdx
<Color>
  <ColorItem name="Primary" value="#3b82f6" />
  <ColorItem name="Success" value="#22c55e" />
  <ColorItem name="Warning" value="#f59e0b" />
  <ColorItem name="Error" value="#ef4444" />
</Color>
```

## Tabellenvariante

Gruppieren Sie Farben in beschrifteten Zeilen, um organisierte Paletten zu erstellen:

<Color variant="table">
  <ColorRow title="Markenfarben">
    <ColorItem name="Primär" value="#3b82f6" />
    <ColorItem name="Sekundär" value="#6366f1" />
  </ColorRow>
  <ColorRow title="Feedbackfarben">
    <ColorItem name="Erfolg" value="#22c55e" />
    <ColorItem name="Fehler" value="#ef4444" />
  </ColorRow>
</Color>

```mdx
<Color variant="table">
  <ColorRow title="Brand Colors">
    <ColorItem name="Primary" value="#3b82f6" />
    <ColorItem name="Secondary" value="#6366f1" />
  </ColorRow>
  <ColorRow title="Feedback Colors">
    <ColorItem name="Success" value="#22c55e" />
    <ColorItem name="Error" value="#ef4444" />
  </ColorRow>
</Color>
```

## Konventionen für Farbnamen

| Muster | Beispiel | Verwendung für |
|---------|---------|---------|
| Semantisch | `success`, `error`, `warning` | Feedbackfarben |
| Numerische Skala | `primary-500`, `gray-100` | Farbpaletten |
| Beschreibend | `brand-blue`, `accent-gold` | Markenfarben |

## Theme-abhängige Farben

Definieren Sie unterschiedliche Farben für den hellen und dunklen Modus, indem Sie ein Objekt mit den Eigenschaften `light` und `dark` übergeben:

<Color>
  <ColorItem name="Hintergrund" value={{ light: "#ffffff", dark: "#0a0a0a" }} />
  <ColorItem name="Vordergrund" value={{ light: "#171717", dark: "#ededed" }} />
  <ColorItem name="Rahmen" value={{ light: "#e5e5e5", dark: "#404040" }} />
</Color>

```mdx
<Color>
  <ColorItem name="Background" value={{ light: "#ffffff", dark: "#0a0a0a" }} />
  <ColorItem name="Foreground" value={{ light: "#171717", dark: "#ededed" }} />
  <ColorItem name="Border" value={{ light: "#e5e5e5", dark: "#404040" }} />
</Color>
```

## Farbformate

Die Komponente unterstützt standardmäßige CSS-Farbformate:

<Color>
  <ColorItem name="Hex" value="#3b82f6" />
  <ColorItem name="RGB" value="rgb(59, 130, 246)" />
  <ColorItem name="RGBA" value="rgba(59, 130, 246, 0.8)" />
</Color>

```mdx
<Color>
  <ColorItem name="Hex" value="#3b82f6" />
  <ColorItem name="RGB" value="rgb(59, 130, 246)" />
  <ColorItem name="RGBA" value="rgba(59, 130, 246, 0.8)" />
</Color>
```

## Props

### Color

<ParamField name="variant" type="string" default="compact">
  Layoutstil: `compact` (Raster) oder `table` (gruppierte Zeilen).
</ParamField>

<ParamField name="children" type="node">
  Elemente vom Typ `ColorItem` oder `ColorRow`.
</ParamField>

### ColorRow

<ParamField name="title" type="string">
  Über der Zeile angezeigte Beschriftung.
</ParamField>

<ParamField name="children" type="node">
  Elemente vom Typ `ColorItem`.
</ParamField>

### ColorItem

<ParamField name="name" type="string">
  Anzeigename der Farbe.
</ParamField>

<ParamField name="value" type="string | object">
  Farbwert als CSS-Zeichenfolge oder `{ light: string, dark: string }` für theme-abhängige Farben.
</ParamField>

## Wie geht es weiter?

<Columns cols={2}>
  <Card title="Übersicht der Komponenten" icon="puzzle-piece" href="/de/components/overview">
    Alle verfügbaren Komponenten durchsuchen
  </Card>
  <Card title="MDX-Grundlagen" icon="file-code" href="/de/content/mdx-basics">
    Erfahren Sie, wie Sie Komponenten in MDX verwenden
  </Card>
</Columns>