M

MLOG

ಕನ್ನಡ

CSS ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗೆ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ, HSL ಮತ್ತು Lab ಕಲರ್ ಸ್ಪೇಸ್‌ಗಳ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಿ, ವಿಶ್ವದಾದ್ಯಂತ ವೆಬ್ ವಿನ್ಯಾಸಕರಿಗೆ ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಸುಲಭವಾಗಿ ಪ್ರವೇಶಿಸಬಹುದಾದ ಬಣ್ಣ ಯೋಜನೆಗಳನ್ನು ರಚಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ.

CSS ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಸರಳೀಕರಿಸುವುದು: ಜಾಗತಿಕ ವೆಬ್ ವಿನ್ಯಾಸಕ್ಕಾಗಿ HSL ಮತ್ತು Lab ಕಲರ್ ಸ್ಪೇಸ್‌ಗಳು

ವೆಬ್ ವಿನ್ಯಾಸದ ಜಗತ್ತು ನಿರಂತರವಾಗಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದೆ, ಮತ್ತು ಅದರೊಂದಿಗೆ, ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕ ಮತ್ತು ಸುಲಭವಾಗಿ ಪ್ರವೇಶಿಸಬಹುದಾದ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು ನಾವು ಬಳಸುವ ಸಾಧನಗಳು ಮತ್ತು ತಂತ್ರಗಳು ಕೂಡ ಬದಲಾಗುತ್ತಿವೆ. CSS ಗೆ ಇತ್ತೀಚಿನ ಅತ್ಯಂತ ರೋಚಕ ಸೇರ್ಪಡೆಗಳಲ್ಲಿ ಒಂದು ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಆಗಿದೆ. ಈ ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯವು ನಿಮ್ಮ CSS ನಲ್ಲಿ ನೇರವಾಗಿ ಬಣ್ಣಗಳನ್ನು ಬದಲಾಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಕ್ರಿಯಾತ್ಮಕ ಥೀಮ್‌ಗಳು, ಸೂಕ್ಷ್ಮ ವ್ಯತ್ಯಾಸಗಳು, ಮತ್ತು ಸುಲಭವಾಗಿ ಪ್ರವೇಶಿಸಬಹುದಾದ ವಿನ್ಯಾಸಗಳನ್ನು ಹೆಚ್ಚು ಸುಲಭವಾಗಿ ಮತ್ತು ನಮ್ಯತೆಯೊಂದಿಗೆ ರಚಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಈ ಲೇಖನವು ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್‌ನ ಜಟಿಲತೆಗಳನ್ನು, ವಿಶೇಷವಾಗಿ HSL ಮತ್ತು Lab ಕಲರ್ ಸ್ಪೇಸ್‌ಗಳ ಮೇಲೆ ಗಮನಹರಿಸಿ, ಮತ್ತು ನೀವು ಅವುಗಳನ್ನು ನಿಮ್ಮ ವಿಶ್ವವ್ಯಾಪಿ ಯೋಜನೆಗಳಿಗೆ ಹೇಗೆ ಬಳಸಿಕೊಳ್ಳಬಹುದು ಎಂಬುದನ್ನು ವಿವರಿಸುತ್ತದೆ.

