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