Búðu til litapallettu, sjáðu hana lifna við í Tailwind.
Inngangur
Veldu grunnlit: límdu inn hex-gildi, dragðu í litavalið eða veldu úr Tailwind-töflunni. Við búum til fullan 50–950 Tailwind-skala, litasamsetningar úr litafræðinni og næsta Tailwind-lit, með tilbúnum @theme- og config-kóða sem þú afritar beint inn í verkefnið. Allt gerist í vafranum, ekkert vistast.
Grunnlitur
Hex-gildi, litavalið eða slembilitur. Allt reiknast út frá þessum lit.
#2B7DBA
oklch 0.57 0.122 245° · Δ0.026 frá sky-600
Litapalletta
Stokkaðu fimm-lita sett og smelltu á einn til að hlaða honum sem grunn. Skalinn að neðan endurbyggir út frá honum.
Fyrsti reiturinn er grunnliturinn. Hinir fylgja honum. Smelltu á lit til að gera hann að grunni · lásinn heldur reit þegar þú stokkar.
Nota þessa liti í tilboðiTailwind-skali
Fullur 50–950 skali búinn til úr grunnlitnum. Smelltu á tón til að afrita hex-gildið.
Forskoðun · @theme
@theme {
--color-brand-50: #ecf7ff;
--color-brand-100: #daecfd;
--color-brand-200: #beddf9;
--color-brand-300: #97c6ee;
--color-brand-400: #65a6dc;
--color-brand-500: #4292d0;
--color-brand-600: #2b7dba;
--color-brand-700: #1b6aa1;
--color-brand-800: #195886;
--color-brand-900: #184a70;
--color-brand-950: #022641;
}Litasamsetningar
Klassískar samsetningar úr litafræðinni, reiknaðar í OKLCH. Smelltu til að afrita.
Andstæða
2Skyldir tónar
3Þrístæða
3Fjórstæða
4Klofin andstæða
3Einlitur
5Tailwind-litatafla
Allir sjálfgefnu Tailwind-litirnir. Næsti litur við grunninn er merktur.
Smelltu á reit til að gera hann að grunnlit.
Hvernig þetta virkar
Skynrænn litaútreikningur
Skalinn og samsetningarnar eru reiknaðar í OKLCH, sama litarýminu og Tailwind v4 notar, svo tónarnir haldast jafnir fyrir augað í stað þess að detta í of dökka eða of mettaða tóna.
Festur á réttan tón
Grunnliturinn þinn er settur nákvæmlega í þann 50–950 reit sem passar við birtustig hans, og restin af skalanum er byggð í kringum hann.
Næsti Tailwind-litur
Við berum litinn saman við alla sjálfgefnu Tailwind-litina og sýnum þér næsta nafn og tón, svo þú getir haldið þig við staðlaða litakerfið ef þú vilt.
Tilbúið til afritunar
Afritaðu heilan @theme-blokk fyrir Tailwind v4 eða klassískt config-snið og límdu beint inn í verkefnið þitt.
Fleiri ókeypis verkfæri
Næsta skref
Þarftu hjálp við að koma litunum í alvöru vef? Við hönnum og smíðum vefsíður og vefforrit með Tailwind, Next.js og Supabase.
Fáðu tilboð