Садржај маркетинг

Како можете програмски променити боју фонта на основу позадине? (Светли/тамни режим)

Ако сте посетили Martech Zone у последње време, можда сте приметили да сада нудимо могућност прегледа сајта у светлом или тамном режиму. Само потражите месец или сунце икона поред датума у ​​горњој левој траци за навигацију на сајту.

То је прилично кул функција и ради заиста добро. Када сам покренуо нови алат за конверзију у промените ХЕКС у РГБ, желео сам да заправо прикажем боју коју је корисник покушавао да израчуна. Не само да приказујем боју, већ сам додао и лепу функцију која приказује назив боје. Али то је довело до проблема...

Да је узорак који је приказао боју имао светлу позадину, не бисте могли да прочитате текст који генеришем динамички за узорак. Дакле… Морао сам да направим функцију која поставља боју фонта на основу боје позадине и да ли је било довољно контраста да се види фонт.

ЈаваСцрипт функција за светли или тамни режим

Морао сам да направим функцију где бих могао да пренесем хексадецимални код за боју, а затим да вратим да ли фонт треба да буде бели или црни на основу контраста. Ова ЈаваСцрипт функција је урадила трик...

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';
}

Праг у овој функцији се користи за одређивање да ли је одређена боја светла или тамна. Функција конвертује дати хексадецимални код боје у црвену, зелену и плаву (РГБ) компоненте, затим користи формулу за израчунавање перципиране осветљености боје. Ако је осветљеност изнад прага, функција се враћа #000000, што је хексадецимални код за црну. Ако је осветљеност испод прага, функција се враћа #ffffff, што је хексадецимални код за бело.

Сврха овог прага је да обезбеди да боја текста изабрана за дату боју позадине има довољно контраста да би била лако читљива. Уобичајено правило је да светли текст (нпр. бели или жути) треба да се користи на тамној позадини, а тамни текст (нпр. црни или плави) треба да се користи на светлој позадини. Коришћењем прага за одређивање да ли је боја светла или тамна, функција може аутоматски изабрати одговарајућу боју текста за дату боју позадине.

Користећи горњу функцију, могу програмски применити ЦСС боје фонта на основу боје позадине. Испробајте конвертор и видећете колико добро ради!

Douglas Karr

Douglas Karr је ЦМО оф ОпенИНСИГХТС и оснивача Martech Zone. Доуглас је помогао десетинама успешних МарТецх стартапова, помогао је у дубинској пажњи од преко 5 милијарди долара у Мартецх аквизицијама и инвестицијама, и наставља да помаже компанијама у имплементацији и аутоматизацији њихових продајних и маркетиншких стратегија. Доуглас је међународно признати стручњак за дигиталну трансформацију и МарТецх стручњак и говорник. Даглас је такође објављени аутор Думмие'с водича и књиге о пословном лидерству.

Повезани чланци

Назад на врх дугмета
близу

Адблоцк откривен

Martech Zone је у могућности да вам пружи овај садржај без икаквих трошкова јер ми монетизујемо наш сајт путем прихода од огласа, партнерских веза и спонзорстава. Били бисмо захвални ако бисте уклонили свој блокатор огласа док гледате наш сајт.