PALUNEXA
Voltar ao atlas

NOTAS SOBRE A COR

Azul-marinho
#000080

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

Cor selecionada · sRGB#000080
A cor em números · RGB / HSL / OKLCH
HEX
#000080
RGB
rgb(0, 0, 128)
HSL
hsl(240, 100%, 25.1%)
OKLCH
oklch(0.27114983 0.18788816 264.052021)

O que distingue esta cor?

O azul-marinho mantém o canal azul como dominante, num nível inferior ao primário. Cria uma superfície escura com matiz azul, distinta do preto neutro.

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 na navegação, em capas de relatórios ou em faixas de título. Um pequeno destaque dourado pode estabelecer uma hierarquia sem encher a superfície de cores intensas.

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

O que verificar antes de usar

Um rótulo azul-escuro pode desaparecer sobre um fundo quase preto, mesmo que os nomes sejam diferentes. Verifique o par real e torne o foco bem visível.

Para ver e conseguir ler. / CSS
Rácio de contraste · #000080
Cor selecionadaRácio de contrasteTexto normal · AA
Preto1.31:1Não cumpre
Branco16.01:1Cumpre

CSS para utilizar

.color-surface {
  background: #000080;
  color: #ffffff;
}

Perguntas e respostas diretas

Quais são os valores de #000080?

#000080 equivale a rgb(0, 0, 128), hsl(240, 100%, 25.1%) e oklch(0.27114983 0.18788816 264.052021). Todos são calculados a partir da mesma cor sRGB opaca.

Que texto se lê melhor sobre #000080?

O preto oferece 1.31:1 e o branco 16.01: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 é #000080, #808000. Os acromáticos mantêm-se neutros.

O azul-marinho é preto com outro nome?

Não. O azul-marinho tem um valor no canal azul; o preto tem todos os canais a zero. Apesar de ambos parecerem escuros, o contraste com o mesmo texto é diferente.

Cores relacionadas

Azul#0000ffLavanda#e6e6faBranco#ffffff
Experimentar esta cor no estúdio

02 / COMBINAÇÕES

Cores que se completam.

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

#000080

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
#004080rgb(0, 64, 128)oklch(0.37630471 0.12254188 254.677367)
Rácio de contraste: 10.27:1
02BASE
#000080rgb(0, 0, 128)oklch(0.27114983 0.18788816 264.052021)
Rácio de contraste: 16.01:1
03COMBINAÇÃO
#400080rgb(64, 0, 128)oklch(0.32208397 0.17603963 295.816576)
Rácio de contraste: 13.73:1
HSL / Análoga
Valores e ferramentas avançadas

Cor selecionada / #000080

A cor em números

Uma cor, quatro formas de a representar.

HEX
#000080
RGB
rgb(0, 0, 128)
HSL
hsl(240, 100%, 25.1%)
OKLCH
oklch(0.27114983 0.18788816 264.052021)
Matiz
240.00°
Saturação
100.00%
Luminosidade
25.10%
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.

#004080oklch(0.37630471 0.12254188 254.677367)#000080oklch(0.27114983 0.18788816 264.052021)#400080oklch(0.32208397 0.17603963 295.816576)
CSS da paleta
:root {
  --palette-1: #004080;
  --palette-2: #000080;
  --palette-3: #400080;
}
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 / #000080 · 16.01: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.

#400080 / #000080 · 1.17:1 · Texto normal · AA

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

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

#000080 / #ffffff
Rácio de contraste16.01: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