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