Gradient żółty – koralowy
Płynny gradient CSS żółty – koralowy, mieszany w OKLab, więc środek zostaje czysty. Zmień kąt, dodaj kolory i skopiuj kod.
Kolory
OKLab utrzymuje jasny środek. sRGB to sposób mieszania starych przeglądarek, który często szarzeje w środku.
CSS
background: linear-gradient(90deg, #ffff00, #fff022, #ffe030, #ffd13a, #ffc141, #ffb146, #ffa14a, #ff904e, #ff7f50);
background: linear-gradient(90deg in oklab, #ffff00, #ff7f50);Tailwind CSS v4
bg-linear-90/oklab from-[#ffff00] to-[#ff7f50]Kolory wzdłuż gradientu
Jak żółty i koralowy 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 #ffc141 w OKLab i #ffbf28 w sRGB, więc każda się nada.
| Mieszaj w | Podgląd gradientu | Kolor środkowy | Jasność | Chroma |
|---|---|---|---|---|
| OKLab | #ffc141 | 85,2% | 0.156 | |
| OKLCH | #ffbd3a | 85,2% | 0.19 | |
| sRGB | #ffbf28 | 84,1% | 0.164 | |
| LCH | #ffbd46 | 85,4% | 0.171 | |
| HSL | #ffb028 | 81,4% | 0.163 |
Pytania o ten gradient
Jak zrobić gradient żółty – koralowy w CSS?
Użyj background: linear-gradient(90deg in oklab, #ffff00, #ff7f50). 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 żółty a koralowy?
Przy mieszaniu w OKLab kolor w połowie między żółty a koralowy to #ffc141. Zwykłe mieszanie w sRGB daje #ffbf28.
Jak zrobić gradient żółty – koralowy w Tailwind CSS?
W Tailwind CSS v4 użyj klas bg-linear-90/oklab from-[#ffff00] to-[#ff7f50].