PALUNEXA
Voltar ao atlas

NOTAS SOBRE A COR

Lima
#00ff00

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

Cor selecionada · sRGB#00ff00
A cor em números · RGB / HSL / OKLCH
HEX
#00ff00
RGB
rgb(0, 255, 0)
HSL
hsl(120, 100%, 50%)
OKLCH
oklch(0.86643961 0.29482724 142.495339)

O que distingue esta cor?

Lima é o primário verde no máximo em sRGB. A palavra-chave CSS lime corresponde a este HEX; green representa outro verde, mais escuro.

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

Use-o com moderação em painéis escuros, gráficos desportivos ou destaques experimentais. Identifique os indicadores de estado com texto para não depender da perceção da cor.

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

O que verificar antes de usar

É fácil sobrestimar o contraste do branco sobre este verde luminoso. Teste texto escuro em vez de assumir que todas as cores saturadas aceitam letras brancas.

Para ver e conseguir ler. / CSS
Rácio de contraste · #00ff00
Cor selecionadaRácio de contrasteTexto normal · AA
Preto15.30:1Cumpre
Branco1.37:1Não cumpre

CSS para utilizar

.color-surface {
  background: #00ff00;
  color: #000000;
}

Perguntas e respostas diretas

Quais são os valores de #00ff00?

#00ff00 equivale a rgb(0, 255, 0), hsl(120, 100%, 50%) e oklch(0.86643961 0.29482724 142.495339). Todos são calculados a partir da mesma cor sRGB opaca.

Que texto se lê melhor sobre #00ff00?

O preto oferece 15.30:1 e o branco 1.37:1. Entre ambos, Preto 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 é #00ff00, #ff00ff. Os acromáticos mantêm-se neutros.

#00ff00 chama-se green em CSS?

A palavra-chave de #00ff00 é lime. CSS green é #008000. Esta distinção importa ao escrever o nome de uma cor numa folha de estilos.

Cores relacionadas

Sálvia#a5b89cDourado#ffd700Verde-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.

#00ff00

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
#80ff00rgb(128, 255, 0)oklch(0.89065707 0.2643614 135.892352)
Rácio de contraste: 16.22:1
02BASE
#00ff00rgb(0, 255, 0)oklch(0.86643961 0.29482724 142.495339)
Rácio de contraste: 15.30:1
03COMBINAÇÃO
#00ff80rgb(0, 255, 128)oklch(0.87507424 0.23444037 151.184827)
Rácio de contraste: 15.62:1
HSL / Análoga
Valores e ferramentas avançadas

Cor selecionada / #00FF00

A cor em números

Uma cor, quatro formas de a representar.

HEX
#00ff00
RGB
rgb(0, 255, 0)
HSL
hsl(120, 100%, 50%)
OKLCH
oklch(0.86643961 0.29482724 142.495339)
Matiz
120.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: 1

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.

#80ff00oklch(0.89065707 0.2643614 135.892352)#00ff00oklch(0.86643961 0.29482724 142.495339)#00ff80oklch(0.87507424 0.23444037 151.184827)
CSS da paleta
:root {
  --palette-1: #80ff00;
  --palette-2: #00ff00;
  --palette-3: #00ff80;
}
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 / #00ff00 · 15.30: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.

#00ff80 / #00ff00 · 1.02:1 · Texto normal · AA

Cor de texto alternativa: #000000 (15.30:1).

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

#00ff00 / #ffffff
Rácio de contraste1.37: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