01COMBINAÇÃO
#a2cacbrgb(162, 202, 203)oklch(0.81060578 0.04234259 198.238002)Rácio de contraste: 11.85:1
NOTAS SOBRE A COR
Conheça esta cor
#a2b6cb
Cor selecionada · sRGB#a2b6cb
A cor em números · RGB / HSL / OKLCH
- HEX
#a2b6cb- RGB
rgb(162, 182, 203)- HSL
hsl(210.73, 28.28%, 71.57%)- OKLCH
oklch(0.76783723 0.03740288 249.60645)
Experimentar esta cor no estúdio
02 / COMBINAÇÕES
Cores que se completam.
Explore outras perspetivas com as regras do círculo cromático.
Três matizes vizinhos a −30°, 0° e +30° em relação à cor base.
02BASE
#a2b6cbrgb(162, 182, 203)oklch(0.76783723 0.03740288 249.60645)Rácio de contraste: 10.09:1
03COMBINAÇÃO
#a3a2cbrgb(163, 162, 203)oklch(0.72725566 0.05905884 285.949467)Rácio de contraste: 8.59:1
HSL / Análoga
Valores e ferramentas avançadas
Cor selecionada / #A2B6CB
A cor em números
Uma cor, quatro formas de a representar.
HEX
#a2b6cbRGB
rgb(162, 182, 203)HSL
hsl(210.73, 28.28%, 71.57%)OKLCH
oklch(0.76783723 0.03740288 249.60645)- Matiz
- 210.73°
- Saturação
- 28.28%
- Luminosidade
- 71.57%
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.
#a2cacboklch(0.81060578 0.04234259 198.238002)#a2b6cboklch(0.76783723 0.03740288 249.60645)#a3a2cboklch(0.72725566 0.05905884 285.949467)CSS da paleta
:root {
--palette-1: #a2cacb;
--palette-2: #a2b6cb;
--palette-3: #a3a2cb;
}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 / #a2b6cb · 10.09:1
your-next-idea.designFORM & 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çãoO par de texto e fundo não atinge AA para texto normal.
#a3a2cb / #a2b6cb · 1.17:1 · Texto normal · AA
Cor de texto alternativa: #000000 (10.09:1).
Contraste do texto apresentado: 10.09: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.
#a2b6cb / #ffffffRácio de contraste2.08: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.
Voltar ao atlas