Degradê Azul

11 degradês de azul prontos, com o código CSS para copiar: do Azul Alice ao Azul Noite, azul com branco e com preto e azul com as cores que combinam com ele. Passe o mouse no card para ver os códigos de cada cor.

#F0F8FF

#102030

Azul Alice para Azul Noite

Do tom mais claro ao mais escuro de azul.

#F0F8FF

#71A6D2

#006DB0

#102030

Azul Tom Sobre Tom

Quatro tons de azul: Azul Alice, Iceberg, Azul Honolulu, Azul Noite.

#0000FF

#FFFFFF

Azul para Branco

Clareia até o branco.

#0000FF

#000000

Azul para Preto

Escurece até o preto.

#F0F8FF

#30BFBF

Azul Alice para Azul-Verde Máximo

O Azul Alice é 27 pontos mais claro que o Azul-Verde Máximo (L* de 97 contra 71).

#30BFBF

#008080

Azul-Verde Máximo para Azul-Esverdeado (Teal)

O Azul-Verde Máximo é 22 pontos mais claro que o Azul-Esverdeado (Teal) (L* de 71 contra 48).

#008080

#1034A6

Azul-Esverdeado (Teal) para Azul Egípcio

O Azul-Esverdeado (Teal) é 21 pontos mais claro que o Azul Egípcio (L* de 48 contra 28).

#0000FF

#FB006C

#FFA500

Azul para Laranja

Com #FB006C no meio: só com as duas pontas, o centro ficaria acinzentado (#805380).

#0000FF

#FF6E73

#FFFF00

Azul para Amarelo

Com #FF6E73 no meio: só com as duas pontas, o centro ficaria acinzentado (#808080).

#0000FF

#FF4D6B

#FFD700

Azul para Dourado

Com #FF4D6B no meio: só com as duas pontas, o centro ficaria acinzentado (#806C80).

#5A4FCF

#0000FF

#191970

Azul Radial

Do centro para as bordas, o tom claro no meio.

Códigos CSS dos Degradês de Azul

Toque na linha para copiar o CSS do degradê azul.

Degradê	CSS
Azul Alice para Azul Noite	`linear-gradient(90deg, #F0F8FF 0%, #102030 100%)`
Azul Tom Sobre Tom	`linear-gradient(180deg, #F0F8FF 0%, #71A6D2 33%, #006DB0 67%, #102030 100%)`
Azul para Branco	`linear-gradient(90deg, #0000FF 0%, #FFFFFF 100%)`
Azul para Preto	`linear-gradient(180deg, #0000FF 0%, #000000 100%)`
Azul Alice para Azul-Verde Máximo	`linear-gradient(135deg, #F0F8FF 0%, #30BFBF 100%)`
Azul-Verde Máximo para Azul-Esverdeado (Teal)	`linear-gradient(135deg, #30BFBF 0%, #008080 100%)`
Azul-Esverdeado (Teal) para Azul Egípcio	`linear-gradient(135deg, #008080 0%, #1034A6 100%)`
Azul para Laranja	`linear-gradient(90deg, #0000FF 0%, #FB006C 50%, #FFA500 100%)`
Azul para Amarelo	`linear-gradient(90deg, #0000FF 0%, #FF6E73 50%, #FFFF00 100%)`
Azul para Dourado	`linear-gradient(90deg, #0000FF 0%, #FF4D6B 50%, #FFD700 100%)`
Azul Radial	`radial-gradient(circle at center, #5A4FCF 0%, #0000FF 50%, #191970 100%)`

Como Usar o Degradê Azul

Os degradês desta página usam 98 tons de azul com nome, do Azul Alice (#F0F8FF) ao Azul Noite (#102030).

No degradê Azul Alice para Azul Noite, o texto branco só passa de 4,5:1 de contraste (o mínimo para leitura, pela WCAG) a partir de 60% do caminho. Antes disso, use texto preto (19,6:1 na ponta clara) ou deixe o texto do lado escuro.

Em 3 dos degradês com outra cor, o meio feito pelo navegador fica acinzentado: no degradê Azul para Laranja, seria #805380. Neles, uma terceira cor no centro (no primeiro, #FB006C), calculada no espaço LCH, mantém o degradê vivo. Vale o mesmo para qualquer par de cores distantes na roda de cores.

Para outros tons, veja os tons de azul e as paletas com azul, com nome e código, ou monte o seu degradê no Criador de Gradiente, que já abre com três tons de azul. O guia Degradê de cores: como criar um gradiente bonito explica os tipos linear, radial e cônico.