Tons de Azul: Códigos Hex, RGB e HSL

O que conta como um tom de azul?

O azul é a cor mais usada em design de interface e de marca, e os 21 tons abaixo cobrem toda a sua faixa de trabalho. O topo é atmosférico — Azul Bebê #89CFF0, LightBlue #ADD8E6, SkyBlue #87CEEB —, o meio é onde as interfaces vivem, com DodgerBlue #1E90FF, CornflowerBlue #6495ED e RoyalBlue #4169E1, e o fundo chega quase ao preto por Marinho #000080, Azul da Prússia #003153 e MidnightBlue #191970.

Vale conhecer dois grupos. Os azuis de pigmento — Azul Cobalto #0047AB, Safira #0F52BA, Azul da Prússia — são profundos e levemente violáceos, e são o que as pessoas costumam chamar de azul rico. Os azuis utilitários — SteelBlue #4682B4, Denim #1560BD, Cerúleo #007BA7 — têm cinza na mistura, o que os torna muito mais fáceis de acompanhar texto do que o azul puro #0000FF, uma cor saturada demais para usar em grandes áreas.

Como usar estes códigos de cor

1. Encontre seu tom. A lista vai do claro ao escuro, com uma amostra real ao lado de cada nome — percorra como se fosse uma cartela de tintas.
2. Clique em um código para copiar. Cada linha traz o valor hex, RGB e HSL daquela cor. Um clique copia exatamente esse texto para a área de transferência.
3. Cole no seu projeto. Leve o hex para o CSS, o Figma, o Photoshop ou um documento. Clicar na própria amostra também copia o hex, então você não precisa mirar no texto pequeno.

O que o azul comunica

O azul é a confiança padrão. Bancos, seguradoras, hospitais e redes sociais convergem para ele porque se lê como estável, competente e pouco emocional: a escolha mais segura quando uma marca não pode parecer arriscada. Essa onipresença é também sua fraqueza: um logo azul raramente se destaca dentro da própria categoria.

É a única matiz apreciada de forma quase universal entre culturas, e a que recua visualmente: montanhas distantes parecem azuis, então fundos azuis são lidos como profundidade e não como superfície. Azuis escuros somam autoridade e formalidade, razão pela qual o marinho é a cor de uniformes institucionais há dois séculos, enquanto azuis pálidos se leem como calmos, limpos e um pouco frios.

Limitações honestas

Um código hex é exato, mas a cor que você vê não é. O mesmo #FF0000 aparece diferente num celular OLED, num monitor de escritório barato e no papel impresso, porque cada dispositivo tem sua própria gama e calibração. Use estes valores como um ponto de partida preciso para tela e sempre confira uma prova física antes de mandar uma cor para gráfica: o CMYK não reproduz todos os tons desta lista.

Os nomes de cor misturam duas coisas. Os marcados com CSS são cores nomeadas oficiais: o nome funciona direto numa folha de estilo e todo navegador o resolve exatamente para aquele hex. Os demais são nomes convencionais — Bordô, Sálvia, Espresso — que não pertencem a nenhum padrão. Seus valores seguem a convenção mais citada, mas outra cartela pode colocá-los um pouco mais claros ou escuros, então cite o hex e não o nome quando o valor exato importar.

Por que é grátis?

O FreeToGenerate.com mantém todas as ferramentas realmente gratuitas. Esta página é uma lista estática de valores de cor exibida no seu navegador: nada para instalar, sem conta e sem versão premium escondendo metade da paleta. Copie quantos códigos precisar, quantas vezes quiser.

Outras famílias de cor

vermelholaranjaamareloverdecianoroxorosamarromcinzapretobrancoTodas as famílias