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

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.

Para os parentes mais calmos, vê gradiente verde-azulado e gradiente turquesa. Este artigo fica na ponta brilhante.

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.

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.

Para esquemas completos construídos em torno deste look, paletas de cores tecnológicas tem vários, e gradientes néon 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 trata do outro lado deste par.

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 explica os rácios e os objetivos.

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.

.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;
}

Há mais técnicas, incluindo contornos animados, em contorno com gradiente em CSS.

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 mostra como construir uma identidade inteira em torno de uma cor brilhante como esta.