Colore

Color mostra i valori hex, RGB e RGBA come campioni di colore cliccabili per copiarli. Ha due varianti di layout: una griglia compatta e una tabella raggruppata. Ogni campione può avere un valore separato per tema.

Usa Color quando:

• Documenti di design system con colori di marca
• Mostri i colori del tema che cambiano con il tema
• Visualizzi scale di colori (primary-100 fino a primary-900)
• Condividi linee guida del brand con valori hex/RGB

Utilizzo

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

Variante compatta

Il layout predefinito mostra i colori in una griglia reattiva:

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

Variante tabella

Raggruppa i colori in righe etichettate:

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

Convenzioni per i nomi dei colori

Colori adattivi al tema

Passa un oggetto con le proprietà light e dark per impostare un colore per tema:

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

Formati dei colori

Il componente accetta valori hex, RGB e RGBA:

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

Proprietà

Color

ColorRow

ColorItem

Prossimi passi