Litir stoppa oft á milli hönnunar og útfærslu vegna þess að sama gildi þarf að birtast í mörgum sniðum. Hönnunin gefur hex-gildi, CSS þarf rgb() eða hsl(), hönnunarkerfið vill OKLCH, og Tailwind-þemað þarf afritanlegt snippet. Vandinn er sjaldan liturinn sjálfur. Vandinn er endurritunin.
Converty Litabreytirinn tekur einn innslátt og sýnir mörg jafngild úttök: HEX, RGB, HSL, OKLCH, OKLAB, CSS og Tailwind-væn gildi. Það gerir litinn flytjanlegri á milli hönnunar, kóða og token-vinnu.
Byrjaðu á einum uppruna
Öruggasta leiðin er að líma eitt upprunagildi og búa til allt annað út frá því. Þá minnkar hættan á að einn aðili noti gamalt hex-gildi, annar handskrifað rgb() og sá þriðji aðra útgáfu í token-skrá.
Þegar liturinn er parse-aður á einum stað geturðu borið saman úttök og afritað það sem næsta skref þarf. Þetta er sérstaklega gagnlegt þegar liturinn fer úr Figma yfir í CSS breytur, theme config eða Tailwind CSS.
Af hverju OKLCH?
HEX, RGB og HSL eru enn algeng og gagnleg. OKLCH og OKLAB eru hins vegar betri þegar þú vinnur með birtu, stig og tengsl í pallettu. Þau hjálpa teymum að hugsa um litatóna á perceptual hátt, sem getur skipt máli fyrir hover-stöður, semantic tokens og hönnunarkerfi sem þurfa fyrirsjáanlega þróun.
Það þýðir ekki að allt þurfi að verða OKLCH. Það þýðir að gott litaverkfæri ætti að sýna OKLCH þegar það hjálpar næsta handoffi.
Hagnýtt handoff
Venjulegt ferli getur verið svona:
- Límdu litinn í Litabreytinn.
- Staðfestu að innslátturinn hafi verið parse-aður rétt.
- Skoðaðu HEX, RGB, HSL, OKLCH og OKLAB úttök.
- Notaðu birtuskilavísbendinguna sem hraða ákvörðunarhjálp fyrir ljósan eða dökkan texta.
- Afritaðu CSS breytu eða Tailwind-vænt úttak fyrir næsta skref.
Þetta kemur ekki í stað hönnunarskoðunar, en dregur úr handvirkri endurritun.
Þegar litur verður config
Litatoken fer oft fyrr í config en teymi búast við. Theme-gildi geta endað í JSON-skrá, YAML-blokk eða typed config. Þá verður liturinn ekki bara sjónræn ákvörðun heldur líka gagnasniðsvandamál.
Þess vegna tengist þessi workflow Hvernig forritarar kemba config snippets með JSON, YAML og TOML hlið við hlið. Þegar token verður gögn þarf að skoða bæði litinn og uppbygginguna.
Opnaðu Litabreytinn þegar þú þarft að færa lit hraðar á milli handoffa, og skoðaðu Hvernig hönnunar- og frontend-teymi færa litatóka frá handoff í production hraðar þegar liturinn er hluti af stærra token-ferli.
