HSLలో రంగును ఎంచుకోవడం సౌకర్యవంతం, కానీ stylesheets, design handoffs మరియు brand డాక్యుమెంట్లు ఇంకా HEXపై పని చేస్తాయి. ఈ కన్వర్టర్ ఆ గ్యాప్‌ను మూసి ఏ హ్యూ, సంతైషన్ మరియు లైట్నెస్ కాంబినేషన్ కోసం ఆరు-అంకెల కోడ్ ఇస్తుంది.
HSL నుండి HEX మార్పుదల ఎలా జరుగుతుంది
- saturation మరియు lightnessని భాగాలుగా మార్చండి: 60% అవుతుంది 0.6.
- చ్రోమా C = (1 − |2L − 1|) × S ని గణించండి — ఇది రంగు గ్రే నుంచి ఎంత దూరంగా ఉందో చూపిస్తుంది.
- హ్యూను ఉపయోగించి ఆ చ్రోమాను red, green మరియు blue ఛానళ్లపై పెట్టండి, ఆపై అన్ని మూడు విలువలను L − C/2 తో షిఫ్ట్ చేయండి.
- ప్రతి ఛానల్ను 255తో గుణించి, రౌండ్ చేసి, రెండు హెక్సడెసిమల్ అంకెలుగా రాశి.
ఉదాహరణతో పని చేయడం
రౌండింగ్ చివరి దశలో ఒకసారి జరుగుతుంది, ప్రతి ఛానల్ను 0–255 పూర్తి విలువకి స్నాప్ చేసినప్పుడు. ఫలితం మీ HSL ఇన్పుట్కు అత్యంత సమీప HEX కోడ్ మరియు సాధారణంగా design టూల్ చూపించే ఫలితం తో ஒத்தిదే ఉంటుంది.
HSL మరియు HEX వివరాలు
HSL అంటే ఏమిటి?
HSL ఒక రంగును హ్యూ (రంగు చక్రంలో 0–360°), స్యాచురేషన్ (రంగు తీవ్రత, 0–100%) మరియు లైట్నెస్ (తీవ్రత, 0–100%) గా విడగొడుతుంది. ప్రతి భాగం 사람들이 రంగును వివరిస్తున్న పద్ధతిని అనుసరించడంతో, HSL టింట్లు, షేడ్లు మరియు సారూప్య ప్యాలెట్లు — చేతితో లేదా కోడ్‌లో — తయారుచేయడానికి సులభమైన ఫార్మాట్.
- సింటాక్స్:
- hsl(H, S%, L%)
- పరిధి:
- 0–360°, 0–100%, 0–100%
- ఉత్తమంగా ఉపయోగించే సందర్భం:
- ప్యాలెట్లు, టింట్లు మరియు షేడ్స్, థీమింగ్
HEX అంటే ఏమిటి?
HEX కోడ్ అనేది ఒక ఆరు-అంకెల హెక్సాడెసిమల్ సంఖ్య, ఇది రంగు యొక్క ఎరుపు, ఆకుపచ్చ మరియు నీలం ఛానల్స్‌ను ముందు # తో నిల్వ చేస్తుంది. ప్రతి జంట అంకెలు ఒక్కో ఛానల్ను సూచిస్తాయి, 00 (లేవు) నుండి FF (పూర్తిగా) వరకు, ఇది RGB లోని 16.7 మిలియన్ రంగులను సంక్షిప్త రీతిలో అందిస్తుంది. HEX CSS, design tools మరియు బ్రాండ్ మార్గదర్శకాలలో డిఫాల్ట్ గా ఉంటుంది.
- సింటాక్స్:
- #RRGGBB
- పరిధి:
- ప్రతి ఛానల్‌కు 00–FF
- ఉత్తమంగా ఉపయోగించే సందర్భం:
- CSS, design handoff, బ్రాండ్ మార్గదర్శకాలు
HSL నుండి HEX రూపంలో రిఫరెన్స్ పట్టిక
అత్యధికంగా ఉపయోగించే CSS రంగులు, HSL నుండి HEX గా మార్చబడినవి.
| రంగు | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |