ווי קענען איר פּראָגראַממאַטיק טוישן פאָנט קאָליר באזירט אויף די הינטערגרונט? (ליכט / פינצטער מאָדע)
אויב איר'ווע באזוכט Martech Zone לעצטנס, איר קען האָבן באמערקט אַז מיר איצט פאָרשלאָגן די פיייקייט צו זען דעם פּלאַץ אין ליכט אָדער טונקל מאָדע. נאָר זוכן פֿאַר די לבנה אָדער זון ייקאַן ווייַטער צו די דאַטע אין די שפּיץ לינקס נאַוויגאַציע באַר אויף דעם פּלאַץ.
עס איז אַ שיין קיל שטריך און עס אַרבעט טאַקע גוט. ווען איך לאָנטשט אַ נייַ קאַנווערזשאַן געצייַג צו טוישן HEX צו RGB, איך געוואלט צו אַקטשאַוואַלי אַרויסווייַזן די קאָליר וואָס דער באַניצער איז טריינג צו רעכענען. איך ניט בלויז אַרויסווייַזן די קאָליר, אָבער איך אויך צוגעגעבן אַ פייַן שטריך וואָס געוויזן די נאָמען פון די קאָליר. אָבער דאָס האָט געפֿירט אַ פּראָבלעם ...
אויב די סוואַטש וואָס געוויזן די קאָליר האט אַ ליכט הינטערגרונט, איר וואָלט נישט קענען צו לייענען דעם טעקסט וואָס איך דזשענערייט דינאַמיש פֿאַר די סוואַטש. אַזוי ... איך האט צו שאַפֿן אַ פֿונקציע וואָס שטעלן די שריפֿט קאָליר באזירט אויף הינטערגרונט פֿאַרב און צי עס איז גענוג קאַנטראַסט צו זען די שריפֿט.
דזשאַוואַסקריפּט פונקציע פֿאַר ליכט אָדער טונקל מאָדע
איך דארף צו שאַפֿן אַ פֿונקציע וווּ איך קען פאָרן די העקס קאָד פֿאַר די קאָליר, און צוריקקומען צי די שריפֿט זאָל זיין ווייַס אָדער שוואַרץ באזירט אויף די קאַנטראַסט. די דזשאַוואַסקריפּט פונקציע האט די קונץ ...
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
, וואָס איז די העקס קאָד פֿאַר ווייַס.
דער ציל פון דעם שוועל איז צו ענשור אַז די טעקסט קאָליר אויסדערוויילט פֿאַר די געגעבן הינטערגרונט פֿאַרב האט גענוג קאַנטראַסט צו זיין לייכט ליינעוודיק. א פּראָסט הערשן פון גראָבער פינגער איז אַז ליכט טעקסט (למשל ווייַס אָדער געל) זאָל זיין געוויינט אויף אַ טונקל הינטערגרונט, און טונקל טעקסט (למשל שוואַרץ אָדער בלוי) זאָל זיין געוויינט אויף אַ ליכט הינטערגרונט. דורך ניצן אַ שוועל צו באַשליסן צי אַ קאָליר איז ליכט אָדער טונקל, די פֿונקציע קענען אויטאָמאַטיש קלייַבן די צונעמען טעקסט קאָליר פֿאַר אַ געגעבן הינטערגרונט פֿאַרב.
ניצן די אויבן פֿונקציע, איך קענען פּראָגראַממאַטיק צולייגן די שריפֿט-קאָליר CSS באזירט אויף די הינטערגרונט פֿאַרב. פּרובירן די קאַנווערטער און איר וועט זען ווי גוט עס אַרבעט!