RGB స్క్రీన్‌కు ఎంత లైట్ విడుదల చేయాలో చెప్తుంది; HSL రంగు ఎలా కనిపించేది అనేదాన్ని చెప్తుంది. మూడు ఛానళ్లను హ్యూ, సంతైషన్ మరియు లైట్నెస్‌గా మార్చితే రంగును చేతితో సాకారంగా సవరించడం సులభం అవుతుంది.
RGB నుండి HSL మార్పుదల ఎలా జరుగుతుంది
- R, G మరియు Bని 255తో భాగించి ప్రతి విలువను 0 మరియు 1 మధ్య ఉంచండి.
- మూడు విలువలలో గరిష్టం మరియు కనిష్ఠం తీసుకోండి — వాటి సగం lightness L.
- గరిష్టం మరియు కనిష్ఠం సమానమైతే రంగు గ్రే: hue మరియు saturation రెండూ 0.
- లేకపోతే, గరిష్ట మరియు కనిష్ట విలువల మధ్య వ్యత్యాసం నుండి S ను లెక్కించండి, మరియు గరిష్టంగా ఉన్న ఛానెల్ నుండి 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%) |