Degradê Turquesa

11 degradês de turquesa prontos, com o código CSS para copiar: do Ciano Claro ao Skobeloff, turquesa com branco e com preto e turquesa com as cores que combinam com ele. Passe o mouse no card para ver os códigos de cada cor.
#E0FFFF
#007474

Ciano Claro para Skobeloff

Do tom mais claro ao mais escuro de turquesa.

#E0FFFF
#40E0D0
#30BA8F
#007474

Turquesa Tom Sobre Tom

Quatro tons de turquesa: Ciano Claro, Turquesa, Prado de Montanha, Skobeloff.

#40E0D0
#FFFFFF

Turquesa para Branco

Clareia até o branco.

#40E0D0
#000000

Turquesa para Preto

Escurece até o preto.

#E0FFFF
#A7D8DE

Ciano Claro para Cristal

O Ciano Claro é 15 pontos mais claro que o Cristal (L* de 98 contra 83).

#A7D8DE
#66CDAA

Cristal para Água-Marinha Média

Cristal e Água-Marinha Média quase não mudam de claridade: o degradê troca só o matiz.

#66CDAA
#008B8B

Água-Marinha Média para Ciano-Escuro

O Água-Marinha Média é 23 pontos mais claro que o Ciano-Escuro (L* de 76 contra 52).

#40E0D0
#A9C158
#FF7F50

Turquesa para Coral

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

#40E0D0
#F5F5DC

Turquesa para Bege

Turquesa com uma das cores que combinam com ele.

#40E0D0
#FFD700

Turquesa para Dourado

Turquesa com uma das cores que combinam com ele.

#AFEEEE
#40E0D0
#39A78E

Turquesa Radial

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

Códigos CSS dos Degradês de Turquesa

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

Degradê CSS
Ciano Claro para Skobeloff linear-gradient(90deg, #E0FFFF 0%, #007474 100%)
Turquesa Tom Sobre Tom linear-gradient(180deg, #E0FFFF 0%, #40E0D0 33%, #30BA8F 67%, #007474 100%)
Turquesa para Branco linear-gradient(90deg, #40E0D0 0%, #FFFFFF 100%)
Turquesa para Preto linear-gradient(180deg, #40E0D0 0%, #000000 100%)
Ciano Claro para Cristal linear-gradient(135deg, #E0FFFF 0%, #A7D8DE 100%)
Cristal para Água-Marinha Média linear-gradient(135deg, #A7D8DE 0%, #66CDAA 100%)
Água-Marinha Média para Ciano-Escuro linear-gradient(135deg, #66CDAA 0%, #008B8B 100%)
Turquesa para Coral linear-gradient(90deg, #40E0D0 0%, #A9C158 50%, #FF7F50 100%)
Turquesa para Bege linear-gradient(90deg, #40E0D0 0%, #F5F5DC 100%)
Turquesa para Dourado linear-gradient(90deg, #40E0D0 0%, #FFD700 100%)
Turquesa Radial radial-gradient(circle at center, #AFEEEE 0%, #40E0D0 50%, #39A78E 100%)

Como Usar o Degradê Turquesa

Os degradês desta página usam 20 tons de turquesa com nome, do Ciano Claro (#E0FFFF) ao Skobeloff (#007474).

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

Em 1 dos degradês com outra cor, o meio feito pelo navegador fica acinzentado: no degradê Turquesa para Coral, seria #A0B090. Nele, uma terceira cor no centro (#A9C158), 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 turquesa e as paletas com turquesa, com nome e código, ou monte o seu degradê no Criador de Gradiente, que já abre com três tons de turquesa. O guia Degradê de cores: como criar um gradiente bonito explica os tipos linear, radial e cônico.