Como estão organizadas as cores?

25 famílias de tom e 20 gradações (25–900). Clique em qualquer amostra para abrir a sua página de detalhe com HEX, RGB, HSL, HSB, OKLCH, CMYK, WCAG, harmonias e escala de tons.

Qual é a diferença entre matiz, saturação e luminosidade?

O matiz é a cor base. A saturação mede a vivacidade (0%=cinza, 100%=saturado). A luminosidade: 0%=preto, 50%=cor pura, 100%=branco.

O que significam os números de gradação (25–900)?

50 é o mais claro, 500 a versão mais "pura", 950 muito escuro. Esta escala facilita sistemas de design consistentes.

Como converto HEX em RGB ou HSL?

HEX para RGB: divida o código em três pares e converta de hex para decimal. Use o nosso conversor HEX→RGB.

Como uso estas cores em CSS?

Directamente: color: #3B82F6; background-color: #ECFDF5. Também em HSL ou variáveis CSS: --color-primary: #3B82F6.

Quantas cores contém o Explorador HEX?

500 cores: 25 famílias × 20 gradações (25–900). Clique em qualquer cor para explorar todos os seus formatos.

Explorador de Cores HEX

Navegue 500 cores por família de tom e gradação

500 cores25 famílias20 gradações cada

Clique numa cor para ver HEX, RGB e HSL — depois use-a noutras ferramentas

Sobre os códigos de cor HEX

Os códigos de cor HEX são uma notação hexadecimal para cores RGB, amplamente utilizada em design web e CSS. Cada código é uma cadeia de 6 caracteres (ex. #FF6B6B) que representa os componentes vermelho, verde e azul numa escala 0–255. As cores neste explorador estão organizadas por família de tom e gradação (50–900), seguindo a convenção do Tailwind CSS.

FAQ

Um código HEX é um código de 6 dígitos para representar cores em design web e CSS. Começa com # seguido de três pares de dígitos hex para os valores vermelho, verde e azul (00–FF, equivalente a 0–255).

As cores estão organizadas em 12 famílias de tom e 10 gradações (50–900). Gradações mais baixas são mais claras, as mais altas são mais escuras. Esta convenção é usada pelo Tailwind CSS e Material Design.

O matiz (hue) é a cor base na roda cromática. A saturação mede a vivacidade (0%=cinza, 100%=totalmente saturado). A luminosidade mede a claridade (0%=preto, 50%=cor pura, 100%=branco).

Os números indicam a luminosidade: 50 é o mais claro, 500 é a versão mais "pura" de uma cor, 900 é muito escuro. Esta escala facilita a construção de sistemas de design consistentes.

HEX para RGB: divida o código de 6 dígitos em três pares e converta cada um de hex para decimal. Para HSL, são necessários cálculos adicionais. Use o nosso conversor HEX→RGB para conversões instantâneas.

Directamente em propriedades CSS: color: #3B82F6; background-color: #ECFDF5. Pode também usar notação HSL ou variáveis CSS: --color-primary: #3B82F6.

O explorador contém 120 cores: 12 famílias de tom × 10 gradações (50–900), geradas com valores HSL cuidadosamente ajustados.

Sobre os códigos de cor HEX

FAQ

Explore a nossa rede