O preto tem os três canais sRGB a zero e não possui matiz definido. É a referência mais escura no cálculo do contraste, não uma versão escura de uma família cromática.
Este HEX também tem um nome CSS.
Cores que se completam.
Complementar
Duas cores separadas por 180° no círculo HSL. Os matizes opostos criam um contraste marcado.
Pode servir para títulos curtos, marcas monocromáticas ou diapositivos de alto contraste. Numa interface escura, separe os cartões com espaço e contornos verificados; duas superfícies pretas não se distinguem por si só.
Os conselhos de design dependem do contexto e distinguem-se dos cálculos.
O que verificar antes de usar
Uma área preta extensa pode dominar a composição. Nos fundos de leitura ou junto de fotografias, compare-a com um neutro mais suave e verifique o contraste real.
#000000 equivale a rgb(0, 0, 0), hsl(0, 0%, 0%) e oklch(0 0 0). Todos são calculados a partir da mesma cor sRGB opaca.
Que texto se lê melhor sobre #000000?
O preto oferece 1.00:1 e o branco 21.00:1. Entre ambos, Branco tem mais contraste. AA para texto normal exige pelo menos 4,5:1.
Como se calcula a paleta complementar?
O motor roda o matiz HSL 180° e mantém a saturação e a luminosidade. Para esta cor o resultado é #000000. Os acromáticos mantêm-se neutros.
O complemento do preto é o branco?
Rodar o matiz não transforma preto em branco. Por ser acromático, o preto continua preto na rotação complementar HSL. A ferramenta monocromática varia a luminosidade para criar cinzentos.
Três matizes vizinhos a −30°, 0° e +30° em relação à cor base.
Esta cor é acromática: rodar o matiz não a altera. Experimente a harmonia monocromática para variar a luminosidade.
01BASE
#000000rgb(0, 0, 0)oklch(0 0 0)
Rácio de contraste: 21.00:1
HSL / Análoga
Valores e ferramentas avançadas
Cor selecionada / #000000
A cor em números
Uma cor, quatro formas de a representar.
HEX
#000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
OKLCH
oklch(0 0 0)
Matiz
Não definido (acromático)
Saturação
0.00%
Luminosidade
0.00%
Onde esta harmonia pode funcionar
As sugestões de design são subjetivas. Os ângulos de matiz e os rácios de contraste são calculados.
Utilizações sugeridas
Páginas editoriais, marcas de estilo de vida e interfaces tranquilas.
Vantagem
Os matizes vizinhos dão continuidade visual.
Cuidados a ter
Os limites podem ficar pouco claros: use rótulos e espaço neutro.
Exemplo de aplicação
Reserve o matiz central para o bloco principal e os vizinhos para cartões decorativos.
OKLCH · Ajustes percetuais
Ajuste a luminosidade e o croma das cores de combinação livres em OKLCH. O intervalo dos matizes HSL pode mudar. Compare o resultado antes de aplicar.
Paleta atual
Pré-visualização do ajuste
Cores cujo croma foi reduzido para sRGB: 0
A cor base é fixa. Nem a cor base nem as cores bloqueadas mudam ao regenerar ou ajustar.
Comparar com a harmonia HSL original
Estas são as cores teóricas sem edição. Compare os valores HEX e OKLCH com a paleta acima.
#000000oklch(0 0 0)
CSS da paleta
:root {
--palette-1: #000000;
}
Pré-visualização do design
03 / EM CONTEXTO
Veja a cor em contexto.
As suas cores aplicadas com CSS real.
Definir funções da paleta
Combinação de texto aplicada #ffffff / #000000 · 21.00:1
your-next-idea.design
FORM & FIELDIdeias livres. Cores escolhidas com cuidado.
UM ESTÚDIO PARA AS IDEIAS DO DIA A DIA
Espaço para um novo olhar.
As novas ideias começam muitas vezes com um pouco de curiosidade.
Descobrir a coleção
O par de texto e fundo não atinge AA para texto normal.
#000000 / #000000 · 1.00:1 · Texto normal · AA
Cor de texto alternativa: #ffffff (21.00:1).
Contraste do texto apresentado: 21.00:1 · As alternativas de texto acessível só afetam a pré-visualização. A sua paleta não muda.
O par verificado é usado nos botões, cartões, indicadores e faixas de diapositivos com cor. O restante texto usa #262a23 (13.18:1) ou #55594f (6.47:1) sobre #f6f3ec. Os gráficos têm números. Não se trata de uma auditoria completa de acessibilidade.
Verificador de contraste do texto
Acessibilidade / WCAG AA
Para ver e conseguir ler.
Compare a cor selecionada com uma cor de texto ou de fundo.
AA exige 4,5:1 para texto normal e 3:1 para texto grande. Este teste não determina a conformidade total com WCAG.
Aa
Aproveite a cor sem perder a legibilidade.
#000000 / #ffffff
Rácio de contraste21.00:1
Texto normal · AACumpre
Texto grande · AACumpre
Texto normal · AAACumpre
Texto grande · AAACumpre
Um pouco de teoria para explorar.
O PALUNEXA roda os matizes no círculo HSL e mantém a saturação e a luminosidade. As paletas monocromáticas variam a luminosidade. Uma harmonia calculada é um ponto de partida, não uma garantia de agradar a todas as pessoas.