Litatóki ferðast sjaldan í einu sniði. Hann byrjar sem swatch í Figma, verður hex í athugasemd, CSS-breyta í kóða og svo rgb(), hsl() eða oklch() þegar teymið vinnur með kerfisbundnari pallettu. Tíminn tapast ekki í stærðfræðinni, heldur í litlu handoffunum þar sem réttur litur er til, en ekki í réttu sniði.
Converty Litabreytirinn hjálpar með því að láta eitt upprunagildi verða að mörgum nothæfum úttökum á sama stað: HEX, RGB, HSL, OKLCH, OKLAB, CSS og Tailwind CSS vænum gildum.
Vandinn er þýðing milli kerfa
Þegar liturinn kemur til engineering veit teymið oft þegar hvaða lit það vill. Vandinn byrjar þegar sama gildi þarf að þjóna mörgum notkunum: hönnunarsýn, CSS útfærsla, token-kerfi, Tailwind theme og stundum contrast-athugun.
Ef hver aðili endurskrifar gildið handvirkt getur drift orðið til. Betra er að byrja á einum uppruna og búa öll úttök til út frá honum.
OKLCH skiptir máli í token-vinnu
HEX og RGB eru gagnleg, en OKLCH hjálpar þegar teymi vill hugsa um birtu og tengsl í pallettu á fyrirsjáanlegri hátt. Það skiptir máli fyrir hover-stöður, semantic tokens og ramp sem á að líta jafn út, ekki bara vera tæknilega umbreytanlegur.
Gott handoff á því ekki að enda við "við erum með hex". Það á að sýna sniðin sem hönnun, frontend og hönnunarkerfi þurfa.
Hagnýtt handoff
- Límdu upprunalitinn í Litabreytinn.
- Skoðaðu HEX, RGB, HSL, OKLCH og OKLAB.
- Notaðu contrast-vísbendingu sem hraða athugun.
- Afritaðu CSS-breytu eða Tailwind-vænt snippet.
- Settu sama gildi í token- eða theme-kerfi án handvirkra endurritana.
Þetta er ekki í staðinn fyrir hönnunarákvörðun. Það fjarlægir bara óþarfa sniðþýðingu.
Þegar token verður config
Litatóki endar oft í JSON-, YAML- eða typed config áður en hann nær loka-UI. Þá tengist litahandoffið gagnasniðsvinnu. Hvernig forritarar kemba config snippets með JSON, YAML og TOML hlið við hlið sýnir hvernig sama uppbyggingarhugsun hjálpar þar.
Opnaðu Litabreytinn þegar þú þarft að færa tóka í production, og lestu Hvernig á að breyta HEX, RGB, HSL og OKLCH litum hraðar fyrir grunnvinnuflæðið.
