PALUNEXA
Voltar ao atlas

NOTAS SOBRE A COR

Verde-azulado
#008080

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

Cor selecionada · sRGB#008080
A cor em números · RGB / HSL / OKLCH
HEX
#008080
RGB
rgb(0, 128, 128)
HSL
hsl(180, 100%, 25.1%)
OKLCH
oklch(0.54312257 0.09271004 194.768948)

O que distingue esta cor?

O verde-azulado combina verde e azul em partes iguais, sem vermelho. É mais escuro do que o ciano com ambos os canais no máximo, pelo que oferece outras condições como destaque de interface.

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 numa aplicação de leitura, numa opção de navegação selecionada ou numa série de gráfico identificada. Um apontamento terracota pode ajudar a distinguir duas funções.

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

O que verificar antes de usar

Por vezes é associado à saúde ou à calma, mas essa associação não é uma propriedade técnica nem garante confiança ou acessibilidade.

Para ver e conseguir ler. / CSS
Rácio de contraste · #008080
Cor selecionadaRácio de contrasteTexto normal · AA
Preto4.40:1Não cumpre
Branco4.77:1Cumpre

CSS para utilizar

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

Perguntas e respostas diretas

Quais são os valores de #008080?

#008080 equivale a rgb(0, 128, 128), hsl(180, 100%, 25.1%) e oklch(0.54312257 0.09271004 194.768948). Todos são calculados a partir da mesma cor sRGB opaca.

Que texto se lê melhor sobre #008080?

O preto oferece 4.40:1 e o branco 4.77: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 é #008080, #800000. Os acromáticos mantêm-se neutros.

Teal e cyan podem ser trocados em CSS?

Não. Teal é #008080 e cyan é #00ffff. Os níveis dos canais, a luminância e o contraste do texto são diferentes; mudar o nome muda o design.

Cores relacionadas

Sálvia#a5b89cAzul#0000ffBranco#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.

#008080

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
#008040rgb(0, 128, 64)oklch(0.52544764 0.13776333 152.154974)
Rácio de contraste: 5.05:1
02BASE
#008080rgb(0, 128, 128)oklch(0.54312257 0.09271004 194.768948)
Rácio de contraste: 4.77:1
03COMBINAÇÃO
#004080rgb(0, 64, 128)oklch(0.37630471 0.12254188 254.677367)
Rácio de contraste: 10.27:1
HSL / Análoga
Valores e ferramentas avançadas

Cor selecionada / #008080

A cor em números

Uma cor, quatro formas de a representar.

HEX
#008080
RGB
rgb(0, 128, 128)
HSL
hsl(180, 100%, 25.1%)
OKLCH
oklch(0.54312257 0.09271004 194.768948)
Matiz
180.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.

#008040oklch(0.52544764 0.13776333 152.154974)#008080oklch(0.54312257 0.09271004 194.768948)#004080oklch(0.37630471 0.12254188 254.677367)
CSS da paleta
:root {
  --palette-1: #008040;
  --palette-2: #008080;
  --palette-3: #004080;
}
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 / #008080 · 4.77: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.

#004080 / #008080 · 2.15:1 · Texto normal · AA

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

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

#008080 / #ffffff
Rácio de contraste4.77:1
  • Texto normal · AACumpre
  • Texto grande · AACumpre
  • Texto normal · AAANão cumpre
  • 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