maʻiʻo ke kūʻai akuʻana

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!

Douglas Karr

Douglas Karr he CMO o OpenINSIGHTS a me ka mea nana i hookumu i ka Martech Zone. Ua kōkua ʻo Douglas i ka nui o nā hoʻomaka ʻana o MarTech, ua kōkua i ka hoʻomaʻamaʻa pono ʻana ma luna o $ 5 bil i nā loaʻa a me nā hoʻopukapuka kālā ʻo Martech, a hoʻomau i ke kōkua ʻana i nā hui i ka hoʻokō ʻana a me ka hoʻomaʻamaʻa ʻana i kā lākou kūʻai aku a me nā hoʻolālā kūʻai. ʻO Douglas kahi hoʻololi kikohoʻe i ʻike ʻia ma ka honua a me ka loea a me ka ʻōlelo a MarTech. He mea kākau ʻo Douglas i kahi alakaʻi a Dummie a me kahi puke alakaʻi ʻoihana.

nā Articles

E hoʻi i ke pihiʻaoʻao
kokoke

ʻIke ʻia ʻo Adblock

Martech Zone hiki iā ia ke hāʻawi iā ʻoe i kēia ʻike me ka uku ʻole no ka mea ke hoʻolilo nei mākou i kā mākou pūnaewele ma o ka loaʻa kālā hoʻolaha, nā loulou pili, a me nā kākoʻo. Mahalo mākou inā e wehe ʻoe i kāu mea hoʻolaha hoʻolaha i kou nānā ʻana i kā mākou pūnaewele.