RGB ಸ್ಕ್ರೀನ್‌ಗೆ ಎಷ್ಟು ಬೆಳಕನ್ನಿಂಡಬೇಕೆಂದು ತಿಳಿಸುತ್ತದೆ; HSL ನಿಂದ ನಿನಗೆ ಬಣ್ಣ ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂಬುದು ಗೊತ್ತಾಗುತ್ತೆ. ಮೂವರು ಚಾನಲ್‌ಗಳನ್ನು hue, saturation ಮತ್ತು lightness ಗೆ ಪರಿವರ್ತಿಸುವುದರಿಂದ ಬಣ್ಣವನ್ನು ಕೈಯಿಂದ ಸುಲಭವಾಗಿ ಸರಿಹೊಂದುತ್ತದೆ.
RGB ನಿಂದ HSL ಗೆ ಪರಿವರ್ತನೆ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ
- R, G ಮತ್ತು B ಅನ್ನು 255ರಿಂದ ಭಾಗಿಸಿ ಆದ್ದರಿಂದ ಪ್ರತಿಯೊಂದು ಮೌಲ್ಯವೂ 0 ಮತ್ತು 1 ನಡುವಣದಲ್ಲಿರುತ್ತದೆ.
- ಮೂರಿನಲ್ಲಿನ ಅಧಿಕಮತ್ತು ಕನಿಷ್ಠವನ್ನು ತೆಗೆದುಕೊ — ಅವುಗಳ ಸರಾಸರಿ lightness L ಆಗಿದೆ.
- ಯದಿ ಅಧಿಕಮತ್ತು ಮತ್ತು ಕನಿಷ್ಠ ಸಮಾನವಾಗಿದ್ದರೆ, ಬಣ್ಣ ಗ್ರೇ ಆಗಿದೆ: hue ಮತ್ತು saturation ಎರಡೂ 0 ಆಗಿರುತ್ತವೆ.
- ಅದಕ್ಕೆ ವಿರುದ್ಧವಾದರೆ S ಅನ್ನು ಅಧಿಕಮತ್ತು ಮತ್ತು ಕನಿಷ್ಠದ ಮಧ್ಯೆ ಇರುವ ವ್ಯತ್ಯಾಸದಿಂದ ನಿರ್ಧರಿಸಿ, ಮತ್ತು H ಅನ್ನು ಯಾವ ಚಾನಲ್ ಅಧಿಕಮಟ್ಟದಲ್ಲಿದೆ ಎಂಬುದರಿಂದ ಓದಿಕೆ.
ಕಾರ್ಯನಿರ್ವಹಿಸಿರುವ ಉದಾಹರಣೆ
ಸಿದ್ಧಾಂತವಾಗಿ ನಿಖರ. H, S ಮತ್ತು L ಸಾಮಾನ್ಯವಾಗಿ ರೌಂಡ್ಡ್ ಪೂರ್ಣ ಸಂಖ್ಯೆಗಳಾಗಿ ಪ್ರದರ್ಶಿಸಲ್ಪಡುವುದರಿಂದ, ಮತ್ತೆ ಪರಿವರ್ತಿಸಿದಾಗ ಒಂದು ಅಥವಾ ಎರಡು ಚಾನಲ್ ಹೆಜ್ಜೆಗಳು ಭಿನ್ನವಾಗಬಹುದು.
RGB ಮತ್ತು HSL ವಿವರಿಸಲಾಗಿದೆ
RGB ಏನು?
RGB ಬಣ್ಣವನ್ನು ಮೂರು ಬೆಳಕು ಚಾನೆಲ್‌ಗಳಾಗಿ ವರ್ಣಿಸುತ್ತದೆ — ಕೆಂಪು, ಹಸಿರು ಮತ್ತು ನೀಲಿ — ಪ್ರತಿಯೊಂದು 0 ರಿಂದ 255 ರವರೆಗೆ. ಇದು ಮೇಲೆಗಳ ಕೆಲಸವನ್ನು ಮಿರರ್ ಮಾಡುತ್ತದೆ: ಎಲ್ಲಾ ಮೂರೂ 255 ಇದ್ದರೆ ಶ್ವೇತ, ಎಲ್ಲವೂ 0 ಇದ್ದರೆ ಕಪ್ಪು. RGB ಸಂಖ್ಯೆಗಳೊಂದಿಗೆ ಗಣನೆ ಮಾಡಬೇಕಾಗಿದ್ರೆ ಇದು ಸರಿಯಾದ ಆಯ್ಕೆಯಾಗಿದೆ, ಮತ್ತು rgba() ಪಾರದರ್ಶಕತೆಯನ್ನು ಸೇರಿಸುತ್ತದೆ.
- ವಿನ್ಯಾಸ:
- rgb(R, G, B)
- ಶ್ರೇಣಿ:
- ಪ್ರತಿಚಾನೆಲ್ 0–255
- ಉತ್ತಮವಾಗಿ ಸರಿ:
- ಕೋಡ್, ಕ್ಯಾನ್ವಾಸ್, rgba() ಮುಖಾಂತರ ಪಾರದರ್ಶಕತೆ
HSL ಏನು?
HSL ಒಂದು ಬಣ್ಣವನ್ನು ಹ್ಯೂ (ಬಣ್ಣ ಚಕ್ರದಲ್ಲಿ 0–360°), ಸ್ಯಾಚುರೇಶನ್ (ಎಷ್ಟು ಬಣ್ಣಮಯವಾಗಿದೆ, 0–100%) ಮತ್ತು ಲೈಟ್‌ನೆಸ್ (ಎಷ್ಟು ಪ್ರಕಾಶಮಾನವಾಗಿದೆ, 0–100%) ಎಂದು ವಿಭಜಿಸುತ್ತದೆ. ಪ್ರತಿಯೊಂದು ಭಾಗವೂ ಜನರು ಬಣ್ಣವನ್ನು ವಿವರಿಸುವ ರೀತಿಗೆ ಹೊಂದುವುದರಿಂದ, ಕೈಯಿಂದ ಅಥವಾ ಕೋಡ್‌ನಲ್ಲಿ ಟಿಂಟ್‌ಗಳು, ಷೇಡ್ಗಳು ಮತ್ತು ಸ್ಥಿರವಾದ ಪ್ಯಾಲೆಟ್‌ಗಳನ್ನು ರಚಿಸಲು HSL ಅತ್ಯಂತ ಸುಲಭ ಸ್ವರೂಪವಾಗಿದೆ.
- ವಿನ್ಯಾಸ:
- hsl(H, S%, L%)
- ಶ್ರೇಣಿ:
- 0–360°, 0–100%, 0–100%
- ಉತ್ತಮವಾಗಿ ಸರಿ:
- ಪ್ಯಾಲೆಟ್‌ಗಳು, ಟಿಂಟ್‌ಗಳು ಮತ್ತು ಷೇಡ್ಗಳು, ಥೀಮಿಂಗ್
RGB ನಿಂದ HSL ಗೆ ಉಲ್ಲೇಖ ಕೋಷ್ಟಕ
ಅತಿದೊಡ್ಡ ಸಾಮಾನ್ಯ CSS ಬಣ್ಣಗಳು, RGB ಯಿಂದ HSL ಗೆ ಪರಿವರ್ತಿಸಲ್ಪಟ್ಟಿವೆ.
| ಬಣ್ಣ | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |