Farbe

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

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

Kompakte Variante

Das Standardlayout zeigt Farben in einem responsiven Raster an:

<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="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

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="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>

Props

Color

ColorRow

ColorItem

Wie geht es weiter?