Azul é uma das três cores primárias no modelo de cores RGB e pode ser criada combinando ciano e magenta no modelo de cores CMYK. Essa cor está frequentemente associada à calma e à tranquilidade, remetendo à imensidão do céu e dos mares. Designers podem utilizar os muitos tons e matizes frios do azul para evocar uma ampla variedade de emoções, desde serenidade até melancolia.

O azul é definido pelos seguintes códigos e valores de cor para garantir consistência em várias plataformas e dispositivos digitais.
- Código HEX: #0000FF
- Valor RGB: 0% vermelho, 0% verde e 100% azul
A escolha de cores no design de UX e UI deve considerar critérios de acessibilidade, que são fundamentais. Figma oferece plugins na Comunidade para garantir que seus designs atendam às Diretrizes de Acessibilidade de Conteúdo da Web.
Aqui estão algumas maneiras de usar o azul em seus designs:
- Transmitir uma sensação de confiança. A cor azul é comumente associada à estabilidade, confiança e profissionalismo. Use-a em designs para corporações, bancos e outras empresas que você deseja apresentar como confiáveis ou tranquilizadoras.
- Promover uma sensação de calma. Use o azul estrategicamente em seus designs para criar uma atmosfera relaxante. Ferramentas como Zoom e Smartsheet utilizam tons de azul para promover foco e produtividade em ambientes de trabalho.
- Estabelecer uma hierarquia visual. Use diferentes tons de azul para criar uma sensação de hierarquia visual. Utilize tons de azul mais claros para chamar a atenção para itens mais proeminentes, como botões e cabeçalhos.
Dica: Ao projetar para um público global, pesquise o simbolismo da cor em diferentes culturas — o vermelho não significa o mesmo em todos os lugares.
Para variações dentro do mesmo espectro relaxante e profissional do azul, considere:
- Azul ardósia (#5B7C99) é uma alternativa discreta para aplicações profissionais com seu tom cinza-azulado suave.
- Azul claro (#B6D0E2) é uma opção para designers que desejam explorar mais o aspecto calmante do azul, oferecendo um tom mais delicado.
- Cerúleo (#2A52BE) é um tom de azul ligeiramente mais vibrante, como o céu em um dia ensolarado, mas ainda reservado o suficiente para usos empresariais.
- Turquesa (#40E0D0) inclina-se mais para o mundo do verde, mas mantém as sensações relaxantes e suaves do azul padrão.
Utilizar tons neutros, como branco ou cinza, é uma escolha inteligente quando você quer que o impacto total do azul se destaque em seus designs. Para dar um toque a mais, implemente cores complementares como laranja. Você também pode considerar:
- Bege (#EDE8D0) oferece um tom quente que contrasta agradavelmente, mas permite que o azul permaneça como o foco principal.
- Azul marinho (#000080) é um tom mais escuro que complementa o azul padrão, adicionando profundidade adicional à sua paleta de cores azul.
- Pêssego (#FFD3AC) combina bem com azul para alcançar uma sensação calorosa de conforto e tranquilidade.
- Amarelo (#FFFF00) injetará vida em seus designs azuis, servindo como uma cor alegre que contrasta e adiciona vivacidade.
- Prata (#C4C4C4) é uma cor metálica com tons frios que funciona bem como um destaque em designs azuis, ajudando a alcançar um ar de elegância.
Outras cores que valem a pena considerar incluem lavanda, que adiciona profundidade e sofisticação à sua paleta de cores azul. Outra opção é mostarda, que adiciona um toque de cor que não é tão vibrante e chamativo quanto o amarelo clássico.
Embora o azul seja altamente adaptável, ele pode entrar em conflito com:
- Vermelho (#FF2C2C) pode ser avassalador quando combinado com azul se as duas cores não forem cuidadosamente equilibradas.
- Marrom (#895129) parece que pode funcionar bem, mas seus tons quentes nem sempre complementam a frieza do azul.
- Verde limão (#89F336) e outras cores altamente saturadas podem entrar em conflito com azul, especialmente em designs grandes.
- Verde menta (#ADEBB3) é outro tom de verde que não se mistura bem com azul; pode parecer muito dominante em muitos contextos.
- Ouro (#EFBF04) pode entrar em conflito com azul se não for usado com moderação como um destaque.
Dentro da teoria das cores, o azul simboliza harmonia e tranquilidade. As pessoas recorrem ao azul para estabelecer uma sensação de segurança e confiabilidade em ambientes profissionais. No entanto, o significado do azul varia entre culturas. Os antigos gregos o viam como uma cor que simbolizava os deuses e os céus. Povos indígenas nos Estados Unidos continuam a vê-lo como um símbolo de sabedoria, espiritualidade e cura.
Associado ao céu e ao oceano, o azul desperta sensações de calma e relaxamento. Essas qualidades fortalecem a conexão do azul com sentimentos adicionais de confiança e segurança. Designers costumam usar azul para ajudar a aliviar o estresse, como em hospitais e escritórios.
Designers também integram azul quando querem relaxar os espectadores. Além disso, porque pode transmitir uma sensação de confiança e estabilidade ao espectador, o azul é uma excelente opção ao criar uma marca e identidade corporativa.
A cor azul deriva seu nome da palavra francesa antiga “bleu”, que vem da língua proto-indo-europeia. A raiz “bhel” originalmente significava “brilhar”. Durante os tempos pré-históricos, civilizações antigas criaram o pigmento usando minerais como lápis-lazúli e azurita.
Os antigos egípcios usavam intensamente a cor azul, vendo-a como um símbolo do divino. A civilização egípcia antiga usou tanto o azul que inventaram um tom que continuamos a referenciar como azul egípcio; os egípcios sintetizaram a cor a partir de sílica, cal, cobre e álcali. Eles a utilizavam em arte, joias, cosméticos e para pintar o exterior das pirâmides. Os antigos gregos também valorizavam a cor azul, incorporando-a em arte e arquitetura.
Durante os períodos da Idade Média e do Renascimento, o azul tornou-se associado à realeza. O pigmento era raro e caro, tornando-o mais valioso do que alguns metais preciosos, incluindo o ouro. Com a Revolução Industrial, químicos descobriram como fazer pigmentos azuis sintéticos, tornando a cor mais acessível.
Variações de cor
Sombras
Tonalidades
Tons
Matizes
Harmonias de cores
Complementar
Dividida
Monocromática
Análoga
Triádica
Quadrado
Paletas personalizadas
Eco Azul
Noite Estrelada
Tece Sonhos
Verificador de contraste
Contraste 8,59
- Texto grande
#0000FF
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Aprovado | Aprovado | |
Aprovado | Aprovado | |
Aprovado | Aprovado |
Contraste 2,44
- Texto grande
#0000FF
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Reprovado | Reprovado | |
Reprovado | Reprovado | |
Reprovado | Reprovado |
Simulações de cor
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
A cor hexadecimal #0000ff, conhecida como Azul, tem valores RGB de R:0, G:0, B:255 e valores CMYK de C:100, M:100, Y:0, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #0000ff | #0000ff |
| RGB DECIMAL | 0, 0, 255 | RGB(0,0,255) |
| RGB PERCENTAGE | 0.0, 0.0, 100.0 | RGB(0.0%,0.0%,100.0%) |
| CMYK | 100, 100, 0, 0 | |
| HSL | HSL(240.0, 100.0%, 50.0%) | HSL(240.0, 100.0%, 50.0%) |
| HSV (OR HSB) | 240.0°, 100.0, 100.0 | |
| WEB SAFE | #00255 | #00255 |
| BINARY | 00000000, 00000000, 11111111 | |
| iOS - SwiftUI | Color(red: 0.000, green: 0.000, blue: 1.000) | |
| iOS - UIKit | UIColor(red: 0.000, green: 0.000, blue: 1.000, alpha: 1) | |
| Android - Compose | Color(0xFF0000FF) |


