HSL ನೀವು ಬಣ್ಣ ಆಯ್ಕೆಮಾಡಲು ಸ್ನೇಹಪ್ರದ ಮಾರ್ಗ, RGB ಮುಖ್ಯವಾಗಿ اسڪ್ರೀನ್ಗಳು, canvas APIs ಮತ್ತು ಚಿತ್ರ ಕೋಡ್ ಉಪಯೋಗಿಸುವದು. ಈ ವರ್ಗಾಂತರಕವು ಯಾವುದೇ hue, saturation ಮತ್ತು lightness ತ್ರಯವನ್ನು ನಿಖರ 0–255 ಚಾನೆಲ್ಗಳಾಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ.
HSL ರ পৰা RGB ಗೆ ಪರಿವರ್ತನೆ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ
- S ಮತ್ತು L ಅನ್ನು ಭಿನ್ನರಾಶಿಗಳಾಗಿ ಪರಿವರ್ತಿಸಿ ಮತ್ತು chroma C = (1 − |2L − 1|) × S ಅನ್ನು ಗಣನೆ ಮಾಡಿ.
- ಬಣ್ಣ ಚಕ್ರದಲ್ಲಿ ಅದರ ವಿಭಾಗ ಕಂಡುಹಿಡಿಯಲು hue ಅನ್ನು 60 ರಿಂದ ಭಾಗಿಸಿ ಮತ್ತು ಮಧ್ಯವರ್ತಿಯ ಮೌಲ್ಯ X = C × (1 − |(H/60 mod 2) − 1|) ಅನ್ನು ಲೆಕ್ಕಿಸಿ.
- ಆ ವಿಭಾಗದ ಪ್ರಕಾರ C, X ಮತ್ತು 0 ಅನ್ನು R, G ಮತ್ತು B 슬롯್ಗಳಿಗೆ ನಿಯೋಜಿಸಿ.
- ಎಲ್ಲಾ ಮೂರು ಚಾನೆಲ್ಗಳಿಗೆ lightness ಆಫ್ಸೆಟ್ L − C/2 ಅನ್ನು ಸೇರಿಸಿ ಮತ್ತು 255 ರಿಂದ ಗುಣಿಸಿ.
ಕಾರ್ಯನಿರ್ವಹಿಸಿರುವ ಉದಾಹರಣೆ
ಅಂತಿಮ ಪೂರ್ಣ ಸಂಖ್ಯೆಗೆ ರೌಂಡಿಂಗ್ ಆಗುವವರೆಗೆ ಫಲাফল ನಿಖರ. ಭಿನ್ನರಾಶಿ hue ಅಥವಾ saturation ಮೌಲ್ಯಗಳನ್ನು ಬೆಂಬಲಿಸಲಾಗಿದೆ ಮತ್ತು ಅವು ಕಡಿಮೆ ಕೋಟಿ RGB ತ್ರಯದ ಬಳಿ ಸಮಾಪ್ತಿಯಾಗುತ್ತವೆ.
HSL ಮತ್ತು RGB ವಿವರಿಸಲಾಗಿದೆ
HSL ಏನು?
HSL ಒಂದು ಬಣ್ಣವನ್ನು ಹ್ಯೂ (ರಂಗದ ಚಕ್ರದಲ್ಲಿ 0–360°), ಸೆಚುರೇಶನ್ (ಎಷ್ಟು ಬಣ್ಣತೆಯಿದೆ, 0–100%) ಮತ್ತು ಲೈಟ್ನೆಸ್ (ಎಷ್ಟು ಗೋರುತ್ತದೆ, 0–100%) ಎಂದು ವಿಭಜಿಸುತ್ತದೆ. ಪ್ರತಿಯೊಂದು ಭಾಗವೂ ಜನರು ಬಣ್ಣವನ್ನು ವರ್ಣಿಸುವ ರೀತಿ ಹೊಂದಿರುವುದರಿಂದ, HSL ಟಿಂಟ್ಗಳು, ಷೇಡ್ಗಳು ಮತ್ತು ಸुसಂಗತ ಪ್ಯಾಲೆಟ್ಗಳನ್ನು — ಕೈಯಿಂದ ಅಥವಾ ಕೋಡ್ನಲ್ಲಿ — ನಿರ್ಮಿಸುವಲ್ಲಿ ಸುಲಭವಾಗಿದೆ.
- ವಿನ್ಯಾಸ:
- hsl(H, S%, L%)
- ಶ್ರೇಣಿ:
- 0–360°, 0–100%, 0–100%
- ಉತ್ತಮವಾಗಿ ಸರಿ:
- ಪ್ಯಾಲೆಟ್ಗಳು, ಟಿಂಟ್ಗಳು ಮತ್ತು ಷೇಡ್ಗಳು, ಥೀಮಿಂಗ್
RGB ಏನು?
RGB ಬಣ್ಣವನ್ನು ಮೂರು ಬೆಳಕು ಚಾನೆಲ್ಗಳಾಗಿ ವರ್ಣಿಸುತ್ತದೆ — ಕೆಂಪು, ಹಸಿರು ಮತ್ತು ನೀಲಿ — ಪ್ರತಿಯೊಂದು 0 ರಿಂದ 255 ರವರೆಗೆ. ಇದು ಮೇಲೆಗಳ ಕೆಲಸವನ್ನು ಮಿರರ್ ಮಾಡುತ್ತದೆ: ಎಲ್ಲಾ ಮೂರೂ 255 ಇದ್ದರೆ ಶ್ವೇತ, ಎಲ್ಲವೂ 0 ಇದ್ದರೆ ಕಪ್ಪು. RGB ಸಂಖ್ಯೆಗಳೊಂದಿಗೆ ಗಣನೆ ಮಾಡಬೇಕಾಗಿದ್ರೆ ಇದು ಸರಿಯಾದ ಆಯ್ಕೆಯಾಗಿದೆ, ಮತ್ತು rgba() ಪಾರದರ್ಶಕತೆಯನ್ನು ಸೇರಿಸುತ್ತದೆ.
- ವಿನ್ಯಾಸ:
- rgb(R, G, B)
- ಶ್ರೇಣಿ:
- ಪ್ರತಿಚಾನೆಲ್ 0–255
- ಉತ್ತಮವಾಗಿ ಸರಿ:
- ಕೋಡ್, ಕ್ಯಾನ್ವಾಸ್, rgba() ಮುಖಾಂತರ ಪಾರದರ್ಶಕತೆ
HSL ರ পৰা RGB ಗೆ ಸೂಚನಾ పట్టೆ
ಅತಿದೊಡ್ಡ ಸಾಮಾನ್ಯ CSS ಬಣ್ಣಗಳು, HSL ಯಿಂದ RGB ಗೆ ಪರಿವರ್ತಿಸಲ್ಪಟ್ಟಿವೆ.
| ಬಣ್ಣ | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |