Use-o em documentos, à volta de fotografias de produtos ou entre cartões de um painel. O espaço e os títulos organizam melhor a informação do que várias camadas de brancos quase iguais.
Os conselhos de design dependem do contexto e distinguem-se dos cálculos.
O que verificar antes de usar
Um cartão branco sobre fundo branco não tem um limite cromático. Se esse limite for necessário para reconhecer um controlo, acrescente espaço ou um contorno bem visível.
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
#ffffffrgb(255, 255, 255)oklch(0.99999999 0 0)
Rácio de contraste: 21.00:1
HSL / Análoga
Valores e ferramentas avançadas
Cor selecionada / #FFFFFF
A cor em números
Uma cor, quatro formas de a representar.
HEX
#ffffff
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
OKLCH
oklch(0.99999999 0 0)
Matiz
Não definido (acromático)
Saturação
0.00%
Luminosidade
100.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.
#ffffffoklch(0.99999999 0 0)
CSS da paleta
:root {
--palette-1: #ffffff;
}
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 #000000 / #ffffff · 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.
#ffffff / #ffffff · 1.00:1 · Texto normal · AA
Cor de texto alternativa: #000000 (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.
Cor de texto sugerida: #000000 · 21.00:1
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.
#ffffff / #ffffff
Rácio de contraste1.00:1
Texto normal · AANão cumpre
Texto grande · AANão cumpre
Texto normal · AAANão cumpre
Texto grande · AAANão cumpre
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.