CSS ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಎಂದರೇನು?

ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗಿಂತ ಮೊದಲು, CSS ನಲ್ಲಿ ಬಣ್ಣಗಳನ್ನು ಬದಲಾಯಿಸಲು Sass ಅಥವಾ Less ನಂತಹ ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳನ್ನು ಬಳಸುವುದು ಅಥವಾ JavaScript ಅನ್ನು ಅವಲಂಬಿಸುವುದು ಸಾಮಾನ್ಯ ಅಭ್ಯಾಸವಾಗಿತ್ತು. ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ನಿಮ್ಮ CSS ನಿಯಮಗಳಲ್ಲಿ ನೇರವಾಗಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಬಣ್ಣಗಳನ್ನು ಮಾರ್ಪಡಿಸಲು ಅನುಮತಿಸುವ ಮೂಲಕ ಇದನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಇದು ಬಣ್ಣದ ಪ್ರತ್ಯೇಕ ಘಟಕಗಳನ್ನು (HSL ನಲ್ಲಿ ವರ್ಣ, ಶುದ್ಧತ್ವ ಮತ್ತು ಲಘುತ್ವದಂತೆ) ಉಲ್ಲೇಖಿಸಿ ಮತ್ತು ಅವುಗಳಿಗೆ ಗಣಿತದ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಅನ್ವಯಿಸುವ ಮೂಲಕ ಇದನ್ನು ಮಾಡುತ್ತದೆ. ಇದರರ್ಥ ನೀವು ಬಣ್ಣದ ಪ್ರಸ್ತುತ ಮೌಲ್ಯವನ್ನು ಆಧರಿಸಿ ಅದನ್ನು ಹಗುರಗೊಳಿಸಬಹುದು, ಗಾಢವಾಗಿಸಬಹುದು, ಸ್ಯಾಚುರೇಟ್ ಮಾಡಬಹುದು, ಡಿಸ್ಯಾಚುರೇಟ್ ಮಾಡಬಹುದು ಅಥವಾ ವರ್ಣವನ್ನು ಬದಲಾಯಿಸಬಹುದು, ಮತ್ತು ಇದಕ್ಕಾಗಿ ಅನೇಕ ಬಣ್ಣ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಮೊದಲೇ ವ್ಯಾಖ್ಯಾನಿಸುವ ಅಗತ್ಯವಿಲ್ಲ.

ಈ ಸಿಂಟ್ಯಾಕ್ಸ್ color() ಫಂಕ್ಷನ್‌ನ ಸುತ್ತಲೂ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಇದು ನಿಮಗೆ ಬಣ್ಣದ ಜಾಗವನ್ನು (hsl, lab, lch, rgb, ಅಥವಾ oklab ನಂತಹ), ಮಾರ್ಪಡಿಸಬೇಕಾದ ಮೂಲ ಬಣ್ಣವನ್ನು, ಮತ್ತು ಬಯಸಿದ ಹೊಂದಾಣಿಕೆಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ:

.element { color: color(hsl red calc(h + 30) s l); }

ಈ ತುಣುಕು ಕೆಂಪು ಬಣ್ಣವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, hsl ಕಲರ್ ಸ್ಪೇಸ್ ಅನ್ನು ಬಳಸುತ್ತದೆ, ಮತ್ತು ವರ್ಣವನ್ನು 30 ಡಿಗ್ರಿಗಳಷ್ಟು ಹೆಚ್ಚಿಸುತ್ತದೆ. ಇಲ್ಲಿ h, s, ಮತ್ತು l ಅನುಕ್ರಮವಾಗಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ವರ್ಣ, ಶುದ್ಧತ್ವ, ಮತ್ತು ಲಘುತ್ವದ ಮೌಲ್ಯಗಳನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ. ಗಣಿತದ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು calc() ಫಂಕ್ಷನ್ ನಿರ್ಣಾಯಕವಾಗಿದೆ.

ಏಕೆ HSL ಮತ್ತು Lab?

ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ವಿವಿಧ ಕಲರ್ ಸ್ಪೇಸ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದಾದರೂ, HSL ಮತ್ತು Lab ಬಣ್ಣ ಬದಲಾವಣೆ ಮತ್ತು ಪ್ರವೇಶಸಾಧ್ಯತೆಗೆ ವಿಶಿಷ್ಟ ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತವೆ. ಏಕೆ ಎಂದು ಅನ್ವೇಷಿಸೋಣ:

HSL (ವರ್ಣ, ಶುದ್ಧತ್ವ, ಲಘುತ್ವ)

