---
title: Cor
description: O componente Color exibe paletas de cores para documentar sistemas de design, diretrizes de marca ou especificações de cores.
---

> **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 exibe valores hexadecimais, RGB e RGBA como amostras que podem ser clicadas para copiar. Ele oferece duas variantes de layout: uma grade compacta e uma tabela agrupada, com suporte integrado aos modos claro e escuro.

Use Color para:
- **Documentar sistemas de design** com cores da marca
- **Exibir cores de tema** para os modos claro e escuro
- **Exibir escalas de cores** (primary-100 até primary-900)
- **Compartilhar diretrizes de marca** com valores hexadecimais/RGB

## Uso

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

## Variante compacta

O layout padrão exibe as cores em uma grade responsiva:

<Color>
  <ColorItem name="Primária" value="#3b82f6" />
  <ColorItem name="Sucesso" value="#22c55e" />
  <ColorItem name="Aviso" value="#f59e0b" />
  <ColorItem name="Erro" 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>
```

## Variante de tabela

Agrupe as cores em linhas identificadas para organizar as paletas:

<Color variant="table">
  <ColorRow title="Cores da marca">
    <ColorItem name="Primária" value="#3b82f6" />
    <ColorItem name="Secundária" value="#6366f1" />
  </ColorRow>
  <ColorRow title="Cores de feedback">
    <ColorItem name="Sucesso" value="#22c55e" />
    <ColorItem name="Erro" 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>
```

## Convenções de nomenclatura de cores

| Padrão | Exemplo | Usar para |
|---------|---------|---------|
| Semântico | `success`, `error`, `warning` | Cores de feedback |
| Escala numérica | `primary-500`, `gray-100` | Paletas de cores |
| Descritivo | `brand-blue`, `accent-gold` | Cores da marca |

## Cores adaptadas ao tema

Defina cores diferentes para os modos claro e escuro passando um objeto com as propriedades `light` e `dark`:

<Color>
  <ColorItem name="Plano de fundo" value={{ light: "#ffffff", dark: "#0a0a0a" }} />
  <ColorItem name="Primeiro plano" value={{ light: "#171717", dark: "#ededed" }} />
  <ColorItem name="Borda" 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>
```

## Formatos de cor

O componente aceita formatos de cores CSS padrão:

<Color>
  <ColorItem name="Hexadecimal" 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>
```

## Propriedades

### Color

<ParamField name="variant" type="string" default="compact">
  Estilo do layout: `compact` (grade) ou `table` (linhas agrupadas).
</ParamField>

<ParamField name="children" type="node">
  Elementos `ColorItem` ou `ColorRow`.
</ParamField>

### ColorRow

<ParamField name="title" type="string">
  Rótulo exibido acima da linha.
</ParamField>

<ParamField name="children" type="node">
  Elementos `ColorItem`.
</ParamField>

### ColorItem

<ParamField name="name" type="string">
  Nome de exibição da cor.
</ParamField>

<ParamField name="value" type="string | object">
  Valor da cor como string CSS ou `{ light: string, dark: string }` para cores adaptadas ao tema.
</ParamField>

## O que vem a seguir?

<Columns cols={2}>
  <Card title="Visão geral dos componentes" icon="puzzle-piece" href="/pt/components/overview">
    Consulte todos os componentes disponíveis
  </Card>
  <Card title="Fundamentos de MDX" icon="file-code" href="/pt/content/mdx-basics">
    Aprenda a usar componentes em MDX
  </Card>
</Columns>