Gradient fioletowy – zielony

Płynny gradient CSS fioletowy – zielony, mieszany w OKLab, więc środek zostaje czysty. Zmień kąt, dodaj kolory i skopiuj kod.

Kolory

Mieszaj w

OKLab utrzymuje jasny środek. sRGB to sposób mieszania starych przeglądarek, który często szarzeje w środku.

Typ

Kąt90°

CSS

background: linear-gradient(90deg, #ee82ee, #d786d5, #c089bc, #a98aa3, #928a8a, #798970, #5e8755, #3f8437, #008000);
background: linear-gradient(90deg in oklab, #ee82ee, #008000);

Tailwind CSS v4

bg-linear-90/oklab from-[#ee82ee] to-[#008000]

Kolory wzdłuż gradientu

Kroki7

Jak fioletowy i zielony mieszają się w każdej przestrzeni barw

Te same dwa kolory dają inny środek zależnie od przestrzeni, w której miesza je przeglądarka. Oto dokładne kolory w punkcie 50%. Te dwa kolory mieszają się prawie tak samo w każdej przestrzeni: środek to #928a8a w OKLab i #778177 w sRGB, więc każda się nada.

Mieszaj w	Kolor środkowy	Jasność	Chroma
OKLab	#928a8a	64,1%	0.009
OKLCH	#dc6600	64,1%	0.181
sRGB	#778177	59,2%	0.019
LCH	#da6932	64,7%	0.157
HSL	#0f7ce9	59,2%	0.187

Pytania o ten gradient

Jak zrobić gradient fioletowy – zielony w CSS?

Użyj background: linear-gradient(90deg in oklab, #ee82ee, #008000). Dla bardzo starych przeglądarek dodaj przed nim linię z wersją sRGB. Interpolacja w OKLab działa we wszystkich aktualnych przeglądarkach.

Jaki kolor leży w połowie między fioletowy a zielony?

Przy mieszaniu w OKLab kolor w połowie między fioletowy a zielony to #928a8a. Zwykłe mieszanie w sRGB daje #778177.

Jak zrobić gradient fioletowy – zielony w Tailwind CSS?

W Tailwind CSS v4 użyj klas bg-linear-90/oklab from-[#ee82ee] to-[#008000].