PALUNEXA
Voltar ao atlas

NOTAS SOBRE A COR

Dourado
#ffd700

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

Cor selecionada · sRGB#ffd700
A cor em números · RGB / HSL / OKLCH
HEX
#ffd700
RGB
rgb(255, 215, 0)
HSL
hsl(50.59, 100%, 50%)
OKLCH
oklch(0.88677107 0.18218604 95.330493)

O que distingue esta cor?

A cor CSS gold é um valor sRGB plano de amarelo dourado. Não contém reflexos, textura nem brilhos variáveis que deem a uma superfície o aspeto de metal.

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 uma pequena área num marco de progresso, numa distinção ou num detalhe de capa escura. Sobre fundo claro, escolha texto escuro e um contorno definido se a forma for interativa.

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

O que verificar antes de usar

Uma etiqueta dourada com letras brancas pode ter pouco contraste. Num gradiente brilhante, verifique todas as áreas que ficam por trás do texto.

Para ver e conseguir ler. / CSS
Rácio de contraste · #ffd700
Cor selecionadaRácio de contrasteTexto normal · AA
Preto14.97:1Cumpre
Branco1.40:1Não cumpre

CSS para utilizar

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

Perguntas e respostas diretas

Quais são os valores de #ffd700?

#ffd700 equivale a rgb(255, 215, 0), hsl(50.59, 100%, 50%) e oklch(0.88677107 0.18218604 95.330493). Todos são calculados a partir da mesma cor sRGB opaca.

Que texto se lê melhor sobre #ffd700?

O preto oferece 14.97:1 e o branco 1.40: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 é #ffd700, #0028ff. Os acromáticos mantêm-se neutros.

#ffd700 imprime como ouro metálico?

Não. Um código de ecrã descreve uma cor plana. Tintas metálicas, estampagem e reflexos do material exigem escolhas de produção próprias.

Cores relacionadas

Preto#000000Terracota#d86b4dLaranja chama#ff5733
Experimentar esta cor no estúdio

02 / COMBINAÇÕES

Cores que se completam.

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

#ffd700

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
#ff5700rgb(255, 87, 0)oklch(0.67806676 0.21592444 39.294098)
Rácio de contraste: 6.62:1
02BASE
#ffd700rgb(255, 215, 0)oklch(0.88677107 0.18218604 95.330493)
Rácio de contraste: 14.97:1
03COMBINAÇÃO
#a8ff00rgb(168, 255, 0)oklch(0.9092937 0.24547729 130.203949)
Rácio de contraste: 16.97:1
HSL / Análoga
Valores e ferramentas avançadas

Cor selecionada / #FFD700

A cor em números

Uma cor, quatro formas de a representar.

HEX
#ffd700
RGB
rgb(255, 215, 0)
HSL
hsl(50.59, 100%, 50%)
OKLCH
oklch(0.88677107 0.18218604 95.330493)
Matiz
50.59°
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: 2

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.

#ff5700oklch(0.67806676 0.21592444 39.294098)#ffd700oklch(0.88677107 0.18218604 95.330493)#a8ff00oklch(0.9092937 0.24547729 130.203949)
CSS da paleta
:root {
  --palette-1: #ff5700;
  --palette-2: #ffd700;
  --palette-3: #a8ff00;
}
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 / #ffd700 · 14.97: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.

#a8ff00 / #ffd700 · 1.13:1 · Texto normal · AA

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

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

#ffd700 / #ffffff
Rácio de contraste1.40: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