Encontre um azul pelo código exato, compare tons claros e escuros e veja como combinar fundo, superfície e texto. As três paletas abaixo já incluem os papéis usados na prévia.
Uma cor de marca não precisa ser o fundo de todos os elementos. Escolha uma superfície, uma cor para leitura e um destaque. Os valores abaixo são combinações manuais; você pode copiar as cores exatas ou gerar variações a partir do destaque.
Oito tons de azul com HEX e RGB
Referências CSS para comparar códigos. A amostra não recomenda uma cor de texto: confira o par antes de usá-la em um componente.
As taxas comparam apenas os dois valores indicados. Para texto normal, a referência AA é 4,5:1; para texto grande, 3:1. As marcas gráficas essenciais usam outra avaliação, em geral 3:1 contra cores adjacentes. Isso não certifica o layout completo nem todos os pares da paleta.
Confira no seu projeto o tamanho e o peso da fonte, o foco e os estados de interação. Consulte os critérios do W3C para contraste de texto e contraste não textual.
O mesmo azul muda de papel conforme o fundo
Um azul claro pode funcionar como superfície com texto escuro, mas desaparecer como linha fina sobre branco. Um azul escuro pode sustentar texto branco e perder contraste em uma interface escura. Confira o elemento real, não apenas a amostra isolada.
Para criar níveis intermediários, abra a escala de tons a partir de #2563EB. A ferramenta marca a cor original na posição mais próxima. Os números de 50 a 950 identificam posições da escala; não garantem um contraste específico.
HEX, RGB e nomes de cores
HEX e RGB descrevem os mesmos canais sRGB em formatos diferentes. Em CSS, use #2563EB ou rgb(37, 99, 235) para essa cor. Os nomes são convenientes, mas um rótulo como “azul da marca” não determina um valor universal.
A tabela usa nomes de cores definidos pelo CSS e traduções para facilitar a leitura. Para reproduzir o resultado, copie o código. Para ver outros formatos, abra o inspetor e conversor de cores.
Antes de aplicar a paleta inteira
Escolha o fundo e confira o texto sobre cada superfície utilizada.
Verifique botão, texto do botão, borda e foco do teclado.
Em gráficos, acrescente rótulos e confira as cores adjacentes.
Teste novamente ao mudar do modo claro para o escuro.
Estes exemplos não atribuem efeitos psicológicos universais às cores. O contexto, a hierarquia e a forma de apresentar a informação continuam fazendo parte do projeto.