HSL రంగులను సౌమ్యంగా ఎంపికచేసే మార్గం, RGB అయితే స్క్రీన్లు, canvas APIs మరియు ఇమేజ్ కోడ్ వాస్తవంగా వినియోగించేది. ఈ కన్వర్టర్ ఏదైనా hue, saturation మరియు lightness ట్రిపిల్‌ను ఖచ్చితమైన 0–255 చానెల్‌లకు మార్చుతుంది.
HSL నుండి RGB మార్పుదల ఎలా జరుగుతుంది
- S మరియు L ను భాగాలుగా మార్చి క్రోమా C = (1 − |2L − 1|) × S ను లెక్కించండి.
- హ్యూ‌ను 60తో భాగించి రంగుల చక్రంలోని సెగ్మెంట్‌ను కనుగొనండి మరియు మధ్య విలువ X = C × (1 − |(H/60 mod 2) − 1|) ను లెక్కించండి.
- ఆ సెగ్మెంట్ ఆధారంగా R, G మరియు B స్థానాలకు C, X మరియు 0 ను కేటాయించండి.
- లైట్నెస్ ఆఫ్సెట్ L − C/2 ను అన్ని మూడు చానెల్స్‌కు జోడించి 255తో గుణించండి.
ఉదాహరణతో పని చేయడం
చివరి రౌండింగ్కు ముందు ఫలితం ఖచ్చితంగా ఉంటుంది. భిన్నమైన హ్యూ లేదా సాచురేషన్ విలువలు అన్ని మద్దతు పొందుతాయి మరియు సరిహద్దు 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
- ఉత్తమంగా ఉపయోగించే సందర్భం:
- code, canvas, 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) |