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

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.

Para as parentes mais calmas, veja gradiente verde-azulado e gradiente turquesa. Este artigo fica na ponta mais viva.

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.

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.

Para esquemas completos construídos em torno desse visual, paletas de cores tech tem várias, e gradientes neon 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 trata do outro lado dessa dupla.

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 explica as proporções e as metas.

É 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.

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

Mais técnicas, incluindo bordas animadas, estão em borda com gradiente em CSS.

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