HSL ಜನರು ಬಣ್ಣದ ಬಗ್ಗೆ ಮಾತನಾಡುವ ರೀತಿಯಲ್ಲಿ ಅದನ್ನು ವಿವರಿಸುತ್ತದೆ: ಯಾವ ಹ್ಯೂ, ಎಷ್ಟು ಬಣ್ಣಮಯ, ಎಷ್ಟು ಪ್ರಕಾಶಮಾನ. HEX ಕೋಡ್ ಅನ್ನು HSL ಗೆ ಪರಿವರ್ತಿಸುವುದು ಬಣ್ಣವನ್ನು ನೀವು ನಿಜವಾಗಿಯೂ ಬದಲಾಯಿಸಬಹುದಾದ ರೂಪಕ್ಕೆ ತರಲು ಅತ್ಯಂತ ವೇಗದ ದಾರಿ: ಅದನ್ನು ಹಗುರಗೊಳಿಸಿ, ಮಂದಗೊಳಿಸಿ ಅಥವಾ ಅದರಿಂದ ಸಂಪೂರ್ಣ ಸ್ಕೇಲ್ ರಚಿಸಿ.
HEX ನಿಂದ HSL ಗೆ ಪರಿವರ್ತನೆ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ
- HEX ಕೋಡ್ ಅನ್ನು RGBಗೆ ಪರಿವರ್ತಿಸಿ ಮತ್ತು ಪ್ರತಿ ಚಾನಲ್ ಅನ್ನು 255ರಿಂದ ಭಾಗಿಸಿ, ಹೀಗೆ ಮೂವರು ಮೌಲ್ಯಗಳು 0 ಮತ್ತು 1 ನಡುವಣದಲ್ಲಿರುತ್ತವೆ.
- ಮೂರು ಮೌಲ್ಯಗಳಲ್ಲಿ ಅತಿದೊಡ್ಡ ಮತ್ತು ಅತಿ ಚಿಕ್ಕದನ್ನು ಕಂಡುಹಿಡಿಯಿರಿ. ಅವುಗಳ ಸರಾಸರಿಯೇ ಲೈಟ್‌ನೆಸ್ L ಆಗಿದೆ.
- ಅವುಗಳ ಮಧ್ಯೆ ಇರುವ ವ್ಯತ್ಯಾಸ saturation S ಅನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ: ಲೈಟ್ ಬಣ್ಣಗಳಿಗಾಗಿ ಇದನ್ನು (2 − max − min) ಮೂಲಕ ಭಾಗಿಸು, ಕತ್ತಲೆ ಬಣ್ಣಗಳಿಗಾಗಿ (max + min) ಮೂಲಕ ಭಾಗಿಸು.
- ಅಧಿಕಮಟ್ಟವನ್ನು ಹಿಡಿದಿರುವ ಚಾನಲ್ hue H ಅನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ — ಕೆಂಪು 0°, ಹಸಿರು 120°, ನೀಲಿ 240° — ಮತ್ತು ಉಳಿದ ಎರಡು ಚಾನಲ್‌ಗಳು ಆ ವಿಭಾಗದ ಒಳಗೆ ಹ್ಯೂವನ್ನು ಸ್ಥಾಪಿಸುತ್ತವೆ.
ಕಾರ್ಯನಿರ್ವಹಿಸಿರುವ ಉದಾಹರಣೆ
ಗಣಿತ ನಿಖರಾದಾಗಿರುವುದು, ಆದರೆ HSL ಮೌಲ್ಯಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಪೂರ್ಣ ಡಿಗ್ರಿಗಳು ಮತ್ತು ಶೇಕಡಾವಾರುಗಳಿಗೆ ರೌಂಡ್ ಮಾಡಲಾಗುತ್ತದೆ. ಹೀಗಾಗಿ ಮತ್ತೆ ಪರಿವರ್ತಿಸಲು ಮೂಲ RGB ನೊಂದಿಗಿನು ಒಂದು ಅಥವಾ ಎರಡು ಹೆಜ್ಜೆಗಳ ಸರಕರಣ ಸಂಭವಿಸಬಹುದು — ಪ್ರಾಯೋಗಿಕವಾಗಿ ಅಸ್ಪೃಶ್ಯ, ಆದರೆ ವರ್ಡ್-ರೌಂಡ್ ಟ್ರಿಪ್ ಮಾಡಿದಾಗ ತಿಳಿದುಕೊಂಡಿದ್ದರೆ ಒಳ್ಳೆಯದು.
HEX ಮತ್ತು HSL ವಿವರಿಸಲಾಗಿದೆ
HEX ಏನು?
HEX ಕೋಡ್ ಒಂದು ಆರು-ಅಂಕಿಯ ಹೆಕ್ಸಾಡೆಸಿಮಲ್ ಸಂಖ್ಯೆ, ಅದು ಕಾಂಪನಿಯ ಮುಂಭಾಗದ #ೊಂದಿಗೆ ಬಣ್ಣದ ಕೆಂಪು, ಹಸಿರು ಮತ್ತು ನೀಲಿ ಚಾನೆಲ್‌ಗಳನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ. ಪ್ರತಿಯೊಂದು ಜೋಡಿ ಅಂಕಿಗಳು ಒಂದು ಚಾನೆಲ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, 00 (ಯಾವುದೂ ಇಲ್ಲ) ರಿಂದ FF (ಪೂರ್ಣ) ವರೆಗೆ, ಇದು RGB ನ 16.7 ಮಿಲಿಯನ್ ಬಣ್ಣಗಳಿಗೆ ಸ್ಪಷ್ಟ, ಸಂಕ್ಷಿಪ್ತ ಸಂಖ್ಯೆಪ್ರಕಾರ ನೀಡುತ್ತದೆ. HEX CSS, ವಿನ್ಯಾಸ ಸಾಧನಗಳು ಮತ್ತು ಬ್ರ್ಯಾಂಡ್ ಮಾರ್ಗಸೂಚಿಗಳುಗಳಲ್ಲಿ ಡೀಫಾಲ್ಟ್ ಆಗಿದೆ.
- ವಿನ್ಯಾಸ:
- #RRGGBB
- ಶ್ರೇಣಿ:
- ಪ್ರತಿಚಾನೆಲ್ 00–FF
- ಉತ್ತಮವಾಗಿ ಸರಿ:
- CSS, ವಿನ್ಯಾಸ ಹ್ಯಾಂಡ್ಓಫ್, ಬ್ರ್ಯಾಂಡ್ ಮಾರ್ಗಸೂಚಿಗಳು
HSL ಏನು?
HSL ಒಂದು ಬಣ್ಣವನ್ನು ಹ್ಯೂ (ಬಣ್ಣ ಚಕ್ರದಲ್ಲಿ 0–360°), ಸ್ಯಾಚುರೇಶನ್ (ಎಷ್ಟು ಬಣ್ಣಮಯವಾಗಿದೆ, 0–100%) ಮತ್ತು ಲೈಟ್‌ನೆಸ್ (ಎಷ್ಟು ಪ್ರಕಾಶಮಾನವಾಗಿದೆ, 0–100%) ಎಂದು ವಿಭಜಿಸುತ್ತದೆ. ಪ್ರತಿಯೊಂದು ಭಾಗವೂ ಜನರು ಬಣ್ಣವನ್ನು ವಿವರಿಸುವ ರೀತಿಗೆ ಹೊಂದುವುದರಿಂದ, ಕೈಯಿಂದ ಅಥವಾ ಕೋಡ್‌ನಲ್ಲಿ ಟಿಂಟ್‌ಗಳು, ಷೇಡ್ಗಳು ಮತ್ತು ಸ್ಥಿರವಾದ ಪ್ಯಾಲೆಟ್‌ಗಳನ್ನು ರಚಿಸಲು HSL ಅತ್ಯಂತ ಸುಲಭ ಸ್ವರೂಪವಾಗಿದೆ.
- ವಿನ್ಯಾಸ:
- hsl(H, S%, L%)
- ಶ್ರೇಣಿ:
- 0–360°, 0–100%, 0–100%
- ಉತ್ತಮವಾಗಿ ಸರಿ:
- ಪ್ಯಾಲೆಟ್‌ಗಳು, ಟಿಂಟ್‌ಗಳು ಮತ್ತು ಷೇಡ್ಗಳು, ಥೀಮಿಂಗ್
HEX ನಿಂದ HSL ಗೆ ಉಲ್ಲೇಖ ಕೋಷ್ಟಕ
ಅತಿದೊಡ್ಡ ಸಾಮಾನ್ಯ CSS ಬಣ್ಣಗಳು, HEX ಯಿಂದ HSL ಗೆ ಪರಿವರ್ತಿಸಲ್ಪಟ್ಟಿವೆ.
| ಬಣ್ಣ | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |