Petrolgradient: koder fra lagune til dybhav

En petrolgradient løber mellem blågrønne nuancer: lys aqua i den lyse ende, en klar mellempetrol i midten og en mørk, blækagtig grønblå i bunden. Fordi petrol ligger midt mellem blå og grøn, blander den sig let til begge sider og bliver næsten aldrig mudret. Koderne nedenfor følger den nedad efter dybde, fra en solbeskinnet lagune til dybhavet, med noter om accenter, CSS og tekst til hver.

En petrolstige til enhver gradient

De fleste gode petrolgradienter er to til fire trin fra denne stige. Vælg naboer for en blid overgang, eller spring tre trin over for dramatik. Navnene nedenfor bruges i resten af artiklen.

Lyse petrolgradienter: lagune og lavvande

Lys petrol er ren, frisk og stille munter. Den passer til velvære, svømmehaller og badetøj, tandklinikker og sundhedsklinikker og ethvert produkt, der vil føles hygiejnisk uden kulden fra ren blå. Lad den løbe mod hvid eller mod en lys mint for at holde den blød.

Mellemlyse petrolgradienter: rev og jade

Midten af skalaen er petrol, når den er mest selvsikker. De virker godt til apps, fintech-dashboards, bæredygtige brands og uddannelse, fordi de opleves som både troværdige (blå) og levende (grøn). Hælder den mod smaragd, bliver den naturlig; hælder den mod blå, bliver den teknisk.

Mørke petrolgradienter: dybhavet

I den mørke ende bliver petrol næsten sort med et køligt grønt pust. Det er den mest sofistikerede petrol: advokatfirmaer, spiritus, hoteller, arkitektur, aftenarrangementer. Den er også en fremragende bund til én klar accent, fordi intet ved den konkurrerer. Mørke overgange får striber i komprimerede eksporter, så lidt kornstruktur hjælper; se striber i gradienter.

Varme accenter til en petrolgradient

Petrols modsætning på farvehjulet er en varm rødorange, så koral, fersken, abrikos og kobber får den alle til at synge. Hold den varme farve ude af selve blandingen: en gradient fra petrol til koral går gennem en mat grå på midten. Brug i stedet accenten til en knap, en overskrift eller en lille form. Komplementærfarver forklarer tiltrækningen, og koralgradienter har koder til den anden side.

Læg mærke til den tredje prøve: meget lyse toner af modsætninger blander sig fint, fordi der er lidt mætning at miste. Det er et nyttigt trick til blød emballage og bryllupstryksager.

Sådan vælger du en petrolgradient til dit brand

Petrol er populær hos brands inden for sundhed, penge og bæredygtighed, så nuancen alene skiller dig ikke ud. Det gør den dybde, du vælger, den accent, du parrer den med, og fladen. Start med den opgave, designet skal løse.

CSS til en petrolgradient i en brugerflade i mørk tilstand

Dyb petrol er et smukt alternativ til sort eller marineblå i en mørk brugerflade. Den føles blødere end ren sort og giver stadig lys tekst masser af kontrast. Her er en baggrund til en app-ramme med et blødt skær bag toppen af siden. Mere om tilgangen i design til mørk tilstand.

:root {
  --abyss: #042f2e;
  --deep-teal: #115e59;
  --lagoon: #5eead4;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #f0fdfa;
  background-color: var(--abyss);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgb(20 184 166 / 0.35) 0%, transparent 70%),
    linear-gradient(180deg, var(--deep-teal) 0%, var(--abyss) 60%);
}

a { color: var(--lagoon); }

Læselig tekst på petrol

Mellempetrol snyder. #14b8a6 ser stærk nok ud til hvid tekst, men måler cirka 2,5 til 1, et klart nej. Hvid kræver Tang (#0f766e, cirka 5,5 til 1) eller mørkere. På alt fra Aqua og lysere bruger du Afgrund-farven #042f2e som blæk: den holder teksten i petrolfamilien og er let at læse.

Det sidste punkt betyder mere, end det ser ud til. En gradient, der beskæres fra et opslag til en story, flytter lyset til det forkerte sted. I Gradiently renderes en Mark i alle størrelser, og Designer kan lave de andre størrelser for dig, så et petrollook forbliver afbalanceret i feedet, i storyen og i heroen på dit website.