HSL రంగును ప్రజలు మాట్లాడే విధంగా వివరిస్తుంది: ఏ హ్యూ, ఎంత రంగురంగులగా, ఎంత ప్రకాశవంతంగా. HEX కోడ్ను HSL లోకి మార్చడం, రంగును మీరు నిజంగా సర్దుబాటు చేయగల రూపంలోకి తీసుకురావడానికి వేగవంతమైన మార్గం: దాన్ని ప్రకాశవంతం చేయండి, మ్యూట్ చేయండి లేదా దాని నుండి మొత్తం స్కేల్ తయారు చేయండి.
HEX నుండి HSL మార్పుదల ఎలా జరుగుతుంది
- HEX కోడ్ను RGBకి మార్చి ప్రతి ఛానల్ను 255తో భాగించండి, అప్పుడు మూడు విలువలు 0 మరియు 1 మధ్యలో ఉంటాయి.
- మూడు విలువలలో అతిపెద్దదాన్ని మరియు అతికొద్దిదాన్ని కనుక్కోండి. వాటి సగం lightness L.
- వాటిలోని వ్యత్యాసం saturation Sని నిర్దేశిస్తుంది: లైట్ కలర్స్ కోసం దీన్ని (2 − max − min) తో భాగించండి, గాఢ కలర్స్ కోసం (max + min) తో భాగించండి.
- ఏ ఛానల్లో అతిపెద్ద విలువు ఉందో అది hue Hని నిర్ణయిస్తుంది — red 0°, green 120°, blue 240° — మరియు మిగతా రెండు ఛానళ్ళు ఆ సెగ్మెంట్లో హ్యూని స్థానం ఇస్తాయి.
ఉదాహరణతో పని చేయడం
గణితం ఖచ్చితంగా ఉంటుంది, కాని HSL విలువలు సాధారణంగా పూర్తి డిగ్రీలు మరియు శాతం గా వలే రౌండ్ చేయబడతాయి. కాబట్టి తిరిగి మార్చినప్పుడు ఒకటి లేదా రెండు RGB స్టెప్పుల దూరం ఉండవచ్చు — సాధారణంగా కనిపించదగ్గది కాదు, కానీ తరచుగా రౌండ్-ట్రిప్ చేస్తే తెలుసుకొనడంలో ఉపయోగపడుతుంది.
HEX మరియు HSL వివరాలు
HEX అంటే ఏమిటి?
HEX కోడ్ అనేది ఒక ఆరు-అంకెల హెక్సాడెసిమల్ సంఖ్య, ఇది రంగు యొక్క ఎరుపు, ఆకుపచ్చ మరియు నీలం ఛానల్స్‌ను ముందు # తో నిల్వ చేస్తుంది. ప్రతి జంట అంకెలు ఒక్కో ఛానల్ను సూచిస్తాయి, 00 (లేవు) నుండి FF (పూర్తిగా) వరకు, ఇది RGB లోని 16.7 మిలియన్ రంగులను సంక్షిప్త రీతిలో అందిస్తుంది. HEX CSS, design tools మరియు బ్రాండ్ మార్గదర్శకాలలో డిఫాల్ట్ గా ఉంటుంది.
- సింటాక్స్:
- #RRGGBB
- పరిధి:
- ప్రతి ఛానల్‌కు 00–FF
- ఉత్తమంగా ఉపయోగించే సందర్భం:
- CSS, design handoff, బ్రాండ్ మార్గదర్శకాలు
HSL అంటే ఏమిటి?
HSL ఒక రంగును హ్యూ (రంగు చక్రంలో 0–360°), సాచ్యురేషన్ (ఎంత రంగురంగులగా ఉందో, 0–100%) మరియు లైట్నెస్ (ఎంత ప్రకాశవంతంగా ఉందో, 0–100%) గా విభజిస్తుంది. ప్రతి భాగం ప్రజలు రంగును వివరించే విధానానికి సరిపోతుంది కాబట్టి, చేతితో లేదా కోడ్‌లో టింట్లు, షేడ్‌లు మరియు స్థిరమైన ప్యాలెట్లు తయారు చేయడానికి HSL అత్యంత సులభమైన ఫార్మాట్.
- సింటాక్స్:
- hsl(H, S%, L%)
- పరిధి:
- 0–360°, 0–100%, 0–100%
- ఉత్తమంగా ఉపయోగించే సందర్భం:
- ప్యాలెట్లు, టింట్లు మరియు షేడ్స్, థీమింగ్
HEX నుండి HSL రూపంలో రిఫరెన్స్ పట్టిక
అత్యధికంగా ఉపయోగించే CSS రంగులు, HEX నుండి HSL గా మార్చబడినవి.
| రంగు | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |