Cyaan verloop: scherpe, elektrische codes

Een cyaan verloop mengt de heldere kleur halverwege groen en blauw met een van zijn buren: wit voor ijs, blauw voor een elektrische techlook, limoen voor frisheid, magenta voor een cybergevoel, of een diep marineblauw waar cyaan lijkt te gloeien. Zuiver schermcyaan is #00ffff, en het is veel lichter dan de meeste mensen verwachten, dus de belangrijkste vaardigheid is bepalen waar de woorden komen. Hierna volgen kopieerbare codes voor elke look, met de contrastgetallen die ertoe doen.

Cyaan, blauwgroen en turkoois zijn niet hetzelfde

Deze drie worden voortdurend verwisseld, en het verschil doet ertoe als je een ontwerper briefet of een code kiest. CSS noemt alle drie, en ze zijn duidelijk verschillend. Cyaan is het helderst en het meest in balans tussen groen en blauw. Turkoois is zachter en iets groener, zoals de edelsteen. Blauwgroen (teal) is veel donkerder en rustiger.

Voor de rustigere verwanten, zie teal verloop en turkoois verloop. Dit artikel blijft aan het heldere uiteinde.

Cyaanverlopen voor ijs en zwembad

Het lichte uiteinde van cyaan voelt als koud water en schone lucht. IJs is bijna wit met een zweem kleur; gletsjer en zwembad lopen dieper, via helder cyaan naar een blauwgroen dat onderaan witte letters kan dragen. Ze passen bij zomeraanbiedingen, huidverzorging met een verkoelend verhaal, drankjes en alles wat verfrissend wil overkomen.

Elektrisch cyaan op donkere achtergronden

Cyaan wordt elektrisch wanneer het op duisternis staat. Een klein cyaan licht op een bijna zwarte of marineblauwe ondergrond lijkt op een scherm, een laser of een datavisualisatie, daarom zie je het overal in software, gaming en wetenschap. Houd het grootste deel van het beeld donker en laat cyaan een hoek of rand innemen. Het cyaanblauwe verloop in deze set is het veelzijdigst van allemaal, helder aan de ene kant en stevig blauw aan de andere.

Voor volledige schema’s rond deze look heeft techkleurenpaletten er meerdere, en neonverlopen duwt het verder richting nachtleven.

Cyaan met limoen en met magenta

Cyaan naar limoen loopt via mint en voelt sportief, fris en optimistisch. Cyaan met magenta is de cyberpunkcombinatie: twee van de drie drukprimaire kleuren, allebei op volle sterkte. Laat die door een donker indigo midden lopen en het voelt als een neonstraat bij nacht in plaats van kinderspeelgoed. Het artikel magenta verloop behandelt de andere kant van deze combinatie.

De contrastval: woorden op cyaan

Cyaan is een van de lichtste verzadigde kleuren die een scherm kan tonen. Witte letters op zuiver #00ffff hebben een contrast van slechts ongeveer 1,3 op 1, wat onleesbaar is, terwijl zwart op hetzelfde cyaan ongeveer 16,7 op 1 haalt. Wit gaat werken zodra het cyaan verdiept tot rond #0e7490, waar het ruwweg 5,4 op 1 haalt. Kleurcontrast en toegankelijkheid legt de verhoudingen en de doelen uit.

Dit is het soort afweging dat Gradiently voor je maakt. Auto-inkt kiest voor elke regel lichte of donkere letters uit het eigen palet van de Mark, en de Mark verplaatst zijn rustigste, best contrasterende gebied achter de woorden, dus een heldere cyaan achtergrond laat nooit witte tekst in de steek.

Een cyaan verlooprand in CSS

Op donkere interfaces werkt cyaan prachtig als rand in plaats van als vulling. Een verlooprand houdt de kaart leesbaar en voegt het elektrische gevoel toe. Dit gebruikt twee achtergronden, een bijgesneden op de padding en een op de rand, zodat afgeronde hoeken blijven.

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

Meer technieken, ook voor geanimeerde randen, staan in CSS-verloopranden.

Waar een cyaan verloop past

Cyaan is een natuurlijke keuze voor softwarelanceringen, ontwikkelaarstools, gaming, zwemkleding, drankjes en alles wat snel of koud wil aanvoelen. Houd op lanceerdag één cyaanlook over de aankondigingspost, de linkvoorvertoning en de changelogbanner, zodat mensen hem in elke feed herkennen. Branding voor SaaS-startups laat zien hoe je een hele identiteit bouwt rond één heldere kleur als deze.