RGB స్క్రీన్కు ఎంత లైట్ విడుదల చేయాలో చెప్తుంది; HSL రంగు ఎలా కనిపించేది అనేదాన్ని చెప్తుంది. మూడు ఛానళ్లను హ్యూ, సంతైషన్ మరియు లైట్నెస్గా మార్చితే రంగును చేతితో సాకారంగా సవరించడం సులభం అవుతుంది.
RGB నుండి HSL మార్పుదల ఎలా జరుగుతుంది
- R, G మరియు Bని 255తో భాగించి ప్రతి విలువను 0 మరియు 1 మధ్య ఉంచండి.
- మూడు విలువలలో గరిష్టం మరియు కనిష్ఠం తీసుకోండి — వాటి సగం lightness L.
- గరిష్టం మరియు కనిష్ఠం సమానమైతే రంగు గ్రే: hue మరియు saturation రెండూ 0.
- లేనివైపు ఉంటే saturationని గరిష్టం మరియు కనిష్ఠం మధ్య వ్యత్యాసం నుండి निकొఱి, మరియు Hను గరిష్టమైన ఛానల్ నుండి చదువుకోండి.
ఉదాహరణతో పని చేయడం
సిద్ధాంతంలో ఖచ్చితంగా. H, S మరియు L సాధారణంగా పూర్తి సంఖ్యలుగా రౌండ్ చేయబడే కారణంగా, తిరిగి మార్చినప్పుడు ఒక ఛానల్ ఒకటి లేదా రెండు స్టెప్పులవరకు మారవచ్చు.
RGB మరియు HSL వివరాలు
RGB అంటే ఏమిటి?
RGB ఒక రంగును త్రీ ఛానల్లుగా వివరిస్తుంది — ఎరుపు, ఆకుపచ్చ మరియు నీలం — ప్రతి ఒక్కటి 0 నుంచి 255 వరకూ ఉంటుంది. ఇది స్క్రీన్లు ఎలా పని చేస్తాయో ప్రతిబింబిస్తుంది: మూడింటి 모두 255 అయితే తెల్లగా, అంతే 0 అయితే నల్లగా ఉంటుంది. RGB ని మీరు సంఖ్యలతో లెక్కించడం అవసరమైతే ఉపయోగించండి; rgba() ద్వారా పారదర్శకతను కలపవచ్చు.
- సింటాక్స్:
- rgb(R, G, B)
- పరిధి:
- ప్రతి ఛానల్కు 0–255
- ఉత్తమంగా ఉపయోగించే సందర్భం:
- code, canvas, 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%) |