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

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

O ciano é a cor dos ecrãs, das piscinas e do gelo: limpa, brilhante e um pouco futurista. Também é muito mais clara do que parece, o que muda a forma de lhe pôr palavras por cima.

## The short version

- Um gradiente ciano mistura a cor brilhante a meio caminho entre o verde e o azul com branco, azul, lima, magenta ou um azul-marinho profundo.
- O ciano puro de ecrã é `#00ffff`, a que o CSS também chama aqua, e é mais claro e mais brilhante do que o verde-azulado ou o turquesa.
- Texto branco sobre ciano puro tem um contraste de apenas cerca de 1,3 para 1, por isso o ciano precisa de texto escuro ou de um fundo muito mais profundo por trás das palavras.
- O ciano parece mais elétrico sobre um fundo quase preto ou azul-marinho, onde uma pequena quantidade dele parece brilhar.
- O ciano mistura-se bem com o azul e a lima, porque ambos são seus vizinhos no círculo cromático.

Um **gradiente ciano** mistura a cor brilhante a meio caminho entre o verde e o azul com um dos seus vizinhos: branco para o gelo, azul para um look tecnológico elétrico, lima para frescura, magenta para um toque cyber, ou um azul-marinho profundo onde o ciano parece brilhar. O ciano puro de ecrã é `#00ffff` e é muito mais claro do que a maioria das pessoas espera, por isso a principal arte está em decidir onde ficam as palavras. Seguem-se códigos para copiar de cada look, com os números de contraste que importam.

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

Estes três trocam-se a toda a hora, e a diferença conta quando briefas um designer ou escolhes um código. O CSS dá nome aos três, e são claramente distintos. O ciano é o mais brilhante e o mais equilibrado entre o verde e o azul. O turquesa é mais suave e um pouco mais verde, como a pedra preciosa. O verde-azulado escuro (teal) é muito mais escuro e calmo.

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

Quatro vizinhos. Se o teu gradiente deve parecer calmo e não brilhante, provavelmente queres verde-azulado e não ciano.

