CodeKitHubHvað er þetta verkfæri?
Litir á vefnum eru skrifaðir í nokkrum jafngildum formum, öllum skilgreindum í CSS Color specification á MDN. HEX (#4f46e5) er þjappaða formið notað alls staðar í CSS og hönnunarafhendingum. RGB (rgb(79, 70, 229)) tilgreinir rauða, græna og bláa þætti beint, sem kóði þarf oft. HSL (hsl(243, 75%, 59%)) lýsir litblæ, mettun og ljósleika — leiðandi formið til að stilla lit, eins og að gera hann dekkri eða minna mettaðan.
Þau lýsa öll sama litnum; þetta verkfæri breytir nákvæmlega á milli þeirra og sýnir forskoðun svo þú getir staðfest að þetta sé liturinn sem þú meintir.
Af hverju að nota það?
- Tekur við hvaða formi sem er — HEX (3 eða 6 stafir), RGB eða HSL — og gefur öll formin út.
- Lifandi forskoðunarreitur svo þú sjáir litinn, ekki bara tölur.
- Sjónrænn litaválir þegar þú vilt frekar velja með auganu.
- Einn smellur til að afrita hvert form, tilbúið fyrir CSS eða kóða.
- Ókeypis, samstundis, engin upphleðsla.
Hvernig á að nota það
- Skrifaðu eða límdu lit: #4f46e5, rgb(79, 70, 229) eða hsl(243, 75%, 59%) virka öll.
- Eða smelltu á litavalið og veldu sjónrænt.
- Lestu öll þrjú formin í niðurstöðunum og athugaðu forskoðunarreitinn.
- Smelltu á "Copy" við hliðina á forminu sem þú þarft.
Dæmi
Inntak
#4f46e5Úttak
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Þrjú táknkerfi, einn sami litur.
Hvaða form ættir þú að nota?
Öll þrjú lýsa nákvæmlega sama litnum — valið snýst um hvert þeirra er auðveldast að vinna með fyrir verkefnið hverju sinni, ekki um nákvæmni.
| Form | Best fyrir | Af hverju |
|---|---|---|
| HEX (#4f46e5) | CSS, hönnunarafhendingar, fljótt afrit-og-líma | Stystur til að skrifa og líma; almenna formið í hönnunarverkfærum eins og Figma. |
| RGB (rgb(79,70,229)) | Kóði sem breytir rásum beint, canvas/myndavinnsla | Passar við hvernig grafíkforrit og myndgögn í raun geyma lit. |
| HSL (hsl(243,75%,59%)) | Stilla lit — ljósari, dekkri, meira/minna mettaður | Ljósleiki og mettun eru aðskildar tölur sem þú getur stillt beint, ólíkt HEX/RGB þar sem allar rásir breytast. |
Algeng notkunartilvik
- Velja lit sjónrænt í hönnunarverkfæri, breyta honum síðan í nákvæma HEX eða RGB gildið sem þarf í CSS eða kóða.
- Búa til sett af tengdum blæbrigðum (ljósari/dekkri afbrigði) með því að breyta í HSL, stilla ljósleika, og breyta til baka.
- Passa vörumerkislit yfir mismunandi verkfæri sem hvert um sig vænta ólíks forms — merkjaskrá í RGB, stílhandbók í HEX, CSS breyta sem þarf HSL fyrir þemastillingu.
- Staðfesta að litur dreginn úr skjámynd eða hönnunarskrá (oft gefinn sem RGB) passar við HEX gildið í stílblaði.
Algengar spurningar
Hvenær ætti ég að nota HSL í stað HEX eða RGB?
Þegar þú vilt hugsa um lit rökrétt. Að gera lit 10% dekkri í HSL þýðir að lækka ljósleika um 10 stig; í HEX eða RGB þyrftirðu að reikna alla rásirnar upp á nýtt. Hönnunarkerfi skilgreina oft litaspjöld í HSL einmitt af þessari ástæðu.
Styður verkfærið 3ja stafa HEX eins og #fff?
Já. #fff er stytting fyrir #ffffff — hver tölustafur er tvöfaldaður. Bæði form eru samþykkt og úttakið sýnir fulla 6 stafa formið.
Hvað með gagnsæi (alpha)?
Þetta verkfæri breytir ógegnsæjum litum (RGB/HSL gildunum). Ef þú þarft gagnsæi, bættu alpha við sjálf(ur): rgba(79, 70, 229, 0.5) eða #4f46e580 — litahlutinn helst óbreyttur.
Af hverju eru HSL gildin mín 1 stigi öðruvísi en í öðru verkfæri?
Ávölun. HSL↔RGB breyting framleiðir brotgildi, og verkfæri ávala mismunandi. ±1 munur í litblæ eða prósentu er ósýnilegur og eðlilegur.
Eru litanöfn eins og 'red' studd?
Ekki í fasa 1 — verkfærið einbeitir sér að tölulegu formunum þremur sem forritarar breyta mest. Sláðu inn HEX/RGB/HSL gildi litarins, eða veldu hann sjónrænt með litavalinu.
Hvenær ætti ég að nota HEX, RGB eða HSL?
Ef þú þarft gagnsæi, notaðu 8 stafa HEX (#RRGGBBAA) eða rgba() — 6 stafa HEX hefur enga alpha-rás. Ef þú vilt ljósari eða dekkri afbrigði af sama lit, er HSL auðveldast: haltu litblæ og mettun föstum og breyttu aðeins ljósleikatölunni. Fyrir einfalt afrit-og-líma inn í CSS eða hönnunarverkfæri er 6 stafa HEX enn almennasta viðurkennda formið.