# Gradiente ciano: códigos nítidos e elétricos

[Canonical HTML page](https://gradiently.design/pt-br/guide/cyan-gradient)

Ciano é a cor das telas, das piscinas e do gelo: limpa, viva e um pouco futurista. Também é bem mais clara do que parece, o que muda o jeito de colocar palavras sobre ela.

## The short version

- Um gradiente ciano mistura a cor viva que fica no meio do caminho entre o verde e o azul com branco, azul, verde-limão, magenta ou um azul-marinho profundo.
- O ciano puro de tela é `#00ffff`, que o CSS também chama de aqua, e é mais claro e mais vivo do que o verde-azulado ou o turquesa.
- Texto branco sobre ciano puro tem contraste de apenas cerca de 1,3 para 1, então o ciano precisa de letra escura ou de um fundo bem mais profundo atrás das palavras.
- O ciano parece mais elétrico sobre um fundo quase preto ou marinho, onde uma pequena quantidade dele parece brilhar.
- O ciano se mistura de forma limpa com o azul e o verde-limão, porque os dois são vizinhos dele no círculo cromático.

Um **gradiente ciano** mistura a cor viva entre o verde e o azul com uma de suas vizinhas: branco para gelo, azul para um visual tech elétrico, verde-limão para frescor, magenta para um clima cyber, ou um marinho profundo onde o ciano parece brilhar. O ciano puro de tela é `#00ffff`, e ele é muito mais claro do que a maioria das pessoas imagina, então a principal habilidade é decidir onde vão as palavras. A seguir vêm códigos para copiar de cada visual, com os números de contraste que importam.

## Ciano, verde-azulado e turquesa não são a mesma coisa

Os três são confundidos o tempo todo, e a diferença importa quando você passa um briefing a um designer ou escolhe um código. O CSS até dá nome aos três, e eles são claramente distintos. O ciano é o mais vivo e o mais equilibrado entre verde e azul. O turquesa é mais suave e um pouco mais verde, como a pedra. O verde-azulado é bem mais escuro e calmo.

| Cor | Nome CSS e hex | Caráter |
| --- | --- | --- |
| Ciano | `aqua` / `cyan`, `#00ffff` | O mais vivo, elétrico, sintético |
| Ciano elétrico | `#00e5ff` | Ciano com um toque a mais de azul, mais confortável para os olhos |
| Turquesa | `turquoise`, `#40e0d0` | Mais suave e mais verde, tropical |
| Verde-azulado | `teal`, `#008080` | Escuro, calmo, maduro |

Quatro vizinhas. Se o seu gradiente precisa parecer calmo em vez de vivo, provavelmente você quer verde-azulado, não ciano.

Para as parentes mais calmas, veja [gradiente verde-azulado](https://gradiently.design/pt-br/guide/teal-gradient) e [gradiente turquesa](https://gradiently.design/pt-br/guide/turquoise-gradient). Este artigo fica na ponta mais viva.

- Gelo: #f0fdff
- Luz de piscina: #a5f3fc
- Ciano puro: #00ffff
- Ciano elétrico: #00e5ff
- Ciano profundo: #0891b2
- Laguna: #0e7490
- Marinho noturno: #082f49
- Destaque verde-limão: #b6f73a

Uma família de cianos do gelo ao marinho, mais o verde-limão como parceiro que mantém tudo fresco.

## Códigos de gradiente ciano gelo e piscina

A ponta clara do ciano lembra água fria e ar limpo. O gelo é quase branco, com um toque de cor; geleira e piscina vão mais fundo, passando pelo ciano vivo até um azul-esverdeado que aguenta letra branca embaixo. Combinam com ofertas de verão, skincare com proposta refrescante, bebidas e tudo o que quer parecer revigorante.

- Gelo: `linear-gradient(180deg, #f0fdff 0%, #b8f3ff 50%, #5fdcf5 100%)`
- Geleira: `linear-gradient(160deg, #e0fbff 0%, #67e8f9 45%, #0891b2 100%)`
- Piscina: `linear-gradient(180deg, #a5f3fc 0%, #22d3ee 50%, #0e7490 100%)`

Cianos claros. Use letra escura na parte de cima de cada um; só a parada mais profunda, embaixo de geleira e piscina, aceita branco.

## Ciano elétrico sobre fundos escuros

O ciano fica elétrico quando está sobre a escuridão. Uma pequena luz ciano num fundo quase preto ou marinho parece uma tela, um laser ou uma visualização de dados, e é por isso que ele está em todo lugar em software, games e ciência. Mantenha a maior parte do quadro escura e deixe o ciano ocupar um canto ou uma borda. O **gradiente ciano e azul** deste conjunto é o mais versátil de todos, vivo numa ponta e azul firme na outra.

- Ciano a azul elétrico: `linear-gradient(135deg, #00e5ff 0%, #00a3ff 50%, #2563eb 100%)`
- Luz ciano sobre preto: `radial-gradient(circle at 30% 30%, #00e5ff 0%, #0077a8 30%, #04202e 65%, #01070c 100%)`
- Noite de circuito: `linear-gradient(160deg, #020617 0%, #082f49 50%, #06b6d4 100%)`

Fundos escuros com luz ciano. Noite de circuito sobe do preto ao ciano, perfeito para um hero com o título na metade superior escura.

Para esquemas completos construídos em torno desse visual, [paletas de cores tech](https://gradiently.design/pt-br/guide/tech-color-palettes) tem várias, e [gradientes neon](https://gradiently.design/pt-br/guide/neon-gradients) leva tudo mais para o lado da noite.

## Ciano com verde-limão e com magenta

Ciano para verde-limão passa pelo menta e parece esportivo, fresco e otimista. Ciano com magenta é a dupla cyberpunk: duas das três cores primárias da impressão, ambas no volume máximo. Passe essa dupla por um meio índigo escuro e ela lembra uma rua de neon à noite, e não um brinquedo infantil. O artigo [gradiente magenta](https://gradiently.design/pt-br/guide/magenta-gradient) trata do outro lado dessa dupla.

- Ciano a verde-limão: `linear-gradient(135deg, #00e5ff 0%, #34f5c5 50%, #b6f73a 100%)`
- Cyberpunk: `linear-gradient(135deg, #00e5ff 0%, #3b2aa8 50%, #ff2bd6 100%)`

Duas duplas ousadas. Ambas são barulhentas, então dê a elas palavras curtas e muito espaço.

## A armadilha do contraste: palavras sobre ciano

O ciano é uma das cores saturadas mais claras que uma tela consegue mostrar. Letra branca sobre `#00ffff` puro tem contraste de apenas cerca de 1,3 para 1, o que é ilegível, enquanto o preto sobre o mesmo ciano chega a cerca de 16,7 para 1. O branco começa a funcionar quando o ciano se aprofunda até perto de `#0e7490`, onde chega a aproximadamente 5,4 para 1. [Contraste de cor e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility) explica as proporções e as metas.

### Difícil de ler

- Letra branca sobre ciano vivo
- Letra ciano numa página branca
- Texto pequeno atravessando o meio vivo de um gradiente
- Letra azul-clara sobre gelo

### Fácil de ler

- Letra marinho ou quase preta sobre ciano vivo
- Letra ciano numa página marinho ou preta
- Texto pequeno só na parada mais profunda
- Letra branca sobre laguna #0e7490 ou mais escuro

É o tipo de julgamento que o Gradiently faz por você. A Tinta automática escolhe letra clara ou escura para cada linha a partir da própria paleta do Mark, e o Mark move a sua região mais calma e de melhor contraste para trás das palavras, então um fundo ciano vivo nunca deixa um texto branco abandonado.

## Uma borda com gradiente ciano em CSS

Em interfaces escuras, o ciano funciona lindamente como borda em vez de preenchimento. Uma borda com gradiente mantém o card legível e acrescenta o clima elétrico. Aqui são usados dois fundos, um recortado no padding e outro na borda, para manter os cantos arredondados.

```css
.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0b1220, #0b1220) padding-box,
    linear-gradient(135deg, #00e5ff 0%, #2563eb 100%) border-box;
  color: #e6f9ff;
}
```

Um card escuro com borda de ciano a azul. Troque o segundo gradiente por ciano a verde-limão para um ar mais fresco.

Mais técnicas, incluindo bordas animadas, estão em [borda com gradiente em CSS](https://gradiently.design/pt-br/guide/css-gradient-border).

## Onde um gradiente ciano se encaixa

O ciano é uma escolha natural para lançamentos de software, ferramentas para desenvolvedores, games, moda praia, bebidas e tudo o que quer parecer rápido ou gelado. No dia do lançamento, mantenha um único visual ciano no post de anúncio, na prévia do link e no banner do changelog, para que as pessoas o reconheçam em qualquer feed. [Branding para startups SaaS](https://gradiently.design/pt-br/guide/saas-startup-branding) mostra como construir uma identidade inteira em torno de uma cor viva como esta.

Um post largo com fundo azul-marinho escuro, uma luz ciano viva numa borda e as palavras Deploy em segundos em branco

Um post de lançamento para o X em 1600×900. Letra branca no lado escuro, com a luz ciano longe das palavras.

## FAQ

### Qual é o código hex do ciano?

O ciano puro de tela é #00ffff, também chamado de aqua no CSS. Um ciano elétrico um pouco mais azul e mais confortável é #00e5ff.

### Qual é a diferença entre ciano e verde-azulado?

O ciano é vivo e claro, no meio do caminho entre verde e azul. O verde-azulado, #008080 no CSS (teal), é um azul-esverdeado bem mais escuro e calmo.

### Que cor de texto funciona num fundo ciano?

Marinho ou quase preto sobre ciano vivo. O branco só funciona em cianos profundos como #0e7490 ou mais escuros.

### Quais cores combinam com um gradiente ciano?

Azul e verde-limão se misturam de forma limpa porque são vizinhos do ciano. Magenta forma uma dupla cyberpunk ousada, e marinho ou preto fazem o ciano brilhar.