ಬಣ್ಣ ಪರಿವರ್ತನೆ ಎಂದರೇನು?
ನಿಮ್ಮ ಬ್ರೌಸರ್ ರೆಂಡರ್ ಮಾಡುವ ಪ್ರತಿ ಬಣ್ಣ ಅಂತಿಮವಾಗಿ sRGB ಟ್ರಿಪಲ್ — ಕೆಂಪು, ಹಸಿರು ಮತ್ತು ನೀಲಿ ಚಾನೆಲ್ಗಳಿಗೆ 0 ರಿಂದ 255 ನಡುವಿನ ಮೂರು ಸಂಖ್ಯೆಗಳು, ಜೊತೆಗೆ ಐಚ್ಛಿಕ ಆಲ್ಫಾ. CSS Color Level 4 ಸ್ಪೆಸಿಫಿಕೇಶನ್ ಒಂದೇ ಟ್ರಿಪಲ್ಗೆ ರೌಂಡ್-ಟ್ರಿಪ್ ಮಾಡುವ ಹಲವು ಟೆಕ್ಸ್ಟ್ ಫಾರ್ಮ್ಯಾಟ್ಗಳು, ಜೊತೆಗೆ ಪರ್ಸೆಪ್ಚುಯಲಿ-ಯೂನಿಫಾರ್ಮ್ OKLCH ಸ್ಪೇಸ್ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
ಬಣ್ಣ ಪರಿವರ್ತನೆ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ?
ಪರಿವರ್ತನೆ ಒಂದು ಸರಣಿ ಸ್ಪಷ್ಟ ರೇಖೀಯ ಮತ್ತು ಅರೇಖೀಯ ಪರಿವರ್ತನೆಗಳು. ಪ್ರತಿ ಹಂತ ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲೇ ಚಲಿಸುತ್ತದೆ — ಯಾವುದೇ ಇನ್ಪುಟ್ ನಮ್ಮ ಸರ್ವರ್ಗಳನ್ನು ತಲುಪುವುದಿಲ್ಲ:
- ನಿಮ್ಮ ಇನ್ಪುಟ್ ಪಾರ್ಸ್ ಮಾಡಲಾಗುತ್ತದೆ. ಉಪಕರಣ 3, 4, 6, ಅಥವಾ 8-ಅಂಕಿ HEX,
rgb()/rgba()/hsl()/hsla()/hsv()/hwb()ಫಂಕ್ಷನಲ್ ರೂಪಗಳು, ಅಥವಾ 150 ಹೆಸರಿಸಿದ CSS ಬಣ್ಣಗಳಲ್ಲಿ ಯಾವುದಾದರೂ (rebeccapurpleಸಹ) ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪತ್ತೆ ಮಾಡುತ್ತದೆ. - ಪಾರ್ಸ್ ಮಾಡಿದ ಬಣ್ಣ ಕ್ಯಾನೋನಿಕಲ್ sRGB ಗೆ ನಾರ್ಮಲೈಸ್ ಮಾಡಲ್ಪಡುತ್ತದೆ — ನಾಲ್ಕು ಫ್ಲೋಟ್ಗಳು
{r, g, b, a}ತಲಾ 0–1 ವ್ಯಾಪ್ತಿಯಲ್ಲಿ. ಇದು ಪ್ರತಿ ಔಟ್ಪುಟ್ ಫಾರ್ಮ್ಯಾಟ್ ಪಡೆಯುವ ಏಕ ಸತ್ಯದ ಮೂಲ. - HEX ಪ್ರತಿ ಚಾನೆಲ್ ಅನ್ನು 0–255 ಬೈಟ್ ಮೌಲ್ಯಕ್ಕೆ ರೌಂಡ್ ಮಾಡಿ ಹೆಕ್ಸ್ ಅಂಕಿಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಬರುತ್ತದೆ. RGB / RGBA ಅದೇ ಬೈಟ್ಗಳನ್ನು ಮುದ್ರಿಸುತ್ತದೆ. HSL ಮತ್ತು HSV ಮಾನಕ W3C ಸಿಲಿಂಡ್ರಿಕಲ್-ಕೋಆರ್ಡಿನೇಟ್ ಅಲ್ಗಾರಿದಮ್ಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.
- CMYK ಒಂದು ನಿಷ್ಕಳಂಕ ಅಂದಾಜು —
k = 1 - max(r, g, b), ನಂತರ ಉಳಿದ ಚಾನೆಲ್ಗಳಿಂದc, m, y. ಸ್ಕ್ರೀನ್ ಪ್ರಿವ್ಯೂಗೆ ಸೂಕ್ತ ಆದರೆ ಮುದ್ರಣಕ್ಕಲ್ಲ. - OKLCH css-color-4 ಫಾರ್ವರ್ಡ್ ಪಾಥ್ ಅನ್ನು ಅನುಸರಿಸುತ್ತದೆ: sRGB ರೇಖೀಕರಿಸಲ್ಪಡುತ್ತದೆ, LMS ಮ್ಯಾಟ್ರಿಕ್ಸ್ ಮೂಲಕ ಗುಣಿಸಲ್ಪಡುತ್ತದೆ, ಕ್ಯೂಬ್-ರೂಟ್ ಮಾಡಲ್ಪಡುತ್ತದೆ, ಮತ್ತು OKLab ನಿಂದ OKLCH ಗೆ ಪರಿವರ್ತಿಸಲ್ಪಡುತ್ತದೆ.
ಈ ಬಣ್ಣ ಕನ್ವರ್ಟರ್ ಏಕೆ ಬಳಸಬೇಕು?
- ಗೌಪ್ಯತೆ: ಪ್ರತಿ ಪರಿವರ್ತನೆ ಸಾದಾ JavaScript ಬಳಸಿ ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲಿ ಚಲಿಸುತ್ತದೆ. ನೀವು ಪೇಸ್ಟ್ ಮಾಡಿದ ಬಣ್ಣ ಎಂದಿಗೂ ನಿಮ್ಮ ಸಾಧನ ಬಿಡುವುದಿಲ್ಲ, ಇದು ಅಂಡರ್ NDA ಬ್ರ್ಯಾಂಡ್ ಕೆಲಸ ಮತ್ತು ಆಂತರಿಕ ಡಿಸೈನ್ ಸಿಸ್ಟಮ್ಗಳಿಗೆ ಮುಖ್ಯ.
- ಡಿಸೈನರ್-ಟು-ಡೆವಲಪರ್ ಹ್ಯಾಂಡ್ಆಫ್: Figma ನಿಂದ HEX ಪೇಸ್ಟ್ ಮಾಡಿ Tailwind ಕಾನ್ಫಿಗ್ಗೆ
rgb()ಸ್ಟ್ರಿಂಗ್, CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗೆhsl()ಸ್ಟ್ರಿಂಗ್, ಅಥವಾ ಆಧುನಿಕ ಪ್ಯಾಲೆಟ್ಗೆoklch()ಸ್ಟ್ರಿಂಗ್ ಓದಿ — ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ಪ್ರತಿ ಫಾರ್ಮ್ಯಾಟ್. - WCAG ನಿಖರತೆ: ಕಾಂಟ್ರಾಸ್ಟ್ ಪರಿಶೀಲಕ ನಿಖರ WCAG 2.1 ರಿಲೇಟಿವ್-ಲ್ಯೂಮಿನೆನ್ಸ್ ಫಾರ್ಮುಲಾ ಬಳಸುತ್ತದೆ ಮತ್ತು ಸಾಮಾನ್ಯ ಮತ್ತು ದೊಡ್ಡ ಟೆಕ್ಸ್ಟ್ಗೆ AA (4.5 / 3.0) ಮತ್ತು AAA (7.0 / 4.5) ಥ್ರೆಶೋಲ್ಡ್ ಪ್ರಕಟಿಸಿದ.
- ಡಾರ್ಕ್-ಮೋಡ್ ಮತ್ತು ಪ್ಯಾಲೆಟ್ ಡೆರಿವೇಶನ್: HSL ಮತ್ತು OKLCH ಒಂದೇ ಚಾನೆಲ್ ಆಗಿ ಬ್ರೈಟ್ನೆಸ್ ಒಡ್ಡುತ್ತವೆ, ಹೀಗಾಗಿ ಡಾರ್ಕ್-ಮೋಡ್ ಟೋಕನ್ಗಳು ಅಥವಾ 10-ಹಂತ ಪ್ಯಾಲೆಟ್ ರ್ಯಾಂಪ್ ಪಡೆಯಲು ಬ್ರ್ಯಾಂಡ್ ಬಣ್ಣ ಮೇಲೆ ಅಥವಾ ಕೆಳಗೆ ಬ್ರೈಟ್ನೆಸ್ ಅಕ್ಷದಲ್ಲಿ ಬದಲಾಯಿಸಲು ನೇರ.
ಬಣ್ಣ ಪರಿವರ್ತನೆಯ ಸಾಮಾನ್ಯ ಅನ್ವಯಗಳು ಯಾವುವು?
ಬಣ್ಣ ಪರಿವರ್ತನೆ ವೆಬ್ ಅಭಿವೃದ್ಧಿ, ಡಿಸೈನ್ ಮತ್ತು ಆ್ಯಕ್ಸೆಸಿಬಿಲಿಟಿ ಕೆಲಸದಾದ್ಯಂತ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ:
- ಡಿಸೈನ್ ಸಿಸ್ಟಮ್ಗಳು: CSS ಕಸ್ಟಮ್-ಪ್ರಾಪರ್ಟಿ ಸ್ಕೇಲ್ಗಾಗಿ ಬ್ರ್ಯಾಂಡ್ HEX ಅನ್ನು ಮ್ಯಾಚ್ ಮಾಡಿದ HSL ಮತ್ತು OKLCH ಟೋಕನ್ಗಳಿಗೆ ಪರಿವರ್ತಿಸಿ, ನಂತರ ಪ್ರತಿ ಟೋಕನ್ ಸಂಯೋಜನೆ ಪೇಜ್ ಹಿನ್ನೆಲೆ ವಿರುದ್ಧ WCAG AA ಪಾಸ್ ಆಗುವುದು ಪರಿಶೀಲಿಸಿ.
- ಆ್ಯಕ್ಸೆಸಿಬಿಲಿಟಿ ಆಡಿಟ್ಗಳು: ನೈಜ ಉತ್ಪನ್ನ ಸ್ಕ್ರೀನ್ನಿಂದ ಮುಂದಿನ ಮತ್ತು ಹಿನ್ನೆಲೆ ಜೋಡಿ ಪೇಸ್ಟ್ ಮಾಡಿ ಮತ್ತು ಸಾಮಾನ್ಯ-ತೂಕ ಮತ್ತು ದೊಡ್ಡ-ತೂಕ ಟೆಕ್ಸ್ಟ್ಗೆ ಕಾಂಟ್ರಾಸ್ಟ್ ರೇಶಿಯೋ ಮತ್ತು AA/AAA ತೀರ್ಪುಗಳನ್ನು ಓದಿ.
- ಕ್ರಾಸ್-ಟೂಲ್ ರೌಂಡ್-ಟ್ರಿಪ್ಗಳು: ಸ್ಕ್ರೀನ್ಶಾಟ್ ಪಿಕರ್ನಿಂದ ಬಣ್ಣ ಎಳೆಯಿರಿ (HEX), ಇಲ್ಲಿ ಪೇಸ್ಟ್ ಮಾಡಿ, ಮತ್ತು
hsl()ಅಥವಾoklch()ಸ್ಟ್ರಿಂಗ್ ನೇರವಾಗಿ Tailwind, Figma ಟೋಕನ್ಗಳು, ಅಥವಾ CSS-in-JS ಥೀಮ್ಗೆ ನಕಲಿಸಿ.
ಬಣ್ಣ ಪರಿವರ್ತನೆ ಉದಾಹರಣೆ ಹೇಗಿರುತ್ತದೆ?
ಪ್ರಸಿದ್ಧ rebeccapurple ತೆಗೆದುಕೊಳ್ಳಿ. ಹೆಸರಿಸಿದ-ಬಣ್ಣ ಲುಕಪ್ ಅದನ್ನು #663399 ಗೆ ಪರಿಹರಿಸುತ್ತದೆ. RGB ಪರಿವರ್ತನೆ rgb(102, 51, 153) ನೀಡುತ್ತದೆ. HSL ಪರಿವರ್ತನೆ hsl(270, 50%, 40%) ನೀಡುತ್ತದೆ — ವಯೋಲೆಟ್ ಹ್ಯೂ. ಆ ಬಣ್ಣ ಶುದ್ಧ ಬಿಳಿ ವಿರುದ್ಧ ಕಾಂಟ್ರಾಸ್ಟ್ ಪರಿಶೀಲಿಸಿ 7.39 ಅನುಪಾತ ಬರುತ್ತದೆ, ಇದು ಸಾಮಾನ್ಯ ಟೆಕ್ಸ್ಟ್ಗೆ AAA (7.0) ದಾಟುತ್ತದೆ — ಬಲವಾದ, ಆ್ಯಕ್ಸೆಸಿಬಲ್ ಮುಂದಿನ ಬಣ್ಣ ಆಯ್ಕೆ.
ಕೋಡ್ನಲ್ಲಿ, ಡಿಸೈನ್ ಫೈಲ್ಗಳಲ್ಲಿ, ಅಥವಾ ಸ್ಕ್ರೀನ್ಶಾಟ್ನಲ್ಲಿ ನೀವು ಎದುರಿಸುವ ಯಾವುದೇ ಬಣ್ಣಕ್ಕೆ ತ್ವರಿತ ಉಲ್ಲೇಖವಾಗಿ ಮತ್ತು ಶಿಪ್ ಮಾಡುವ ಮೊದಲು ಸ್ಯಾನಿಟಿ ಚೆಕ್ಗಾಗಿ ಕಾಂಟ್ರಾಸ್ಟ್ ಪರಿಶೀಲಕ ಬಳಸಿ. ಎಲ್ಲವೂ ಸ್ಥಳೀಯವಾಗಿ ಚಲಿಸುತ್ತದೆ, ಏನೂ ಲಾಗ್ ಮಾಡಲ್ಪಡುವುದಿಲ್ಲ.