අද කාලේ වෙබ් අඩවි හදන කොට අපි සාමාන්යයෙන් HEX, RGB එහෙමත් නැත්නම් HSL වගේ ක්රමනේ පාවිච්චි කරන්නේ. හැබැයි දැන් ඒ හැම එකකටම වඩා සුපිරි විදිහක් ඇවිත් තියෙනවා. ඒක තමයි OKLCH. සරලවම කිව්වොත්, මේක හැදලා තියෙන්නේ අපේ ඇසට පාට ඇත්තටම පේන විදිහටම ගැලපෙන්නයි!
1. පරණ ක්රමවල (HSL) තියෙන අවුල මොකක්ද?
අපි වැඩියෙන්ම පාවිච්චි කරන HSL ක්රමයේ පොඩි ප්රශ්නයක් තියෙනවා. ඒ තමයි අපි එකම දීප්තිය දුන්නත් සමහර පාට අපේ ඇසට පේන්නේ වෙනස් විදිහකටයි.
ඔන්න උදාහරණයක්: HSL පාවිච්චි කරලා කහ පාටයි නිල් පාටයි දෙකේම දීප්තිය (Lightness) එකම ගාණට හැදුවොත්, අපේ ඇසට කහ පාට ගොඩක් දීප්තිමත්ව පෙනෙනවා, හැබැයි නිල් පාට පේන්නේ අඳුරු පාටක් විදිහටයි. මේ නිසා එකම ලස්සනට පාට ටිකක් ගළපාගන්න එක හරිම අමාරු වැඩක්!
2. OKLCH වල තියෙන්නේ මොනවාද?
මේ පද්ධතිය ප්රධාන කොටස් තුනකින් හැදිලා තියෙනවා:
- L (Lightness): අපේ ඇසට ඇත්තටම පේන දීප්තිය. (0 ඉඳන් 100% වෙනකම්).
- C (Chroma): පාට කෙතරම් තදින් පේන්න ඕනෙද කියන එක. මේ අගය වැඩි වෙද්දී පාට තදින් පේනවා.
- H (Hue): මේකෙන් තමයි පාට තෝරන්නේ (රතුද, නිල්ද, කොළද වගේ). මේක 0 ඉඳන් 360 වෙනකම් තියෙනවා.
3. OKLCH පාවිච්චි කළොත් ලැබෙන වාසි
- ලස්සනට පාට ගැලපීම: ඔයා එකම දීප්තිය යටතේ පාට කිහිපයක් තෝරාගත්තොත්, ඒ හැම එකක්ම ඇත්තටම එකම විදිහට ලස්සනට පෙනෙනවා. වෙබ් අඩවියක පෙනුම ලස්සන කරන්න මේක ගොඩක් උදව් වෙනවා!
- තද පාට පාවිච්චි කිරීම: දැන් කාලේ එන අලුත් screen වල පෙන්වන්න පුළුවන් ඉතාමත් තද සහ ලස්සන පාට පාවිච්චි කරන්න මේ ක්රමයෙන් පුළුවන්.
- Dark සහ Light Mode: වෙබ් අඩවියක Dark mode එක හදන කොට, පාට වෙනස් නොකර දීප්තිය විතරක් අඩු වැඩි කරලා හරිම ලෙහෙසියෙන් වැඩේ කරගන්න පුළුවන්.
4. CSS වලදී මේක පාවිච්චි කරන්නේ මෙහෙමයි
දැන් තියෙන හැම අලුත් Browser එකකම වගේ මේක වැඩ කරනවා!
/* හරිම සරලයි */
.brand-button {
background-color: oklch(65% 0.15 260);
}
/* CSS Variables එක්ක පාවිච්චි කරන කොට තවත් ලෙහෙසියි */
:root {
–brand-hue: 260;
–brand-chroma: 0.15;
–brand-light: 65%;
–primary: oklch(var(–brand-light) var(–brand-chroma) var(–brand-hue));
}
/* Mouse එක උඩට අරන් යන කොට (Hover) දීප්තිය විතරක් වෙනස් කරන්න */
.brand-button:hover {
background-color: oklch(55% var(–brand-chroma) var(–brand-hue));
}
5. හැමෝටම පේන විදිහට හදමු
OKLCH පාවිච්චි කරන කොට වෙබ් අඩවියක අකුරු සහ පසුබිම් පාට අතර තියෙන වෙනස (Contrast) අපේ ඇසට පේන විදිහටම මැන ගන්න පුළුවන්. ඉතින් ඇස් පෙනීම දුර්වල කෙනෙක්ට වුණත් ඔයාගේ වෙබ් අඩවිය ලෙහෙසියෙන් කියවන්න පුළුවන් විදිහට හදන්න මේක ලොකු උදව්වක්!
අවසාන අදහස
ඔයා තාමත් පරණ HEX හෝ HSL ක්රම පාවිච්චි කරනවා නම්, අදම OKLCH වලට මාරු වෙලා බලන්න. ඔයාගේ වෙබ් අඩවියට වඩාත් වෘත්තීය සහ ලස්සන පෙනුමක් ලබාගන්න මේක හොඳම පියවරක් වේවි!
උපුටා ගැනීම : Nelaka Withanage
