Przejdź do próbnika kolorów

Gradient zielony – morski

Płynny gradient CSS zielony – morski, 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, #008000, #008024, #008137, #008146, #008153, #00815f, #00816a, #008075, #008080);
background: linear-gradient(90deg in oklab, #008000, #008080);

Tailwind CSS v4

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

Kolory wzdłuż gradientu

7

Jak zielony i morski 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 #008153 w OKLab i #008040 w sRGB, więc każda się nada.

Mieszaj wPodgląd gradientuKolor środkowyJasnośćChroma
OKLab#00815353,1%0.122
OKLCH#00835e53,1%0.135
sRGB#00804052,5%0.138
LCH#00825952,9%0.137
HSL#00804052,5%0.138

Pytania o ten gradient

Jak zrobić gradient zielony – morski w CSS?

Użyj background: linear-gradient(90deg in oklab, #008000, #008080). 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 zielony a morski?

Przy mieszaniu w OKLab kolor w połowie między zielony a morski to #008153. Zwykłe mieszanie w sRGB daje #008040.

Jak zrobić gradient zielony – morski w Tailwind CSS?

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