PALUNEXA
Voltar ao atlas

NOTAS SOBRE A COR

Laranja chama
#ff5733

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

Cor selecionada · sRGB#ff5733
A cor em números · RGB / HSL / OKLCH
HEX
#ff5733
RGB
rgb(255, 87, 51)
HSL
hsl(10.59, 100%, 60%)
OKLCH
oklch(0.68035815 0.21001183 33.691637)

O que distingue esta cor?

Este vermelho alaranjado mantém o vermelho no máximo e acrescenta verde e azul. Aproxima-se mais do laranja do que o vermelho puro, mas não corresponde à palavra-chave CSS orange.

O nome é descritivo; use o valor numérico em 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 única ação principal de uma página neutra ou numa pequena categoria. Um complemento ciano azulado pode separar uma ilustração secundária da área quente principal.

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

O que verificar antes de usar

Um botão quente e intenso não aceita automaticamente texto branco. Verifique o contraste calculado antes de acrescentar rótulos pequenos ou mensagens longas.

Para ver e conseguir ler. / CSS
Rácio de contraste · #ff5733
Cor selecionadaRácio de contrasteTexto normal · AA
Preto6.66:1Cumpre
Branco3.15:1Não cumpre

CSS para utilizar

.color-surface {
  background: #ff5733;
  color: #000000;
}

Perguntas e respostas diretas

Quais são os valores de #ff5733?

#ff5733 equivale a rgb(255, 87, 51), hsl(10.59, 100%, 60%) e oklch(0.68035815 0.21001183 33.691637). Todos são calculados a partir da mesma cor sRGB opaca.

Que texto se lê melhor sobre #ff5733?

O preto oferece 6.66:1 e o branco 3.15: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 é #ff5733, #33dbff. Os acromáticos mantêm-se neutros.

Laranja chama é um nome CSS normalizado?

Não. É um nome descritivo desta ficha. Em código, use #ff5733 ou os valores numéricos RGB, HSL ou OKLCH; Laranja chama não é uma palavra-chave CSS.

Cores relacionadas

Vermelho#ff0000Terracota#d86b4dDourado#ffd700
Experimentar esta cor no estúdio

02 / COMBINAÇÕES

Cores que se completam.

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

#ff5733

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
#ff3375rgb(255, 51, 117)oklch(0.65984279 0.23659861 8.429975)
Rácio de contraste: 5.98:1
02BASE
#ff5733rgb(255, 87, 51)oklch(0.68035815 0.21001183 33.691637)
Rácio de contraste: 6.66:1
03COMBINAÇÃO
#ffbd33rgb(255, 189, 51)oklch(0.83797843 0.15976643 80.625252)
Rácio de contraste: 12.58:1
HSL / Análoga
Valores e ferramentas avançadas

Cor selecionada / #FF5733

A cor em números

Uma cor, quatro formas de a representar.

HEX
#ff5733
RGB
rgb(255, 87, 51)
HSL
hsl(10.59, 100%, 60%)
OKLCH
oklch(0.68035815 0.21001183 33.691637)
Matiz
10.59°
Saturação
100.00%
Luminosidade
60.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.

#ff3375oklch(0.65984279 0.23659861 8.429975)#ff5733oklch(0.68035815 0.21001183 33.691637)#ffbd33oklch(0.83797843 0.15976643 80.625252)
CSS da paleta
:root {
  --palette-1: #ff3375;
  --palette-2: #ff5733;
  --palette-3: #ffbd33;
}
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 / #ff5733 · 6.66: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.

#ffbd33 / #ff5733 · 1.89:1 · Texto normal · AA

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

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

#ff5733 / #ffffff
Rácio de contraste3.15:1
  • Texto normal · AANão cumpre
  • Texto grande · AACumpre
  • 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