Pehea e hiki ai iā ʻoe ke hoʻololi i ka waihoʻoluʻu font ma muli o ke kumu? (Ke ʻano māmā/ʻeleʻele)
Inā ʻoe i kipa Martech Zone i kēia mau lā, ua ʻike paha ʻoe i kēia manawa ke hāʻawi nei mākou i ka hiki ke nānā i ka pūnaewele ma ke ʻano māmā a ʻeleʻele paha. Huli wale no ka mahina a lā paha ikona ma ka ʻaoʻao o ka lā ma ka ʻaoʻao hema hema o ka paena.
He hiʻohiʻona maikaʻi loa a hana maikaʻi loa ia. I koʻu hoʻomaka ʻana i kahi mea hana hoʻololi hou i hoʻololi i ka HEX i RGB, Makemake au e hōʻike maoli i ke kala a ka mea hoʻohana e hoʻāʻo nei e helu. ʻAʻole wau e hōʻike wale i ke kala, akā ua hoʻohui pū wau i kahi hiʻohiʻona maikaʻi e hōʻike ana i ka inoa o ke kala. Akā ua hoʻopuka kēia i kahi pilikia ...
Inā he māmā ke kua o ka swatch i hōʻike i ke kala, ʻaʻole hiki iā ʻoe ke heluhelu i ka kikokikona aʻu i hoʻopuka ikaika ai no ka swatch. No laila… pono wau e hana i kahi hana e hoʻonohonoho ai i ke kala font e pili ana i ka waihoʻoluʻu hope a i ʻole i lawa ka ʻokoʻa e nānā ai i ka font.
Hana JavaScript no ke ʻano māmā a ʻeleʻele paha
Pono wau e hana i kahi hana e hiki ai iaʻu ke hāʻawi i ke code hex no ke kala, a laila e hoʻihoʻi inā he keʻokeʻo a ʻeleʻele paha ka font ma muli o ka ʻokoʻa. Ua hana kēia hana JavaScript i ka hoʻopunipuni…
function contrast(hex) {
var threshold = 149;
let r = 0, g = 0, b = 0;
// 3 digits
if (hex.length == 4) {
r = "0x" + hex[1] + hex[1];
g = "0x" + hex[2] + hex[2];
b = "0x" + hex[3] + hex[3];
// 6 digits
} else if (hex.length == 7) {
r = "0x" + hex[1] + hex[2];
g = "0x" + hex[3] + hex[4];
b = "0x" + hex[5] + hex[6];
}
return ((r*0.299 + g*0.587 + b*0.114) > threshold) ? '#000000' : '#ffffff';
}
Hoʻohana ʻia ka paepae ma kēia hana e hoʻoholo ai inā he māmā a ʻeleʻele paha kekahi kala. Hoʻololi ka hana i ke code kala hexadecimal i hāʻawi ʻia i kona ʻulaʻula, ʻōmaʻomaʻo, a me ka uliuli (RGB) nā ʻāpana, a laila hoʻohana i kahi ʻano e helu ai i ka ʻōlinolino ʻike ʻia o ke kala. Inā ʻoi aku ka ʻōlinolino ma luna o ka paepae, hoʻi ka hana #000000
, ʻo ia ke code hex no ka ʻeleʻele. Inā aia ka ʻōlinolino ma lalo o ka paepae, hoʻi ka hana #ffffff
, ʻo ia ke code hex no ke keʻokeʻo.
ʻO ke kumu o kēia paepae e hōʻoia i ka ʻokoʻa o ke kala kikokikona i koho ʻia no ke kala hope i hāʻawi ʻia i hiki ke maʻalahi ke heluhelu ʻia. ʻO ke kānāwai maʻamau, ʻo ke kikokikona māmā (e laʻa ke keʻokeʻo a i ʻole melemele) pono ke hoʻohana ʻia ma kahi ʻeleʻele ʻeleʻele, a ʻo ke kikokikona ʻeleʻele (e laʻa, ʻeleʻele a polū paha) pono ke hoʻohana ʻia ma ke kua māmā. Ma ka hoʻohana ʻana i ka paepae e hoʻoholo ai inā he māmā a ʻeleʻele paha kahi kala, hiki i ka hana ke koho ʻokoʻa i ke kala kikokikona kūpono no kahi kala i hāʻawi ʻia.
Ke hoʻohana nei i ka hana i luna, hiki iaʻu ke hoʻohana i ka CSS font-color ma ke ʻano o ke kala hope. E hoʻāʻo i ka mea hoʻololi a ʻike ʻoe i ka maikaʻi o ia hana!