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) |