ವಿಷಯ ಮಾರ್ಕೆಟಿಂಗ್

ಹಿನ್ನೆಲೆಯ ಆಧಾರದ ಮೇಲೆ ಫಾಂಟ್ ಬಣ್ಣವನ್ನು ನೀವು ಹೇಗೆ ಪ್ರೋಗ್ರಾಮಿಕ್ ಆಗಿ ಬದಲಾಯಿಸಬಹುದು? (ಲೈಟ್/ಡಾರ್ಕ್ ಮೋಡ್)

ನೀವು ಭೇಟಿ ನೀಡಿದ್ದರೆ 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';
}

ನಿರ್ದಿಷ್ಟ ಬಣ್ಣವು ಬೆಳಕು ಅಥವಾ ಗಾಢವಾಗಿದೆಯೇ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸಲು ಈ ಕಾರ್ಯದಲ್ಲಿನ ಮಿತಿಯನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಕಾರ್ಯವು ಕೊಟ್ಟಿರುವ ಹೆಕ್ಸಾಡೆಸಿಮಲ್ ಬಣ್ಣದ ಕೋಡ್ ಅನ್ನು ಅದರ ಕೆಂಪು, ಹಸಿರು ಮತ್ತು ನೀಲಿ ಬಣ್ಣಕ್ಕೆ ಪರಿವರ್ತಿಸುತ್ತದೆ (RGB) ಘಟಕಗಳು, ನಂತರ ಬಣ್ಣದ ಗ್ರಹಿಸಿದ ಹೊಳಪನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಸೂತ್ರವನ್ನು ಬಳಸುತ್ತದೆ. ಹೊಳಪು ಮಿತಿಗಿಂತ ಮೇಲಿದ್ದರೆ, ಕಾರ್ಯವು ಹಿಂತಿರುಗುತ್ತದೆ #000000, ಇದು ಕಪ್ಪುಗೆ ಹೆಕ್ಸ್ ಕೋಡ್ ಆಗಿದೆ. ಹೊಳಪು ಮಿತಿಗಿಂತ ಕೆಳಗಿದ್ದರೆ, ಕಾರ್ಯವು ಹಿಂತಿರುಗುತ್ತದೆ #ffffff, ಇದು ಬಿಳಿಯ ಹೆಕ್ಸ್ ಕೋಡ್ ಆಗಿದೆ.

ಈ ಮಿತಿಯ ಉದ್ದೇಶವು ನೀಡಲಾದ ಹಿನ್ನೆಲೆ ಬಣ್ಣಕ್ಕಾಗಿ ಆಯ್ಕೆ ಮಾಡಲಾದ ಪಠ್ಯದ ಬಣ್ಣವು ಸುಲಭವಾಗಿ ಓದಲು ಸಾಕಷ್ಟು ವ್ಯತಿರಿಕ್ತತೆಯನ್ನು ಹೊಂದಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು. ಹೆಬ್ಬೆರಳಿನ ಸಾಮಾನ್ಯ ನಿಯಮವೆಂದರೆ ಬೆಳಕಿನ ಪಠ್ಯವನ್ನು (ಉದಾ ಬಿಳಿ ಅಥವಾ ಹಳದಿ) ಗಾಢ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಬಳಸಬೇಕು ಮತ್ತು ಗಾಢ ಪಠ್ಯವನ್ನು (ಉದಾ ಕಪ್ಪು ಅಥವಾ ನೀಲಿ) ಬೆಳಕಿನ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಬಳಸಬೇಕು. ಬಣ್ಣವು ಬೆಳಕು ಅಥವಾ ಗಾಢವಾಗಿದೆಯೇ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸಲು ಮಿತಿಯನ್ನು ಬಳಸುವ ಮೂಲಕ, ನಿರ್ದಿಷ್ಟ ಹಿನ್ನೆಲೆ ಬಣ್ಣಕ್ಕೆ ಸೂಕ್ತವಾದ ಪಠ್ಯ ಬಣ್ಣವನ್ನು ಕಾರ್ಯವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಆಯ್ಕೆ ಮಾಡಬಹುದು.

