PALUNEXA
Voltar ao atlas

NOTAS SOBRE A COR

Conheça esta cor
#6366f1

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

Cor selecionada · sRGB#6366f1
A cor em números · RGB / HSL / OKLCH
HEX
#6366f1
RGB
rgb(99, 102, 241)
HSL
hsl(238.73, 83.53%, 66.67%)
OKLCH
oklch(0.58540431 0.20405526 277.117292)

Paletas com #6366f1

Abra as sugestões. A cor escolhida fica bloqueada ao editar a paleta.

Escolha uma paleta, copie suas cores ou edite-a no Studio.

Proposta selecionada

Índigo sereno

Minimalista

Editar no estúdio

Detalhes e contraste

Um destaque índigo concentra a atenção nas telas de ajustes.

Usos sugeridos: Aplicativos · Sites

Papéis de cor sugeridos

Fundo
#f1f2fa
Cartão
#dadcee
Destaque
#a6add0
Botão
#f1f2fa
Texto
#292c50

Texto / Fundo: 11.99:1 — AA para texto normal

Texto / Cartão: 9.84:1 — AA para texto normal

Texto / Botão: 11.99:1 — AA para texto normal

Confira cada par de texto e fundo; nenhuma cor é alterada automaticamente.

A cor escolhida fica bloqueada. A primeira cor continua como base do estúdio.

A cor no design

Exemplos estáticos feitos com cores representativas. Tons próximos podem compartilhar uma referência, mas a imagem não muda com a paleta.

Paleta gerada

Tetrádica · #6366f1

Editar no estúdio

Detalhes e contraste

Calculada com o motor HSL existente; não é uma seleção editorial.

Papéis de cor sugeridos

Fundo
#6366f1
Cartão
#ee63f1
Destaque
#f1ee63
Botão
#6366f1
Texto
#66f163

Texto / Fundo: 3.05:1 — Não atende AA; alternativa #000000

Texto / Cartão: 1.86:1 — Não atende AA; alternativa #000000

Texto / Botão: 3.05:1 — Não atende AA; alternativa #000000

Confira cada par de texto e fundo; nenhuma cor é alterada automaticamente.

A cor escolhida fica bloqueada. A primeira cor continua como base do estúdio.

A cor no design

Exemplos estáticos feitos com cores representativas. Tons próximos podem compartilhar uma referência, mas a imagem não muda com a paleta.

Paleta gerada

Quadrada · #6366f1

Editar no estúdio

Detalhes e contraste

Calculada com o motor HSL existente; não é uma seleção editorial.

Papéis de cor sugeridos

Fundo
#6366f1
Cartão
#f163ad
Destaque
#f1ee63
Botão
#6366f1
Texto
#63f1a7

Texto / Fundo: 3.12:1 — Não atende AA; alternativa #000000

Texto / Cartão: 2.06:1 — Não atende AA; alternativa #000000

Texto / Botão: 3.12:1 — Não atende AA; alternativa #000000

Confira cada par de texto e fundo; nenhuma cor é alterada automaticamente.

A cor escolhida fica bloqueada. A primeira cor continua como base do estúdio.

A cor no design

Exemplos estáticos feitos com cores representativas. Tons próximos podem compartilhar uma referência, mas a imagem não muda com a paleta.

Experimentar esta cor no estúdio

02 / COMBINAÇÕES

Cores que se completam.

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

#6366f1

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
#63adf1rgb(99, 173, 241)oklch(0.72782854 0.12411308 248.001339)
Rácio de contraste: 8.78:1
02BASE
#6366f1rgb(99, 102, 241)oklch(0.58540431 0.20405526 277.117292)
Rácio de contraste: 4.70:1
03COMBINAÇÃO
#a763f1rgb(167, 99, 241)oklch(0.64015129 0.20719847 303.074854)
Rácio de contraste: 5.70:1
HSL / Análoga
Valores e ferramentas avançadas

Cor selecionada / #6366F1

A cor em números

Uma cor, quatro formas de a representar.

HEX
#6366f1
RGB
rgb(99, 102, 241)
HSL
hsl(238.73, 83.53%, 66.67%)
OKLCH
oklch(0.58540431 0.20405526 277.117292)
Matiz
238.73°
Saturação
83.53%
Luminosidade
66.67%
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.

#63adf1oklch(0.72782854 0.12411308 248.001339)#6366f1oklch(0.58540431 0.20405526 277.117292)#a763f1oklch(0.64015129 0.20719847 303.074854)
CSS da paleta
:root {
  --palette-1: #63adf1;
  --palette-2: #6366f1;
  --palette-3: #a763f1;
}
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 / #6366f1 · 4.70: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.

#a763f1 / #6366f1 · 1.21:1 · Texto normal · AA

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

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

A cor no design

Exemplos estáticos feitos com cores representativas. Tons próximos podem compartilhar uma referência, mas a imagem não muda com a paleta.

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.

#6366f1 / #ffffff
Rácio de contraste4.47: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