Para os parentes mais calmos, vê [gradiente verde-azulado](https://gradiently.design/pt-pt/guide/teal-gradient) e [gradiente turquesa](https://gradiently.design/pt-pt/guide/turquoise-gradient). Este artigo fica na ponta brilhante.

- Gelo: #f0fdff
- Luz de piscina: #a5f3fc
- Ciano puro: #00ffff
- Ciano elétrico: #00e5ff
- Ciano profundo: #0891b2
- Lagoa: #0e7490
- Azul-marinho noturno: #082f49
- Toque de lima: #b6f73a

Uma família de ciano do gelo ao azul-marinho, mais a lima como parceira que a mantém fresca.

## Códigos de gradiente ciano gelo e piscina

A ponta clara do ciano sabe a água fria e ar limpo. O gelo é quase branco com um toque de cor; o glaciar e a piscina vão mais fundo, por um ciano brilhante até um azul-esverdeado capaz de levar texto branco na parte de baixo. Servem para ofertas de verão, cuidados de pele com uma história de frescura, bebidas e tudo o que queira parecer refrescante.

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

Cianos claros. Põe texto escuro na parte de cima de cada um; só a paragem mais profunda, em baixo no glaciar e na piscina, aceita branco.

## Ciano elétrico em fundos escuros

O ciano torna-se elétrico quando está sobre o escuro. Uma pequena luz ciano sobre um fundo quase preto ou azul-marinho parece um ecrã, um laser ou uma visualização de dados, e por isso está em todo o lado no software, nos jogos e na ciência. Mantém a maior parte do quadro escura e deixa o ciano ocupar um canto ou uma aresta. O **gradiente ciano e azul** deste conjunto é o mais versátil de todos, brilhante numa ponta e firmemente azul na outra.

- Ciano para 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 circuitos: `linear-gradient(160deg, #020617 0%, #082f49 50%, #06b6d4 100%)`

Fundos escuros com luz ciano. A noite de circuitos sobe do preto ao ciano, perfeita para um hero em que o título fica na metade superior escura.

Para esquemas completos construídos em torno deste look, [paletas de cores tecnológicas](https://gradiently.design/pt-pt/guide/tech-color-palettes) tem vários, e [gradientes néon](https://gradiently.design/pt-pt/guide/neon-gradients) leva-o mais longe, em direção à vida noturna.

## Ciano com lima e com magenta

O ciano para lima passa pela menta e parece desportivo, fresco e otimista. O ciano com magenta é o par cyberpunk: dois dos três primários de impressão, ambos em força total. Faz esse passar por um meio de índigo escuro e parece uma rua de néon à noite e não um brinquedo de criança. O artigo [gradiente magenta](https://gradiently.design/pt-pt/guide/magenta-gradient) trata do outro lado deste par.

- Ciano para lima: `linear-gradient(135deg, #00e5ff 0%, #34f5c5 50%, #b6f73a 100%)`
- Cyberpunk: `linear-gradient(135deg, #00e5ff 0%, #3b2aa8 50%, #ff2bd6 100%)`

Dois pares ousados. Ambos são vistosos, por isso dá-lhes palavras curtas e muito espaço.

## A armadilha do contraste: palavras sobre ciano

O ciano é uma das cores saturadas mais claras que um ecrã consegue mostrar. Texto branco sobre `#00ffff` puro tem um 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 para cerca de `#0e7490`, onde chega a aproximadamente 5,4 para 1. [Contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) explica os rácios e os objetivos.

### Difícil de ler

- Texto branco sobre ciano brilhante
- Texto ciano numa página branca
- Texto pequeno ao longo do meio brilhante de um gradiente
- Texto azul-claro sobre gelo

### Fácil de ler

- Texto azul-marinho ou quase preto sobre ciano brilhante
- Texto ciano numa página azul-marinho ou preta
- Texto pequeno só na paragem mais profunda
- Texto branco sobre lagoa #0e7490 ou mais escuro

Este é o tipo de juízo que o Gradiently faz por ti. O Tinta automática escolhe texto claro ou escuro para cada linha a partir da paleta do próprio Mark, e o Mark move a sua zona mais calma e de melhor contraste para trás das palavras, por isso um fundo ciano brilhante nunca deixa o texto branco abandonado.

## Um contorno com gradiente ciano em CSS

Em interfaces escuras, o ciano funciona muito bem como aresta e não como preenchimento. Um contorno em gradiente mantém o cartão legível e acrescenta o toque elétrico. Isto usa dois fundos, um recortado ao padding e outro ao contorno, por isso mantém 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 cartão escuro com contorno de ciano para azul. Troca o segundo gradiente por ciano para lima para um toque mais fresco.

Há mais técnicas, incluindo contornos animados, em [contorno com gradiente em CSS](https://gradiently.design/pt-pt/guide/css-gradient-border).

## Onde assenta bem um gradiente ciano

O ciano é uma escolha natural para lançamentos de software, ferramentas para programadores, jogos, fatos de banho, bebidas e tudo o que queira parecer rápido ou frio. No dia do lançamento, mantém um só look ciano na publicação de anúncio, na pré-visualização da ligação e no banner do changelog para as pessoas o reconhecerem em todos os feeds. [Branding de startups SaaS](https://gradiently.design/pt-pt/guide/saas-startup-branding) mostra como construir uma identidade inteira em torno de uma cor brilhante como esta.

Uma publicação social larga com fundo azul-marinho escuro, uma luz ciano brilhante numa aresta e as palavras Deploys em segundos a branco

Uma publicação de lançamento para o X a 1600×900. Texto branco no lado escuro, com a luz ciano longe das palavras.

## FAQ

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

O ciano puro de ecrã é #00ffff, também chamado aqua em 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 é brilhante e claro, a meio caminho entre o verde e o azul. O verde-azulado (teal), #008080 em CSS, é um azul-esverdeado muito mais escuro e calmo.

### Que cor de texto funciona sobre um fundo ciano?

Azul-marinho ou quase preto sobre ciano brilhante. O branco só funciona em cianos profundos como #0e7490 ou mais escuros.

### Que cores combinam bem com um gradiente ciano?

O azul e a lima misturam-se bem porque são vizinhos do ciano. O magenta faz um par cyberpunk ousado, e o azul-marinho ou o preto fazem o ciano brilhar.