Przejdź do próbnika kolorów

Gradient fioletowy – żółty

Płynny gradient CSS fioletowy – żółty, 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
90°

CSS

background: linear-gradient(90deg, #ee82ee, #f096e0, #f3a7d1, #f5b7c0, #f7c7ae, #f9d698, #fbe47e, #fdf25b, #ffff00);
background: linear-gradient(90deg in oklab, #ee82ee, #ffff00);

Tailwind CSS v4

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

Kolory wzdłuż gradientu

7

Jak fioletowy i żółty 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 #f7c7ae w OKLab i #f7c177 w sRGB, więc każda się nada.

Mieszaj wPodgląd gradientuKolor środkowyJasnośćChroma
OKLab#f7c7ae86,5%0.065
OKLCH#ffbca386,5%0.199
sRGB#f7c17784,2%0.11
LCH#ffc1b787,7%0.216
HSL#f3444464,4%0.211

Pytania o ten gradient

Jak zrobić gradient fioletowy – żółty w CSS?

Użyj background: linear-gradient(90deg in oklab, #ee82ee, #ffff00). 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 żółty?

Przy mieszaniu w OKLab kolor w połowie między fioletowy a żółty to #f7c7ae. Zwykłe mieszanie w sRGB daje #f7c177.

Jak zrobić gradient fioletowy – żółty w Tailwind CSS?

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

Popularne gradienty