Paleta da página
Com as cores ordenadas pelo número de vezes que são usadas: fundos, textos, bordas e botões. Cada uma em HEX, RGB e HSL.
Cor
Extraia a paleta de cores de qualquer site
O Smart Design Inspector extrai a paleta de cores de um site ordenada por uso, com conta-gotas para qualquer pixel e o contraste WCAG de cada par de texto e fundo.
Paleta, conta-gotas e contraste WCAG: grátis para sempre
Cores · yourclient.example
- #FFFFFFrgb 255 255 255Fundo214
- #0B0B0Brgb 11 11 11Texto188
- #2563EBrgb 37 99 235Botões46
- #E5E7EBrgb 229 231 235Bordas39
- #6B7280rgb 107 114 128Texto27
- #16A34Argb 22 163 74Destaque8
- Aa#0B0B0B / #FFFFFF19,68:1AAA
- Aa#FFFFFF / #2563EB5,17:1AA
- Aa#6B7280 / #FFFFFF4,83:1AA
- Aa#16A34A / #FFFFFF3,30:1Só texto grande
- Aa#9CA3AF / #FFFFFF2,54:1Não cumpre
01
O que obtém
3 ferramentasConta-gotas
Para capturar a cor de qualquer ponto, também de imagens.
Contraste WCAG
De cada texto com o seu fundo, com o nível que cumpre (AA ou AAA) e um aviso nos que não cumprem.
O conta-gotas mais usado do Chrome não é atualizado desde maio de 2024. Este vem junto com as fontes, o CSS e o SEO na mesma extensão.
02
Experimente nesta página
Sem instalarUm site de exemplo e o painel de cores, sem instalar nada. Veja a paleta em HEX, RGB e HSL. Passe o cursor sobre um texto, ou escolha-o na lista, e veja o contraste com o fundo e o nível WCAG que cumpre.
Escolha um elemento
Smart Design Inspector · Coresh1.hero-title
- Texto
- —
- Fundo
- —
- RGB
- —
- HSL
- —
- Contraste
- —
- Tamanho
- —
- AA
- —
- AAA
- —
Paleta da página
—
Site de exemplo · os valores são lidos desta página
03
O contraste importa
WCAG 2.2 · AAUm texto cinza-claro sobre branco pode ficar bem no seu computador e não se ler num smartphone ao sol. As diretrizes WCAG pedem um contraste mínimo de 4,5:1 para o texto normal (nível AA). A extensão assinala cada texto que não cumpre.
04
Leve a paleta para o seu projeto
Pro · acesso antecipadoCom a Pro, exporta as cores junto com a tipografia e os espaçamentos para Tailwind v4 @theme, variáveis CSS ou DESIGN_SPECS.md. Extrair o sistema de design
| Grátis0 €para sempre | Pro49 €pagamento único | |
|---|---|---|
| Paleta da página ordenada por uso, em HEX, RGB e HSL | ||
| Conta-gotas para qualquer ponto, também de imagens | ||
| Contraste WCAG de cada par de texto e fundo | ||
| Exportar a paleta como variáveis CSS ou tokens do Tailwind (com a tipografia e os espaçamentos) | — | Acesso antecipado grátis |
É grátis?
Sim. A paleta, o conta-gotas e o contraste WCAG são grátis para sempre.
Extrai as cores das imagens?
A paleta usa as cores do CSS da página. Para capturar a cor de uma imagem existe o conta-gotas.
Em que formatos copia as cores?
HEX, RGB e HSL. Com a Pro, também como variáveis CSS ou tokens do Tailwind.
De que nível de contraste preciso?
Para o texto normal, 4,5:1 (AA). Para o texto grande, 3:1. Para AAA, 7:1 e 4,5:1.
Em que navegadores e sistemas funciona?
No Chrome, Edge, Brave, Arc, Opera e Vivaldi, em Windows, Mac e Linux, desde a 1.0. Funciona da mesma forma em todos porque quem executa a extensão é o navegador, não o sistema. O código está preparado para chegar ao Firefox e ao Safari sem ser reescrito. Enquanto está em desenvolvimento, pode haver alterações.
07
Continue com
Funções relacionadasFontes
Família, pesos, origem, licença e escala tipográfica de toda a página.
Fontes de um site →Sistema de design
Cores, espaçamentos e tipografia para Tailwind v4 @theme, variáveis CSS ou DESIGN_SPECS.md.
Extrair o sistema de design →Comparar sites
Guarde a ficha de cada concorrente e compare-as numa tabela exportável.
Comparar sites →Lista de espera
Seja dos primeiros a experimentar
O Smart Design Inspector está em desenvolvimento. Deixe o seu email e avisamos no dia em que chegar à Chrome Web Store, com as 7 funções Pro grátis em acesso antecipado.
Um email no dia do lançamento e poucos mais · Cancele com um clique