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 కోడ్, మరియు సాధారణంగా డిజైన్ టూల్ చూపించే ఫలితానికి సమానంగా ఉంటుంది.
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 |