HSL ಎಂಬುದು ಒಂದು ಸಿಲಿಂಡರಾಕಾರದ ಕಲರ್ ಸ್ಪೇಸ್ ಆಗಿದ್ದು, ಇದು ಮಾನವನ ಗ್ರಹಿಕೆಯನ್ನು ಆಧರಿಸಿ ಬಣ್ಣಗಳನ್ನು ಅರ್ಥಗರ್ಭಿತವಾಗಿ ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಇದನ್ನು ಮೂರು ಘಟಕಗಳಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ:

HSL ನ ಪ್ರಯೋಜನಗಳು:

ಉದಾಹರಣೆ: ಡಾರ್ಕ್ ಮೋಡ್ ಥೀಮ್ ರಚಿಸುವುದು

ನಿಮ್ಮ ಬ್ರ್ಯಾಂಡ್ ಬಣ್ಣ #007bff (ಒಂದು ಪ್ರಕಾಶಮಾನವಾದ ನೀಲಿ) ಎಂದು ಭಾವಿಸೋಣ. ಕಡಿಮೆ ಬೆಳಕಿನ ಪರಿಸ್ಥಿತಿಗಳಲ್ಲಿ ಕಣ್ಣುಗಳಿಗೆ ಹಿತಕರವಾಗಿರುವಂತೆ ಬ್ರ್ಯಾಂಡ್‌ನ ಸಾರವನ್ನು ಉಳಿಸಿಕೊಂಡು ಡಾರ್ಕ್ ಮೋಡ್ ಥೀಮ್ ರಚಿಸಲು ನೀವು HSL ಅನ್ನು ಬಳಸಬಹುದು.

