Regnbågsgradient som inte ser ut som en standardmall

En regnbågsgradient blandar genom spektrumets nyanser, från rött via orange, gult, grönt och blått till violett. Den version de flesta verktyg ger dig ser ut som en standardmall eftersom ljusheten hoppar: en bländande gul rand, ett mörkblått band och hårda kanter mellan dem. En regnbåge som ser genomtänkt ut håller varje färg på ungefär samma ljushet, använder lite lägre mättnad och täcker ofta bara en del av spektrumet.

Den här guiden visar varför mallen ser fel ut, tre sätt att rätta den, regnbågskoder att kopiera och den CSS som ger mjuka regnbågar i moderna webbläsare. Är nyans, ljushet och kroma nya begrepp för dig går färgkoder förklarade igenom dem först.

Därför ser standardregnbågen billig ut

Den klassiska regnbågen byggs i HSL genom att nyansen stegas fram medan mättnad och ljushet hålls fasta. Ljusheten i HSL är en formel, inte ett mått på hur ljusa färgerna ser ut. För ögat är ren gul mycket ljusare än ren blå, även om HSL kallar båda 50 %. OKLCH mäter upplevd ljushet, och siffrorna visar problemet tydligt.

Så får du en regnbågsgradient att se genomtänkt ut

1. 1

   Jämna ut ljusheten

   Välj en enda upplevd ljushet, till exempel 72 % i OKLCH, och håll varje stopp där. Just den ändringen tar bort den gula randen och det blå hålet.

2. 2

   Sänk kroman lite

   Fullt mättade skärmfärger tävlar med varandra. En kroma runt 0,12 i OKLCH håller varje nyans stark och ändå inom det vanliga skärmar kan visa.

3. 3

   Använd en båge, inte hela hjulet

   Tre eller fyra närliggande nyanser, som korall till guld eller blågrön till violett, läses som ett medvetet val. Hela spektrumet läses som en testbild om det inte är själva poängen.

4. 4

   Ge den en botten

   En regnbåge på vitt känns som en leksak. Samma regnbåge som stiger ur nästan svart känns som ljus genom ett prisma. Bestäm vilken du vill ha.

5. 5

   Lägg till struktur eller mjukhet

   Korn, oskärpa eller ett långsamt radiellt tonande gör färgband till ljus. Se kornig gradient för kornsidan.

Regnbågsgradienter med koder att kopiera

De tre första täcker hela spektrumet på olika ljushetsnivåer. Resten är bågar: en del av regnbågen vald för en stämning, vilket är hur de flesta regnbågsidentiteter faktiskt fungerar.

Mjuka regnbågar i CSS med OKLCH-nyansinterpolering

Modern CSS kan gå runt nyanscirkeln åt dig. Ställer du interpolationen på oklch och nyansmetoden på longer hue tar webbläsaren den långa vägen mellan två färger, så två stopp med samma nyans ger en full, jämn regnbåge. Det fungerar i aktuella versioner av Chrome, Edge, Safari och Firefox. Kontrollera MDN:s kompatibilitetstabell för din målgrupp.

.rainbow {
  /* Fallback: hand-picked stops at even lightness */
  background: linear-gradient(90deg, #e68485, #d49648, #9bb054, #43bd99, #2fb5d8, #87a0f0, #c68bd3);
  /* One colour, all the way round the hue wheel, at one lightness */
  background: linear-gradient(in oklch longer hue 90deg, oklch(72% 0.12 20), oklch(72% 0.12 20));
}

.rainbow-arc {
  /* Only the short way from coral to teal, still perceptually even */
  background: linear-gradient(in oklch 90deg, oklch(72% 0.12 20), oklch(72% 0.12 170));
}

Håll kroman måttlig när du gör så. Vid hög kroma hamnar vissa nyanser, särskilt blå och violett, utanför det en vanlig sRGB-skärm kan visa, och webbläsaren måste pressa tillbaka dem, vilket ger tillbaka ojämna band. Mer om det i mjukare CSS-gradienter med OKLCH.

Text på en regnbågsgradient

En regnbåge är den svåraste bakgrunden för text eftersom kontrasten ändras längs hela dess längd. Mörk text som läses bra över blågrönt kan försvinna över violett. Placera orden över den lugnaste delen, lägg dem på ett stilla band eller ett kort, eller använd en pastellregnbåge med mörk text och kontrollera det ljusaste och mörkaste stället bakom varje rad. Text på gradient går igenom alternativen.

Där regnbågsgradienter passar

• Kreativa verktyg och färgprodukter, där spektrumet visar spännvidd
• Barnvarumärken och utbildning, oftast i pastellversionen
• Musik, festivaler och nattliv, som ett prisma mot mörk botten
• Holografiska och skimrande uttryck, som en blek pärlskimmer. Se holografiska gradienter
• Pridekampanjer, där regnbågsflaggan har en egen betydelse och sina egna sex ränder, så använd den med avsikt och inte som dekoration

En Mark i Gradiently kan rymma upp till åtta färger, vilket räcker för en full, jämn regnbåge med ett material och korn ovanpå. Du kan bygga en reglage för reglage i Forge.