Dizajn / Boja
Generator Tailwind skale boja
Pretvorite jednu boju brenda u kompletnu Tailwind CSS paletu od 50 do 950, napravljenu u OKLCH prostoru kao Tailwind boje, i kopirajte je kao Tailwind 4 theme CSS, Tailwind 3 konfiguraciju ili CSS promenljive.
Generator Tailwind skale boja: Svaka nijansa preuzima svetlinu, hromu i blago pomeranje nijanse koje Tailwind palete imaju na tom koraku, izmerene u OKLCH prostoru boja, a zatim se pomera tako da vaša boja tačno odgovara izabranoj nijansi. Sive boje umesto toga prate Tailwind porodice sivih boja. Boje koje sRGB gamut ne može da prikaže prilagođavaju se metodom mapiranja gamuta iz CSS Color 4, kao što to rade pregledači; Tailwind 4 izlaz zadržava OKLCH vrednosti, dok ostali formati koriste hex. Radi 100% lokalno u vašem pregledaču, bez otpremanja datoteka na server.
- Kategorija
- Svakodnevne alatke
- Pokretanja
- U vašem pregledaču
- Trošak
- Besplatno · bez registracije
- Dostupnost
- Spremno za upotrebu
U potpunosti radi u vašem pregledaču
#f2f8ffoklch(97.6% 0.012 250.3)#dfecffoklch(93.9% 0.029 258.1)#bcd9ffoklch(87.6% 0.061 255.8)#8fbeffoklch(79.3% 0.106 256.6)#5e9cffoklch(69.6% 0.16 259.5)#3b82f6oklch(62.3% 0.188 259.8)#2668daoklch(54.2% 0.187 260.6)#1f57b6oklch(47.7% 0.163 260.6)#1f4997oklch(42.3% 0.137 261.4)#20417coklch(38.4% 0.109 261.4)#15274coklch(27.9% 0.073 263.2)CSS (@theme)
@theme {
--color-brand-50: oklch(97.6% 0.012 250.3);
--color-brand-100: oklch(93.9% 0.029 258.1);
--color-brand-200: oklch(87.6% 0.061 255.8);
--color-brand-300: oklch(79.3% 0.106 256.6);
--color-brand-400: oklch(69.6% 0.16 259.5);
--color-brand-500: oklch(62.3% 0.188 259.8);
--color-brand-600: oklch(54.2% 0.187 260.6);
--color-brand-700: oklch(47.7% 0.163 260.6);
--color-brand-800: oklch(42.3% 0.137 261.4);
--color-brand-900: oklch(38.4% 0.109 261.4);
--color-brand-950: oklch(27.9% 0.073 263.2);
}
Nijanse prate promene svetline, hrome i tona u izvornim paletama Tailwind-a, izmerene u OKLCH-u, pa se skala napravljena od Tailwind-ove blue-500 boje razlikuje od Tailwind-ove plave za svega nekoliko jedva primetnih razlika. Boje izvan sRGB opsega prilagođavaju se metodom mapiranja gamuta CSS Color 4.
Korišćenje skale
Uobičajen obrazac koristi 50–100 za pozadine stranica i kartica, 200–300 za ivice, 500–600 za dugmad i linkove, 700 za stanja pri prelasku pokazivačem, a 800–950 za tekst na svetlim pozadinama. Proverite parove teksta i pozadine pomoću provere kontrasta boja.
Da biste jednu boju pretvorili između formata hex, RGB, HSL i OKLCH, koristite konverter boja; ako počinjete od fotografije, koristite izdvajanje palete boja.
Tailwind 4 i OKLCH
Tailwind CSS 4 definiše boje u formatu OKLCH, koji može da opiše boje izvan sRGB opsega na ekranima sa širokim opsegom boja. Izlaz za Tailwind 4 ovde ostaje u okviru sRGB-a, pa boje izgledaju isto na svakom ekranu.
Kako se koristi
- Izaberite boju ili nalepite njen hex kôd.
- Izaberite nijansu kojoj boja treba da odgovara, obično 500, ili prepustite generatoru da je postavi.
- Kopirajte kôd za Tailwind 4, Tailwind 3 ili obične CSS promenljive.
Privatnost i ograničenja
Sve se generiše u vašem pregledaču.
Srodne alatke
Često postavljana pitanja
Zašto OKLCH?
Jednaki koraci svetline u OKLCH prostoru oku izgledaju kao jednaki koraci, bez obzira na nijansu, pa se skala žute i skala plave napravljene na isti način podudaraju po kontrastu, što HSL ne omogućava.
Koja nijansa treba da bude boja mog brenda?
Obično 500 ili 600, gde Tailwind zadržava svoje najizraženije boje. Veoma svetla boja, kao što je pastelna, bolje odgovara nijansi 200 ili 300; izaberite Automatic da je generator postavi na osnovu svetline.
Da li će tekst biti čitljiv na ovim nijansama?
Beli tekst obično zahteva nijansu 600 ili tamniju, a tamni tekst 400 ili svetliju, ali proverite svaki par pomoću alata za proveru kontrasta.
Besplatan alat · pokretanja: u vašem pregledaču · nalog nije potreban