Litbrigða- og blæbrigðavél — heil litatafla úr einum lit

Veldu einn grunnlit og fáðu heila röð frá blæ til brigðis — ljósari blæbrigði blönduð í átt að hvítu fyrir ofan hann, dekkri brigði blönduð í átt að svörtu fyrir neðan hann — hvert þrep með nákvæmum HEX-kóða og ljósleikaprósentu. Þetta er sama tegund af 50-900 kvarða og Tailwind CSS og flest hönnunarkerfi nota, búin til úr hvaða lit sem þú velur.

Hvað er þetta verkfæri?

Litbrigðaröð er röð afbrigða af einum lit á mismunandi ljósleikastigum, notuð víða í hönnun notendaviðmóta fyrir hluti eins og yfirstöðu (hover), óvirk ástand, jaðra og bakgrunna sem þurfa að tengjast vörumerkislit án þess að vera nákvæmlega eins.

Þetta tól breytir grunnlitnum þínum í HSL, heldur litblæ og mettun óbreyttum og færir ljósleika frá um 95% (nánast hvítur blær) niður í um 10% (nánast svart brigði), þar sem upprunalegi liturinn þinn er staðsettur á sínum náttúrulega stað í miðri röðinni.

Af hverju að nota það?

Býr til röð í stíl hönnunarkerfis (eins og 50/100/200.../900 kvarði Tailwind) úr einum lit, ekki bara fastri forstilltri litatöflu.
Veldu 7, 9 eða 11 þrep eftir því hversu nákvæma röð þú þarft.
Hvert þrep sýnir nákvæman HEX-kóða sinn og ljósleikaprósentu — smelltu til að afrita.
Heldur litblæ og mettun óbreyttum yfir alla röðina, svo öll brigði lesast greinilega tengd grunnlitnum í stað þess að reka í átt að gráu.
Ókeypis, samstundis og alfarið staðbundið.

Hvernig á að nota það

Veldu grunnlitinn þinn með litavali eða með því að slá inn HEX-kóða.
Veldu hversu mörg þrep þú vilt í röðinni (7, 9 eða 11).
Lestu HEX-kóða og ljósleikaprósentu hvers brigðis beint á lithnappnum.
Smelltu á hvaða lithnapp sem er til að afrita HEX-kóða hans.

Dæmi

Inntak

#3B82F6 (miðlungsblár), 9 þrep

Úttak

9 brigði frá nánast hvítum blæ (~95% ljósleiki) niður í nánast svart brigði (~10% ljósleiki), þar sem #3B82F6 sjálfur er staðsettur sem miðþrepið

Litblær og mettun haldast óbreytt í öllum 9 þrepunum — aðeins ljósleiki breytist — svo hvert brigði lesist greinilega sem hluti af sömu litafjölskyldu.

Algengar spurningar

Er þetta sama kerfi og Tailwind CSS notar fyrir litakvarða sína?

Þetta er sama grunnhugmyndin (fastur litblær/mettun, breytilegur ljósleiki) en ekki nákvæm eftirlíking af sértækri litatöflu Tailwind — 50-900 kvarðar Tailwind voru handstilltir af hönnuðum, ekki búnir til með einni formúlu. Þetta tól gefur þér sambærilega uppbyggingu búna til úr hvaða lit sem þú velur, sem er gagnlegt þegar grunnliturinn þinn er ekki einn af forstilltum litum Tailwind.

Af hverju lítur liturinn minn nánast eins út í tveimur nálægum þrepum?

Þetta getur gerst nálægt mjög ljósum eða mjög dökkum endum raðarinnar, þar sem upplifaður ljósleiki breytist hægar en talnaprósentan gefur til kynna (þekkt eiginleiki mannlegrar litaskynjunar, ekki sértækt fyrir þetta tól). Að velja færri þrep (7 í stað 11) dreifir ljósleikagildunum lengra í sundur og dregur úr nánast eins lithnöppum.

Get ég notað þessi brigði beint sem sérsniðnar CSS-eigindir?

Já — afritaðu hvern HEX-kóða og límdu hann inn í CSS-breyturnar þínar (t.d. --color-brand-100 til --color-brand-900), og passaðu stöðu í röðinni við hvaða nafnakerfi sem verkefnið þitt notar.

Á ég að nota þetta eða litablandarann?

Ef þú ert að búa til ljósari og dekkri útgáfur af einum lit — yfirstöðu, lúmska bakgrunna, jaðra sem tengjast vörumerkislit — notaðu þessa litbrigðavél. Ef þú þarft í staðinn litinn á milli tveggja ólíkra lita (segjum, þrep milli aðalbláa litarins þíns og aukalitarins appelsínugula), notaðu litablandarann, sem víxlreiknar RGB-rásir tveggja lita í hvaða hlutfalli sem er í stað þess að breyta ljósleika eins litar.

Hvað gerist ef grunnliturinn minn er þegar mjög ljós eða mjög dökkur?

Grunnliturinn er alltaf staðsettur á miðröðinni, með blæ sem stígur upp í um 95% ljósleika fyrir ofan hann og brigði sem stíga niður í um 10% fyrir neðan hann. Ef grunnliturinn þinn er þegar nánast hvítur, þjappast blæhelmingur raðarinnar saman í þröngt ljósleikabil (nánast eins raðir) á meðan brigðahelmingurinn dreifist víða — og öfugt fyrir mjög dökkan grunnlit. Fyrir sem jafnast dreifða röð skaltu byrja á útgáfu af litnum þínum með miðlungs ljósleika (u.þ.b. 40-60% ljósleiki).

Getur hún líka búið til tóna (litinn blandaðan við grátt)?

Nei — þetta tól breytir aðeins ljósleika á meðan mettun helst föst, sem framleiðir blæ og brigði en ekki tóna. Ef þú vilt deyfðari röð skaltu fyrst afmetta grunnlitinn þinn (veldu grárri útgáfu af honum í litavalinu) og búa til röðina úr því; hvert þrep erfir þá lægri mettun.

Litbrigðavélin