ಮೇಲಿನ ಕಾರ್ಯವನ್ನು ಬಳಸಿಕೊಂಡು, ನಾನು ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಆಧರಿಸಿ ಫಾಂಟ್-ಬಣ್ಣದ CSS ಅನ್ನು ಪ್ರೋಗ್ರಾಮಿಕ್ ಆಗಿ ಅನ್ವಯಿಸಬಹುದು. ಪರಿವರ್ತಕವನ್ನು ಪರೀಕ್ಷಿಸಿ ಮತ್ತು ಅದು ಎಷ್ಟು ಚೆನ್ನಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂಬುದನ್ನು ನೀವು ನೋಡುತ್ತೀರಿ!

Douglas Karr

Douglas Karr ನ ಸಿಎಂಒ ಆಗಿದೆ ಓಪನ್‌ಇನ್‌ಸೈಟ್‌ಗಳು ಮತ್ತು ಸ್ಥಾಪಕ Martech Zone. ಡಗ್ಲಾಸ್ ಹಲವಾರು ಯಶಸ್ವಿ ಮಾರ್ಟೆಕ್ ಸ್ಟಾರ್ಟ್‌ಅಪ್‌ಗಳಿಗೆ ಸಹಾಯ ಮಾಡಿದ್ದಾರೆ, ಮಾರ್ಟೆಕ್ ಸ್ವಾಧೀನಗಳು ಮತ್ತು ಹೂಡಿಕೆಗಳಲ್ಲಿ $5 ಬಿಲಿಯನ್‌ಗಿಂತ ಹೆಚ್ಚಿನ ಪರಿಶ್ರಮದಲ್ಲಿ ಸಹಾಯ ಮಾಡಿದ್ದಾರೆ ಮತ್ತು ಕಂಪನಿಗಳು ತಮ್ಮ ಮಾರಾಟ ಮತ್ತು ಮಾರುಕಟ್ಟೆ ತಂತ್ರಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಮತ್ತು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಲು ಸಹಾಯ ಮಾಡುವುದನ್ನು ಮುಂದುವರೆಸಿದ್ದಾರೆ. ಡೌಗ್ಲಾಸ್ ಅಂತರಾಷ್ಟ್ರೀಯವಾಗಿ ಗುರುತಿಸಲ್ಪಟ್ಟ ಡಿಜಿಟಲ್ ರೂಪಾಂತರ ಮತ್ತು ಮಾರ್ಟೆಕ್ ತಜ್ಞ ಮತ್ತು ಸ್ಪೀಕರ್. ಡೌಗ್ಲಾಸ್ ಅವರು ಡಮ್ಮೀಸ್ ಗೈಡ್ ಮತ್ತು ವ್ಯಾಪಾರ ನಾಯಕತ್ವ ಪುಸ್ತಕದ ಪ್ರಕಟಿತ ಲೇಖಕರೂ ಆಗಿದ್ದಾರೆ.

ಸಂಬಂಧಿತ ಲೇಖನಗಳು

ಮೇಲಿನ ಬಟನ್ಗೆ ಹಿಂತಿರುಗಿ
ಮುಚ್ಚಿ

ಆಡ್‌ಬ್ಲಾಕ್ ಪತ್ತೆಯಾಗಿದೆ

Martech Zone ಜಾಹೀರಾತು ಆದಾಯ, ಅಂಗಸಂಸ್ಥೆ ಲಿಂಕ್‌ಗಳು ಮತ್ತು ಪ್ರಾಯೋಜಕತ್ವಗಳ ಮೂಲಕ ನಾವು ನಮ್ಮ ಸೈಟ್‌ನಿಂದ ಹಣಗಳಿಸುವುದರಿಂದ ಯಾವುದೇ ವೆಚ್ಚವಿಲ್ಲದೆ ಈ ವಿಷಯವನ್ನು ನಿಮಗೆ ಒದಗಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ನೀವು ನಮ್ಮ ಸೈಟ್ ಅನ್ನು ವೀಕ್ಷಿಸಿದಾಗ ನಿಮ್ಮ ಜಾಹೀರಾತು ಬ್ಲಾಕರ್ ಅನ್ನು ನೀವು ತೆಗೆದುಹಾಕಿದರೆ ನಾವು ಪ್ರಶಂಸಿಸುತ್ತೇವೆ.