PALUNEXA
Voltar ao atlas

NOTAS SOBRE A COR

Azul
#0000ff

Aceita nomes de cores, HEX, RGB, HSL e OKLCH. Não precisa de uma conta.

Cor selecionada · sRGB#0000ff
A cor em números · RGB / HSL / OKLCH
HEX
#0000ff
RGB
rgb(0, 0, 255)
HSL
hsl(240, 100%, 50%)
OKLCH
oklch(0.45201372 0.31321437 264.052021)

O que distingue esta cor?

É o primário azul de sRGB, não um azul-céu claro. Só o canal azul está no máximo: a cor é intensa, mas a luminância relativa é muito inferior à do primário verde.

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.

Análoga

Três matizes vizinhos a −30°, 0° e +30° em relação à cor base.

Triádica

Três matizes a 0°, 120° e 240° formam um triângulo com intervalos iguais no círculo HSL.

Um exemplo prático de design

Experimente-o em ligações ou pequenos elementos gráficos sobre uma página clara. Sublinhe as ligações ou distinga-as de outra forma para não depender apenas da cor.

Os conselhos de design dependem do contexto e distinguem-se dos cálculos.

O que verificar antes de usar

Um azul vivo não tem necessariamente uma luminância elevada. Compare o texto branco e preto abaixo em vez de escolher pela intensidade aparente.

Para ver e conseguir ler. / CSS
Rácio de contraste · #0000ff
Cor selecionadaRácio de contrasteTexto normal · AA
Preto2.44:1Não cumpre
Branco8.59:1Cumpre

CSS para utilizar

.color-surface {
  background: #0000ff;
  color: #ffffff;
}

Perguntas e respostas diretas

Quais são os valores de #0000ff?

#0000ff equivale a rgb(0, 0, 255), hsl(240, 100%, 50%) e oklch(0.45201372 0.31321437 264.052021). Todos são calculados a partir da mesma cor sRGB opaca.

Que texto se lê melhor sobre #0000ff?

O preto oferece 2.44:1 e o branco 8.59: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 é #0000ff, #ffff00. Os acromáticos mantêm-se neutros.

Porque parece o azul mais escuro do que o lima com a mesma luminosidade HSL?

A luminosidade HSL resulta dos extremos dos canais RGB, não do brilho percebido. WCAG atribui pesos diferentes aos canais; OKLCH também permite comparar a luminosidade percetual.

Cores relacionadas

Azul-marinho#000080Lavanda#e6e6faVerde-azulado#008080
Experimentar esta cor no estúdio

02 / COMBINAÇÕES

Cores que se completam.

Explore outras perspetivas com as regras do círculo cromático.

#0000ff

A cor base é fixa. Nem a cor base nem as cores bloqueadas mudam ao regenerar ou ajustar.

Exportar CSS da paleta

Três matizes vizinhos a −30°, 0° e +30° em relação à cor base.

01COMBINAÇÃO
#0080ffrgb(0, 128, 255)oklch(0.61516536 0.21081891 256.098958)
Rácio de contraste: 5.53:1
02BASE
#0000ffrgb(0, 0, 255)oklch(0.45201372 0.31321437 264.052021)
Rácio de contraste: 8.59:1
03COMBINAÇÃO
#8000ffrgb(128, 0, 255)oklch(0.53045702 0.29311856 293.937641)
Rácio de contraste: 6.25:1
HSL / Análoga
Valores e ferramentas avançadas

Cor selecionada / #0000FF

A cor em números

Uma cor, quatro formas de a representar.

HEX
#0000ff
RGB
rgb(0, 0, 255)
HSL
hsl(240, 100%, 50%)
OKLCH
oklch(0.45201372 0.31321437 264.052021)
Matiz
240.00°
Saturação
100.00%
Luminosidade
50.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.

#0080ffoklch(0.61516536 0.21081891 256.098958)#0000ffoklch(0.45201372 0.31321437 264.052021)#8000ffoklch(0.53045702 0.29311856 293.937641)
CSS da paleta
:root {
  --palette-1: #0080ff;
  --palette-2: #0000ff;
  --palette-3: #8000ff;
}
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 / #0000ff · 8.59: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.

#8000ff / #0000ff · 1.38:1 · Texto normal · AA

Cor de texto alternativa: #ffffff (8.59:1).

Contraste do texto apresentado: 8.59: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.

#0000ff / #ffffff
Rácio de contraste8.59: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.

Voltar ao atlas