:root { --brand-color: #007bff; --brand-color-hsl: color(oklch #007bff h s l); --bg-color: #fff; --text-color: #000; } @media (prefers-color-scheme: dark) { :root { --bg-color: #121212; /* A dark gray */ --text-color: #fff; --brand-color: color(hsl var(--brand-color) h calc(s * 0.8) calc(l * 1.2)); /* Slightly desaturated and lightened brand color */ } } body { background-color: var(--bg-color); color: var(--text-color); } .brand-button { background-color: var(--brand-color); color: #fff; }

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಬಳಕೆದಾರರು ಡಾರ್ಕ್ ಕಲರ್ ಸ್ಕೀಮ್ ಅನ್ನು ಇಷ್ಟಪಡುತ್ತಾರೆಯೇ ಎಂದು ನಾವು ಪರಿಶೀಲಿಸುತ್ತಿದ್ದೇವೆ. ಹಾಗಿದ್ದಲ್ಲಿ, ಡಾರ್ಕ್ ಹಿನ್ನೆಲೆಯ ವಿರುದ್ಧ ಉತ್ತಮ ಕಾಂಟ್ರಾಸ್ಟ್‌ಗಾಗಿ ಬ್ರ್ಯಾಂಡ್ ಬಣ್ಣವನ್ನು ಸ್ವಲ್ಪ ಡಿಸ್ಯಾಚುರೇಟ್ ಮಾಡಲು ಮತ್ತು ಹಗುರಗೊಳಿಸಲು ನಾವು ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಬಳಸುತ್ತಿದ್ದೇವೆ. ಇದು ಡಾರ್ಕ್ ಮೋಡ್‌ನಲ್ಲಿ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸುವಾಗ ಬ್ರ್ಯಾಂಡ್ ಗುರುತನ್ನು ಸ್ಥಿರವಾಗಿರಿಸುತ್ತದೆ.

Lab (ಲಘುತ್ವ, a, b)

Lab (ಅಥವಾ CIELAB) ಗ್ರಹಿಕೆಯ ಏಕರೂಪತೆಗಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಒಂದು ಕಲರ್ ಸ್ಪೇಸ್ ಆಗಿದೆ. ಇದರರ್ಥ, ಬಣ್ಣದ ಮೌಲ್ಯಗಳಲ್ಲಿನ ಬದಲಾವಣೆಯು ಆರಂಭಿಕ ಬಣ್ಣವನ್ನು ಲೆಕ್ಕಿಸದೆ, ಗ್ರಹಿಸಿದ ಬಣ್ಣದ ವ್ಯತ್ಯಾಸದಲ್ಲಿ ಸಮಾನ ಬದಲಾವಣೆಗೆ ಅನುಗುಣವಾಗಿರುತ್ತದೆ. ಇದನ್ನು ಮೂರು ಘಟಕಗಳಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ:

Lab ನ ಪ್ರಯೋಜನಗಳು:

ಉದಾಹರಣೆ: ಪ್ರವೇಶಸಾಧ್ಯತೆಗಾಗಿ ಬಣ್ಣ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಸುಧಾರಿಸುವುದು

ಸಾಕಷ್ಟು ಬಣ್ಣ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಪ್ರವೇಶಸಾಧ್ಯತೆಗೆ ಅತ್ಯಗತ್ಯ. ನಿಮ್ಮ ಬಳಿ ಇರುವ ಪಠ್ಯ ಬಣ್ಣ ಮತ್ತು ಹಿನ್ನೆಲೆ ಬಣ್ಣ WCAG AA ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತದ ಅವಶ್ಯಕತೆಯನ್ನು (4.5:1) ಪೂರೈಸದಿದ್ದರೆ, ನೀವು Lab ಅನ್ನು ಬಳಸಿ ಪಠ್ಯದ ಬಣ್ಣದ ಲಘುತ್ವವನ್ನು ಅವಶ್ಯಕತೆಗೆ ಸರಿಹೊಂದುವವರೆಗೆ ಹೊಂದಿಸಬಹುದು.

ಗಮನಿಸಿ: ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್‌ನೊಂದಿಗೆ CSS ನಲ್ಲಿ ನೇರವಾಗಿ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತವನ್ನು ಬದಲಾಯಿಸಲು ಸಾಧ್ಯವಿಲ್ಲವಾದರೂ, ಲಘುತ್ವವನ್ನು ಸರಿಹೊಂದಿಸಲು ನಾವು ಇದನ್ನು ಬಳಸಬಹುದು ಮತ್ತು ನಂತರ ಫಲಿತಾಂಶವನ್ನು ಪರಿಶೀಲಿಸಲು ಕಾಂಟ್ರಾಸ್ಟ್ ಚೆಕಿಂಗ್ ಟೂಲ್ ಅನ್ನು ಬಳಸಬಹುದು.

.text { color: var(--text-color); background-color: var(--bg-color); } :root { --text-color: #333; --bg-color: #eee; } /*Example: This doesn't actually compute contrast ratio directly.*/ /*It's a conceptual example of adjusting lightness*/ .accessible-text { --current-text-color: var(--text-color); color: color(lab var(--current-text-color) calc(l + 10) a b); /* Lighten the text by 10 units. This will only have an effect up to a point if the text color L value is close to 100. For darkening, one would subtract*/ }

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಸುಧಾರಿಸಲು ಪಠ್ಯದ ಬಣ್ಣವನ್ನು ಹಗುರಗೊಳಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದೇವೆ. CSS ನಲ್ಲಿ ನಾವು ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಸಾಧ್ಯವಾಗದ ಕಾರಣ, ಮಾರ್ಪಾಡಿನ ನಂತರ ನಾವು ಫಲಿತಾಂಶವನ್ನು ಪರಿಶೀಲಿಸಬೇಕು ಮತ್ತು ಅಗತ್ಯವಿದ್ದರೆ ಪರಿಷ್ಕರಿಸಬೇಕು.

Oklab: Lab ನ ಸುಧಾರಣೆ

Oklab ಎಂಬುದು Lab ನ ಕೆಲವು ಗ್ರಹಿಸಿದ ನ್ಯೂನತೆಗಳನ್ನು ಪರಿಹರಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ತುಲನಾತ್ಮಕವಾಗಿ ಹೊಸ ಕಲರ್ ಸ್ಪೇಸ್ ಆಗಿದೆ. ಇದು ಇನ್ನೂ ಉತ್ತಮವಾದ ಗ್ರಹಿಕೆಯ ಏಕರೂಪತೆಯನ್ನು ಗುರಿಯಾಗಿಸಿಕೊಂಡಿದೆ, ಬಣ್ಣದ ಮೌಲ್ಯಗಳಲ್ಲಿನ ಬದಲಾವಣೆಗಳು ಗ್ರಹಿಸಿದ ಬಣ್ಣದ ಮೇಲೆ ಹೇಗೆ ಪರಿಣಾಮ ಬೀರುತ್ತವೆ ಎಂಬುದನ್ನು ಊಹಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ. ಅನೇಕ ಸಂದರ್ಭಗಳಲ್ಲಿ, ವಿಶೇಷವಾಗಿ ಶುದ್ಧತ್ವ ಮತ್ತು ಲಘುತ್ವದೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ, Lab ಗೆ ಹೋಲಿಸಿದರೆ Oklab ಬಣ್ಣಗಳನ್ನು ಸರಿಹೊಂದಿಸಲು ಸುಗಮ ಮತ್ತು ಹೆಚ್ಚು ಸಹಜವಾದ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತದೆ.

ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್‌ನೊಂದಿಗೆ Oklab ಅನ್ನು ಬಳಸುವುದು Lab ಅನ್ನು ಬಳಸಿದಂತೆಯೇ ಇರುತ್ತದೆ. ನೀವು ಕೇವಲ oklab ಅನ್ನು ಕಲರ್ ಸ್ಪೇಸ್ ಆಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕು:

.element { color: color(oklab #ff0000 calc(l * 1.1) a b); /*Lighten the color by 10%*/ }

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು

HSL ಮತ್ತು Lab ನೊಂದಿಗೆ ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ವೆಬ್ ವಿನ್ಯಾಸಕ್ಕೆ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸಾಧ್ಯತೆಗಳನ್ನು ತೆರೆಯುತ್ತದೆ. ಇಲ್ಲಿ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳಿವೆ:

ಉದಾಹರಣೆ: HSL ನೊಂದಿಗೆ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ರಚಿಸುವುದು

:root { --base-color: #29abe2; /* A light blue */ --complementary-color: color(hsl var(--base-color) calc(h + 180) s l); --analogous-color-1: color(hsl var(--base-color) calc(h + 30) s l); --analogous-color-2: color(hsl var(--base-color) calc(h - 30) s l); --triadic-color-1: color(hsl var(--base-color) calc(h + 120) s l); --triadic-color-2: color(hsl var(--base-color) calc(h - 120) s l); } .base { background-color: var(--base-color); } .complementary { background-color: var(--complementary-color); } .analogous-1 { background-color: var(--analogous-color-1); } .analogous-2 { background-color: var(--analogous-color-2); } .triadic-1 { background-color: var(--triadic-color-1); } .triadic-2 { background-color: var(--triadic-color-2); }

ಈ ಉದಾಹರಣೆಯು HSL ಬಳಸಿ ಒಂದೇ ಮೂಲ ಬಣ್ಣವನ್ನು ಆಧರಿಸಿ ಬಣ್ಣಗಳ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ವಿಭಿನ್ನ ಬಣ್ಣದ ಸಾಮರಸ್ಯಗಳನ್ನು ರಚಿಸಲು ಮತ್ತು ಅವುಗಳನ್ನು ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ವಿನ್ಯಾಸದ ಅಗತ್ಯಗಳಿಗೆ ತಕ್ಕಂತೆ ಹೊಂದಿಸಲು ನೀವು ಈ ಕೋಡ್ ಅನ್ನು ಸುಲಭವಾಗಿ ಅಳವಡಿಸಿಕೊಳ್ಳಬಹುದು.

ಉದಾಹರಣೆ: Lab ನೊಂದಿಗೆ ಹೋವರ್ ಎಫೆಕ್ಟ್ ರಚಿಸುವುದು

.button { background-color: #4caf50; /* A green color */ color: #fff; border: none; padding: 10px 20px; cursor: pointer; transition: background-color 0.3s ease; } .button:hover { background-color: color(lab #4caf50 l calc(a * 1.1) calc(b * 1.1)); /* Slightly lighten and increase a and b */ }

ಇಲ್ಲಿ, ನಾವು Lab ಬಳಸಿ ಹೋವರ್ ಮಾಡಿದಾಗ ಬಣ್ಣವನ್ನು ಸ್ವಲ್ಪ ಹಗುರಗೊಳಿಸಿ ಮತ್ತು ಕೆಂಪು ಹಾಗೂ ಹಳದಿಯ ಕಡೆಗೆ ಬದಲಾಯಿಸುತ್ತಿದ್ದೇವೆ, ಇದು ಬಳಕೆದಾರರಿಗೆ ಸೂಕ್ಷ್ಮವಾದ ಆದರೆ ಗಮನಾರ್ಹವಾದ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುತ್ತದೆ.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮತ್ತು ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು

ಯಾವುದೇ ಹೊಸ CSS ವೈಶಿಷ್ಟ್ಯದಂತೆ, ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯು ಒಂದು ಪ್ರಮುಖ ಪರಿಗಣನೆಯಾಗಿದೆ. ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು Chrome, Firefox, Safari, ಮತ್ತು Edge ಸೇರಿದಂತೆ ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಬೆಂಬಲಿಸಲಾಗುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳು ಇದನ್ನು ಬೆಂಬಲಿಸದೇ ಇರಬಹುದು.

ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಾದ್ಯಂತ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಒದಗಿಸುವುದು ಅತ್ಯಗತ್ಯ. ನೀವು CSS ವೇರಿಯೇಬಲ್‌ಗಳು ಮತ್ತು @supports at-rule ಅನ್ನು ಬಳಸಿಕೊಂಡು ಇದನ್ನು ಮಾಡಬಹುದು.

:root { --base-color: #29abe2; --highlight-color: #33b5e5; /* Fallback color */ } @supports (color: color(hsl var(--base-color) h calc(s * 1.2) l)) { :root { --highlight-color: color(hsl var(--base-color) h calc(s * 1.2) l); /* Use Relative Color Syntax if supported */ } } .highlight { background-color: var(--highlight-color); }

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಒಂದು ಫಾಲ್‌ಬ್ಯಾಕ್ ಬಣ್ಣವನ್ನು (#33b5e5) ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ ಮತ್ತು ನಂತರ ಬ್ರೌಸರ್ ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆಯೇ ಎಂದು ಪರೀಕ್ಷಿಸಲು @supports at-rule ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ಅದು ಬೆಂಬಲಿಸಿದರೆ, ನಾವು --highlight-color ವೇರಿಯೇಬಲ್ ಅನ್ನು ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಬಳಸಿ ರಚಿಸಿದ ಬಣ್ಣದೊಂದಿಗೆ ನವೀಕರಿಸುತ್ತೇವೆ. ಇದು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳ ಬಳಕೆದಾರರು ಹೊಸ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿನ ಬಣ್ಣದಂತೆಯೇ ಇಲ್ಲದಿದ್ದರೂ ಸಹ ಹೈಲೈಟ್ ಮಾಡಿದ ಎಲಿಮೆಂಟ್ ಅನ್ನು ನೋಡುತ್ತಾರೆ ಎಂಬುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಪರಿಗಣನೆಗಳು

ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದ್ದರೂ, ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರಿಗಣಿಸುವುದು ನಿರ್ಣಾಯಕ. ನೀವು ರಚಿಸುವ ಬಣ್ಣ ಸಂಯೋಜನೆಗಳು ದೃಷ್ಟಿ ದೋಷವುಳ್ಳ ಬಳಕೆದಾರರಿಗೆ ಸಾಕಷ್ಟು ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ನಿಮ್ಮ ಬಣ್ಣ ಸಂಯೋಜನೆಗಳು WCAG AA ಅಥವಾ AAA ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತದ ಅವಶ್ಯಕತೆಗಳನ್ನು ಪೂರೈಸುತ್ತವೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು WebAIM ಕಾಂಟ್ರಾಸ್ಟ್ ಚೆಕರ್ ನಂತಹ ಸಾಧನಗಳನ್ನು ಬಳಸಿ.

ಬಣ್ಣದ ಗ್ರಹಿಕೆಯು ವ್ಯಕ್ತಿಗಳ ನಡುವೆ ಗಮನಾರ್ಹವಾಗಿ ಬದಲಾಗಬಹುದು ಎಂಬುದನ್ನು ನೆನಪಿಡಿ. ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಸುಲಭವಾಗಿ ಗ್ರಹಿಸಲು ಮತ್ತು ಸಂವಹನ ನಡೆಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿವಿಧ ರೀತಿಯ ಬಣ್ಣ ಕುರುಡುತನ ಅಥವಾ ದೃಷ್ಟಿ ದೋಷವುಳ್ಳ ಬಳಕೆದಾರರೊಂದಿಗೆ ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳನ್ನು ಪರೀಕ್ಷಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

ತೀರ್ಮಾನ

CSS ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್, ವಿಶೇಷವಾಗಿ HSL ಮತ್ತು Lab ಕಲರ್ ಸ್ಪೇಸ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ, ವೆಬ್ ವಿನ್ಯಾಸಕರಿಗೆ ಒಂದು ಗೇಮ್-ಚೇಂಜರ್ ಆಗಿದೆ. ಇದು ನಿಮಗೆ ಕ್ರಿಯಾತ್ಮಕ ಥೀಮ್‌ಗಳು, ಸೂಕ್ಷ್ಮ ವ್ಯತ್ಯಾಸಗಳು, ಮತ್ತು ಪ್ರವೇಶಸಾಧ್ಯವಾದ ವಿನ್ಯಾಸಗಳನ್ನು ಹೆಚ್ಚು ಸುಲಭವಾಗಿ ಮತ್ತು ನಮ್ಯತೆಯೊಂದಿಗೆ ರಚಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ. HSL ಮತ್ತು Lab ನ ತತ್ವಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ಮತ್ತು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಒದಗಿಸುವ ಮೂಲಕ, ನೀವು ವಿಶ್ವಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗೆ ದೃಷ್ಟಿಗೆ ಅದ್ಭುತವಾದ ಮತ್ತು ಎಲ್ಲರನ್ನೂ ಒಳಗೊಂಡ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು ಈ ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು.

ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್‌ನ ಶಕ್ತಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ವಿನ್ಯಾಸ ಕೌಶಲ್ಯಗಳನ್ನು ಮುಂದಿನ ಹಂತಕ್ಕೆ ಏರಿಸಿ. ವಿಭಿನ್ನ ಕಲರ್ ಸ್ಪೇಸ್‌ಗಳು, ಗಣಿತದ ಕಾರ್ಯಾಚರಣೆಗಳು, ಮತ್ತು ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಪರಿಗಣನೆಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ, ಎಲ್ಲರಿಗೂ ಸುಂದರ ಮತ್ತು ಒಳಗೊಳ್ಳುವ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ರಚಿಸಿ.

ಹೆಚ್ಚಿನ ಕಲಿಕೆ

CSS ರಿಲೇಟಿವ್ ಕಲರ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡು ಮತ್ತು ಬಳಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಸೇವೆ ಸಲ್ಲಿಸುವ ಹೆಚ್ಚು ಕ್ರಿಯಾತ್ಮಕ, ಪ್ರವೇಶಸಾಧ್ಯ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ಬಣ್ಣದೊಂದಿಗೆ ವಿನ್ಯಾಸ ಮಾಡುವಾಗ ಯಾವಾಗಲೂ ಪ್ರವೇಶಸಾಧ್ಯತೆ ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವಕ್ಕೆ ಆದ್ಯತೆ ನೀಡಲು ಮರೆಯದಿರಿ.