HEX ను HSL గా మార్చడం Hexadecimal ↔ Hue Saturation Lightness ఉచితం ఆన్‌లైన్ సురక్షితం

మీరు HEX ను HSL గా ఎందుకు మారుస్తారు

#5A4632 లాంటి హెక్స్ కోడ్ రంగును నిల్వ చేయడానికి చక్కటి మార్గం, దాని గురించి ఆలోచించడానికి పేలవమైన మార్గం. అంకెల్లో ఏదీ ఆ రంగు గోధుమ రంగని, అది ఎంత ప్రకాశవంతమో, కొంచెం పాలిన వెర్షన్ ఎలా ఉంటుందో చెప్పదు. దాన్ని సరిచేయడానికి HSL కనుగొనబడింది. ఇది రంగును ప్రజలు మాట్లాడే విధంగా వర్ణిస్తుంది: అది ఏ వర్ణం, ఎంత గాఢమైనది, ఎంత తేలికైనది. HEX ను HSL గా మార్చడం అంటే రంగును డిజైన్ సాధనం మీకు ఇచ్చే రూపం నుంచి మీరు తర్కించగల రూపంలోకి అనువదించడం: hsl(30, 29%, 28%) ముదురు, మందకొడి నారింజ-గోధుమ, చివరి సంఖ్యను పెంచితే అది పాలిపోతుందని మీరు వెంటనే చూడవచ్చు.

డిజైనర్లు, ఫ్రంట్-ఎండ్ డెవలపర్లు ఈ మార్పిడిని వాడడానికి అసలు కారణం అదే. వారికి హెక్స్‌లో బ్రాండ్ రంగు ఉంటుంది, సంబంధిత రంగుల కుటుంబం అవసరం: హోవర్ స్థితికి తేలికైనది, నొక్కిన బటన్‌కు ముదురైనది, నేపథ్య టింట్‌కు చాలా పాలినది, డిసేబుల్ చేసిన కంట్రోల్‌కు సంతృప్తత తగ్గించినది. హెక్స్‌లో, వీటిలో ప్రతిదీ మూడు జతల అంకెల కోసం కొత్త వేట. HSL లో, ప్రతిదీ ఒక సంఖ్యలో మార్పు. రంగు అదే రంగు, మరింత ఉపయోగకరమైన కటకం గుండా చూడబడుతుంది.

ఈ పేజీ మీ బ్రౌజర్‌లో మారుస్తుంది, ఏదీ అప్‌లోడ్ కాదు. కింద HSL యొక్క మూడు సంఖ్యలు హెక్స్ అంకెల నుంచి ఎలా లెక్కించబడతాయో, మార్పిడి ఏమి నిలుపుకుంటుంది, ఎక్కడ రౌండ్ చేస్తుందో, ఆచరణలో వర్ణం, సంతృప్తత, తేలిక అంటే ఏమిటో, డిజైనర్లు పాలెట్‌లు, స్థితులను నిర్మించడానికి HSL ను ఎలా వాడతారో, HEX ను HSL గా మొదటిసారి మార్చే వారిని పట్టుకునే ఉచ్చులను మీరు చూస్తారు.

HSL ఏమి వర్ణిస్తుంది

వర్ణం: రంగు చక్రంపై స్థానం

వర్ణం అనేది రంగు చక్రం చుట్టూ 0 నుంచి 360 డిగ్రీల కోణం. ఎరుపు 0 వద్ద, పసుపు 60 వద్ద, ఆకుపచ్చ 120 వద్ద, సియాన్ 180 వద్ద, నీలం 240 వద్ద, మెజెంటా 300 వద్ద ఉంటాయి; 360 వద్ద మీరు మళ్లీ ఎరుపుకు వస్తారు. 30 వర్ణం ఎరుపు, పసుపు మధ్య, అది నారింజ. ఆ సంఖ్య మీరు ఏ రంగు కుటుంబంలో ఉన్నారో చెబుతుంది, అది ఎంత ప్రకాశవంతమో లేదా పాలినదో ఏమీ చెప్పదు.

సంతృప్తత: ఎంత గాఢం

సంతృప్తత ఒక శాతం. 100% వద్ద రంగు వర్ణం అనుమతించినంత స్వచ్ఛంగా ఉంటుంది; 0% వద్ద అది తన రంగు అంతా కోల్పోయి బూడిద రంగు అవుతుంది. మా ఉదాహరణ గోధుమ రంగులో లాగా 29% సంతృప్తత మందకొడి, మట్టి రంగు. సంతృప్తతను తగ్గించడం పెద్ద రంగును దాని స్వభావాన్ని మార్చకుండా ప్రశాంతంగా చేసే వేగవంతమైన మార్గం.

తేలిక: ఎంత పాలిన లేదా ముదురు

తేలిక కూడా ఒక శాతం. 0% వద్ద వర్ణం, సంతృప్తత ఏదైనా రంగు నలుపు; 100% వద్ద తెలుపు; 50% వద్ద పూర్తి, సాధారణ రంగు. మా గోధుమ రంగు 28% వద్ద ముదురు వైపు ఉంది. సంఖ్యను పెంచితే అదే రంగు పాలిన వెర్షన్, తగ్గిస్తే ముదురైనది వస్తుంది, డిజైనర్లు చాలా తరచూ కోరుకునే మార్పు సరిగ్గా అదే.

ఇది హెక్స్ కంటే ఎందుకు సులువు

హెక్స్‌లో, రంగును పాలినదిగా చేయడం అంటే వర్ణం జారిపోకుండా మూడు జతలను వేర్వేరు మొత్తాల్లో పెంచడం, కంటితో చేయడం దాదాపు అసాధ్యం. HSL లో అది ఒకే సంఖ్యను మార్చి మిగిలిన రెండింటినీ వదిలేయడం.

మార్పిడి ఎలా పని చేస్తుంది

మూడు బైట్ల నుంచి ఒక కోణం, రెండు శాతాలకు

కన్వర్టర్ మొదట హెక్స్ అంకెలను ఎరుపు, ఆకుపచ్చ, నీలం విలువలుగా, ప్రతి ఒక్కటి 0 నుంచి 255 వరకు, చదివి, వాటిని 0 నుంచి 1 మధ్యకు స్కేల్ చేస్తుంది. అది మూడింటిలో పెద్దది, చిన్నది కనుగొంటుంది. తేలిక రెండింటి సగటు. సంతృప్తత అవి ఎంత దూరంలో ఉన్నాయి, తేలికకు సంబంధించి, అనే దానిపై ఆధారపడుతుంది. వర్ణం ఏ ఛానెల్ పెద్దది, మిగిలిన రెండూ ఎలా పోలుతాయి అనే దానిపై ఆధారపడుతుంది. మూడూ సమానమైతే, రంగు బూడిద, సంతృప్తత సున్నా, వర్ణానికి అర్థం ఉండదు; అప్పుడు కన్వర్టర్ దానికి 0 చూపిస్తుంది.

ఉదాహరణ

#5A4632 కు బైట్లు 90, 70, 50. ఎరుపు 0.353 వద్ద పెద్దది, నీలం 0.196 వద్ద చిన్నది. తేలిక వాటి మొత్తంలో సగం, 0.275, సుమారు 28%. వ్యత్యాసం 0.157, కాబట్టి సంతృప్తత 0.157 ను మొత్తం 0.549 తో భాగించగా, సుమారు 29%. ఎరుపు పెద్ద ఛానెల్, ఆకుపచ్చ మధ్యలో ఉంది, అది వర్ణాన్ని 30 డిగ్రీల వద్ద ఉంచుతుంది. ఫలితం hsl(30, 29%, 28%).

పూర్ణ సంఖ్యలు

మూడు సంఖ్యలు రాసినప్పుడు పూర్ణ డిగ్రీలకు, పూర్ణ శాతాలకు రౌండ్ చేయబడతాయి. ప్రజలు వాడే రూపం, CSS రోజువారీ పనిలో ఆశించే రూపం అదే, కానీ తర్వాతి విభాగం వివరించినట్టు చివరి అంకె వద్ద కొంత సమాచారం వదిలివేయబడుతుందని అర్థం.

మార్పిడి ఏమి నిలుపుకుంటుంది, ఏది నిలుపుకోలేదు

కన్ను వర్గీకరించే విధంగా రంగును నిలుపుకుంటుంది

ఫలితం కన్ను వర్గీకరించే విధంగా రంగు: చక్రంపై వర్ణం, ఎంత సంతృప్తం, ఎంత తేలిక. అందుకే HSL ఉండడం విలువైనది. మీరు ఒక సంఖ్యను మార్చడం ద్వారా రంగును పాలినదిగా లేదా ఒక షేడ్ ముదురుగా చేయవచ్చు, హెక్స్‌లో అది దాదాపు అసాధ్యం.

అవే బైట్లు తిరిగి వస్తాయని హామీ ఇవ్వలేదు

రెండూ ఒకే రంగులను వర్ణిస్తాయి, కానీ HSL వాటిని వేరే జ్యామితి ద్వారా చేరుతుంది, దాని మూడు సంఖ్యలు రాసినప్పుడు పూర్ణ డిగ్రీలకు, పూర్ణ శాతాలకు రౌండ్ చేయబడతాయి. కాబట్టి HSL కి తీసుకెళ్లి తిరిగి తెచ్చిన రంగు మొదలుపెట్టిన చోటు నుంచి ఒకటి లేదా రెండు అడుగుల దూరంలో ముగియవచ్చు: దృశ్యపరంగా ఒకటే, బైట్‌కు బైట్ ఒకటే కాదు. మీకు ఖచ్చితమైన బైట్లు తిరిగి కావాలంటే, హెక్స్‌ను ఉంచండి. రంగుతో పని చేయడానికి HEX ను HSL గా మార్చండి, హెక్స్‌ను మాస్టర్‌గా ఉంచండి.

బూడిద రంగులకు వర్ణం లేదు

మూడు బైట్లు సమానమైనప్పుడు, వర్ణం గురించి చెప్పడానికి ఏమీ లేదు. కన్వర్టర్ 0 వర్ణాన్ని, 0% సంతృప్తతను ఇస్తుంది, తేలిక మాత్రమే బూడిద రంగును వర్ణిస్తుంది. 0 లో ఏదీ ఊహించవద్దు.

ఆచరణలో HSL వాడడం

షేడ్‌ల కుటుంబాన్ని నిర్మించడం

బేస్ రంగు hsl(30, 29%, 28%) తీసుకోండి. హోవర్‌కు తేలికైన షేడ్ hsl(30, 29%, 34%). నేపథ్యానికి చాలా పాలిన టింట్ hsl(30, 29%, 94%). నొక్కిన స్థితులకు ముదురైన షేడ్ hsl(30, 29%, 22%). వర్ణం, సంతృప్తత స్థిరంగా ఉంటాయి, కాబట్టి రంగులు స్పష్టంగా కలిసి ఉంటాయి. హెక్స్‌లో అదే చేయడానికి చాలా ప్రయత్నాలు పడతాయి, ఇంకా కొద్దిగా తప్పుగా కనిపిస్తుంది.

థీమింగ్, డార్క్ మోడ్

థీమ్‌కు తరచూ ఒకే పాలెట్ తేలికైన, ముదురైన వెర్షన్‌లో అవసరం. HSL తో, మీరు వర్ణాన్ని ఉంచి తేలిక, సంతృప్తతను సర్దుబాటు చేస్తారు: లైట్ థీమ్‌కు నేపథ్యాలను తేలిక చేసి వచనాన్ని ముదురు చేయండి, డార్క్‌కు వ్యతిరేకంగా. వర్ణాన్ని కస్టమ్ ప్రాపర్టీగా నిర్వచించి తేలికను మాత్రమే మార్చడం దాన్ని చేయడానికి సాధారణ, చక్కటి మార్గం.

పాలెట్‌లను సృష్టించడం

బేస్‌తో సరిపోయే రంగులను కనుగొనడానికి, వర్ణాన్ని తిప్పండి. ఇరువైపులా ముప్పై డిగ్రీలు అనలాగస్ రంగులను ఇస్తుంది, 180 పూరక రంగును ఇస్తుంది, 120 లేదా 240 ట్రయాడ్ ఇస్తాయి. సంతృప్తత, తేలికను స్థిరంగా ఉంచి, వర్ణాన్ని మార్చండి, రంగులకు ఏకరీతి అనుభూతి ఉంటుంది. యాదృచ్ఛికంగా కనిపించని పాలెట్‌ను మొదలుపెట్టడానికి ఇది వేగవంతమైన మార్గం.

అందుబాటు కాంట్రాస్ట్

కాంట్రాస్ట్‌కు తేలిక ప్రధాన నియంత్రణ. రంగు నేపథ్యంపై వచనం చదవడం కష్టమైతే, పరిష్కారం సాధారణంగా వాటి మధ్య తేలిక వ్యత్యాసాన్ని పెంచడం, HSL దాన్ని ప్రతి వైపున ఒక సంఖ్యను సర్దుబాటు చేసే విషయంగా చేస్తుంది.

ఇక్కడ HEX ను HSL గా ఎలా మార్చాలి

హెక్స్ కోడ్‌ను టైప్ చేయండి లేదా పేస్ట్ చేయండి

మొదటి ఫీల్డ్‌లో రంగును, హ్యాష్ గుర్తుతో లేదా లేకుండా, నమోదు చేయండి. మూడు, ఆరు అంకెల రూపాలు అంగీకరించబడతాయి, పారదర్శకతతో ఎనిమిది అంకెల రూపం కూడా చదవబడుతుంది.

hsl విలువను చదవండి

సమాధానం వెంటనే కనిపిస్తుంది, #5A4632 = hsl(30, 29%, 28%) లాగా. మూడు సంఖ్యలు డిగ్రీల్లో వర్ణం, శాతంలో సంతృప్తత, తేలిక.

దాన్ని మీ స్టైల్‌షీట్‌లోకి కాపీ చేయండి

ఫలితాన్ని color: hsl(30, 29%, 28%) లాంటి నియమంలో ఉన్నది ఉన్నట్టే వాడండి. రంగును సర్దుబాటు చేయడానికి, చివరి సంఖ్యను మార్చండి. వ్యతిరేక దిశకు సాధనం HSL ను HEX గా.

ఈ సంకేతాలు ఎక్కడి నుంచి వచ్చాయి

హెక్స్, RGB రెండుసార్లు రాసిన ఒకే విషయం

తెర రంగు మూడు సంఖ్యలు, ఎంత ఎరుపు, ఆకుపచ్చ, నీలం కాంతిని ప్రసరించాలి, ప్రతి ఒక్కటి 0 నుంచి 255 వరకు, అది ఒక బైట్. హెక్స్ ఆ బైట్లను బేస్ పదహారులో రాస్తుంది అంతే. సంఖ్యలు చూడడానికి, HEX ను RGB గా మార్చండి.

HSL, CMYK

రెండూ మనిషికి చదవడానికి వీలుగా లేనందున HSL కనుగొనబడింది: ఇది రంగు చక్రం చుట్టూ కోణంగా వర్ణాన్ని, సంతృప్తత, తేలికను శాతాలుగా ఇస్తుంది, కాబట్టి డిజైనర్ మూడు సంఖ్యలను తిరిగి లెక్కించకుండా ఏదైనా తేలికగా చేయగలడు. CMYK పూర్తిగా వేరే ప్రపంచానికి చెందినది, కాంతికి బదులు ఇంకు. ఇది వ్యవకలన పద్ధతి, నాలుగు ప్రింటింగ్ ప్లేట్లతో నిర్మించబడింది, తెర ఏ రంగునైనా చేరగలదు కానీ ఇది చేరలేదు, ఎందుకంటే తెర కాంతిని ప్రసరిస్తుంది, కాగితం ప్రతిబింబిస్తుంది మాత్రమే.

HEX ను HSL గా మార్చేటప్పుడు ఉచ్చులు

పరిపూర్ణ రౌండ్ ట్రిప్ ఆశించడం

రౌండింగ్ కారణంగా, తిరిగి మార్చడం అసలు నుంచి ఒకటి లేదా రెండు అడుగుల దూరంలో కోడ్‌ను ఇవ్వవచ్చు. ఒక్క రంగుకు అది కనిపించదు. చాలా రంగులు అటూ ఇటూ మార్చబడే డిజైన్ సిస్టమ్‌కు, అది పేరుకుపోవచ్చు. హెక్స్‌ను మూలంగా ఉంచండి.

సమాన తేలిక అంటే సమాన ప్రకాశమని భావించడం

ఒకే HSL తేలిక ఉన్న రెండు రంగులు ప్రకాశంలో చాలా భిన్నంగా కనిపించవచ్చు: 50% వద్ద పసుపు 50% వద్ద నీలం కంటే చాలా ప్రకాశవంతంగా కనిపిస్తుంది. HSL తేలిక ఒక సౌకర్యవంతమైన సంఖ్య, గ్రహించిన ప్రకాశానికి కొలత కాదు. కాంట్రాస్ట్ తనిఖీలకు, సరైన కాంట్రాస్ట్ సాధనాన్ని వాడండి.

శాతం గుర్తులను మరచిపోవడం

CSS లో, hsl() లో సంతృప్తత, తేలిక శాతం గుర్తులను కలిగి ఉంటాయి, వర్ణం సాధారణ సంఖ్య లేదా deg తో సంఖ్య. గుర్తులను వదిలేయడం క్లాసిక్ పొరపాటు.

బూడిద రంగులో ఎక్కువ చదవడం

బూడిద రంగుకు వర్ణం లేదు. కన్వర్టర్ దానికి 0 చూపిస్తే, అది ఎర్రగా ఉందని అర్థం కాదు.

మార్చే ముందు ప్రజలు అడిగే ప్రశ్నలు

HSL లో #FF0000 ఏమిటి?

hsl(0, 100%, 50%), స్వచ్ఛమైన ఎరుపు.

HSL లో #FFFFFF ఏమిటి?

hsl(0, 0%, 100%), తెలుపు. తెలుపుకు వర్ణం అర్థరహితం, కన్వర్టర్ 0 చూపిస్తుంది.

HSL అన్నిచోట్లా మద్దతు పొందిందా?

అన్ని ప్రస్తుత బ్రౌజర్‌లు hsl(), hsla() ను అర్థం చేసుకుంటాయి. ఇది చాలా సంవత్సరాలుగా CSS లో ఉంది.

మార్పిడి ఖచ్చితమైనదా?

ఇది ఒకే రంగును వర్ణించే అర్థంలో ఖచ్చితమైనది, కానీ సంఖ్యలు పూర్ణ డిగ్రీలకు, శాతాలకు రౌండ్ చేయబడతాయి, కాబట్టి తిరిగి వెళ్లడం ఒక అడుగు దూరంలో ముగియవచ్చు.

నా రంగు అప్‌లోడ్ అవుతుందా?

లేదు. అంకగణితం మీ బ్రౌజర్‌లో నడుస్తుంది, ఏదీ ఎక్కడికీ పంపబడదు.

తిరిగి ఎలా వెళ్లాలి?

HSL ను HEX గా తో.

HEX ను HSL గా మార్చేటప్పుడు తెలివిగా ఎంచుకోవడం

పని చేయడానికి HSL, నిల్వకు హెక్స్ వాడండి

మాస్టర్ పాలెట్‌ను హెక్స్‌లో ఉంచండి, అక్కడ అది సందిగ్ధత లేనిది, వైవిధ్యాలను సృష్టించాలనుకున్నప్పుడు HSL వాడండి. రౌండ్ ట్రిప్‌లు కొంత కోల్పోతాయి; మాస్టర్ కోల్పోదు.

కొత్త రంగు స్థలాలను పరిగణించండి

CSS ఇప్పుడు oklch() లాంటి సంకేతాలను అందిస్తుంది, వాటిలో సమాన తేలిక నిజంగా సమానంగా కనిపిస్తుంది. కొత్త డిజైన్ సిస్టమ్‌ల కోసం అవి నేర్చుకోదగినవి. HSL దాదాపు అందరూ అర్థం చేసుకునే, ప్రతి సాధనం మద్దతిచ్చే సంకేతంగా మిగిలి ఉంది.

కస్టమ్ ప్రాపర్టీలు వాడండి

--hue, --sat, --light ను నిర్వచించి, వాటి నుంచి రంగులు నిర్మించండి: hsl(var(--hue) var(--sat) var(--light)). అప్పుడు కొన్ని సంఖ్యలను సవరించడం ద్వారా థీమ్ మారుతుంది.

HSL ను నమ్మకంగా చదవడం, రాయడం

గుర్తుంచుకోవాల్సిన కొన్ని మైలురాళ్లు

కొన్ని సంఖ్యలు HSL ను చదవడం సులువు చేస్తాయి. 60 గుణకాల వద్ద వర్ణాలు స్వచ్ఛమైన రంగులు: 0 ఎరుపు, 60 పసుపు, 120 ఆకుపచ్చ, 180 సియాన్, 240 నీలం, 300 మెజెంటా. 50 తేలిక, 100 సంతృప్తత ఏ వర్ణానికైనా స్వచ్ఛమైన వెర్షన్‌ను ఇస్తాయి, 95 లేదా అంతకంటే ఎక్కువ తేలిక నేపథ్యంగా పని చేసేంత పాలిన టింట్. మీరు HEX ను HSL గా మార్చి ఈ మైలురాళ్లలో ఒకదాని దగ్గర వర్ణాన్ని చూసినప్పుడు, రంగు కుటుంబానికి ఒక్క చూపులో పేరు పెట్టవచ్చు.

కుటుంబాల మధ్య కదలడం

వర్ణానికి 180 కలిపితే చక్రంపై ఎదురుగా ఉన్న రంగు వస్తుంది, అది పూరకం, సాధారణంగా బలమైన కాంట్రాస్ట్. 30 కలపడం లేదా తీసివేయడం అసలు పక్కన సౌకర్యంగా కూర్చునే పొరుగును ఇస్తుంది. బ్రాండ్ రంగుకు సరిపోయే యాక్సెంట్‌లను ఊహించకుండా ఎంచుకోవడానికి డిజైనర్లు ఈ అడుగులను వాడతారు.

మార్చిన విలువల నోట్ ఉంచడం

మీరు పాలెట్ కోసం HEX ను HSL గా మార్చినప్పుడు, ఫలితాలను వాటి పక్కన అసలు హెక్స్‌తో పట్టికలో రాయండి. పట్టిక రంగులు ఎలా సంబంధం కలిగి ఉన్నాయో చూపిస్తుంది, వర్ణం లేదా తేలిక ఇతరులతో సరిపోకపోతే, వింత వెంటనే కనిపిస్తుంది. ఇది మీ బృందానికి ఉమ్మడి సూచనను కూడా ఇస్తుంది.

నిజమైన తెరలపై పరీక్షించడం

క్రమాంకనం చేసిన మానిటర్‌పై సమతుల్యంగా కనిపించే రంగులు ఎండలో ఫోన్‌లో లేదా చవకైన ల్యాప్‌టాప్‌లో భిన్నంగా కనిపించవచ్చు. పూర్తయిన పాలెట్‌ను కనీసం రెండు పరికరాల్లో తనిఖీ చేసి, వాటిలో ఒకదానిలో పాలిన టింట్‌లు మాయమైతే తేలికను కొద్దిగా సర్దుబాటు చేయండి.

సంబంధిత కన్వర్టర్లు

ఇదే సాధనాల కుటుంబం పక్కనున్న మార్పిడులను కవర్ చేస్తుంది. తిరిగి వెళ్లడానికి, HSL ను HEX గా వాడండి. కోడ్ వెనుక ఉన్న సంఖ్యల కోసం, HEX ను RGB గా, RGB ను HEX గా ఉన్నాయి, ప్రింట్ కోసం, HEX ను CMYK గా, CMYK ను HEX గా. అదే స్టైల్‌షీట్‌లోని పరిమాణాల కోసం, ఈ పేజీ రంగులకు చేసేది px ను rem గా, px ను em గా పొడవులకు చేస్తాయి.

ఒక పని చేసిన ఉదాహరణ

మీ బ్రాండ్ రంగు #1E7A5C అనుకోండి. మీరు HEX ను HSL గా మార్చి hsl(160, 61%, 30%) చదువుతారు. హోవర్ స్థితికి మీరు hsl(160, 61%, 36%), కొంచెం తేలికైనది రాస్తారు. నొక్కిన స్థితికి, hsl(160, 61%, 24%). నోటీసు వెనుక చాలా పాలిన నేపథ్యానికి, hsl(160, 40%, 95%). డిసేబుల్ చేసిన బటన్‌కు, hsl(160, 12%, 60%), రంగులో ఎక్కువ భాగం తీసివేసిన అదే వర్ణం. ఐదు రంగులు, ఒక వర్ణం, ఒక నిమిషంలో రాసినవి, అన్నీ కలిసి ఉన్నట్టే కనిపిస్తాయి. బ్రాండ్ రంగు మారినప్పుడు, మీరు వర్ణ సంఖ్యను ఒకసారి మారుస్తారు.

ఒక చిన్న చెక్‌లిస్ట్

మార్చే ముందు

రంగుతో ఏమి చేయాలనుకుంటున్నారో నిర్ణయించండి: వైవిధ్యాలు చేయడం, థీమ్ చేయడం లేదా కేవలం చదవడం.

మార్చేటప్పుడు

హెక్స్‌ను పేస్ట్ చేసి, hsl చదివి, మూడు సంఖ్యలను నోట్ చేయండి.

మార్చిన తర్వాత

ఒకసారికి ఒక సంఖ్యను మార్చి వైవిధ్యాలు చేసి, నిజమైన నేపథ్యంపై వాటిని చూడండి.

సాధారణ పొరపాట్లు

రౌండ్ చేసిన సంఖ్యలను ఖచ్చితమైనవిగా పరిగణించడం

అవి పూర్ణ సంఖ్యలు. హెక్స్‌ను మాస్టర్‌గా ఉంచండి.

తేలికను ప్రకాశంతో సమానం చేయడం

ఒకే తేలిక ఉన్న రెండు రంగులు ఎంత ప్రకాశవంతంగా కనిపిస్తాయో అందులో చాలా తేడా ఉండవచ్చు.

శాతం గుర్తులను వదిలేయడం

CSS లో సంతృప్తత, తేలికకు అవి అవసరం.

మీ రంగులు మీ పరికరంలోనే ఉంటాయి

లెక్క స్థానికంగా జరుగుతుంది. మీ విలువలను మీ సొంత బ్రౌజర్ వాడుతుంది, ఏదీ ఎక్కడికీ పంపబడదు. తర్వాత తొలగించడానికి ఏమీ లేదు, సృష్టించడానికి ఖాతా లేదు. HEX ను HSL గా మార్చడానికి అదే సరళమైన మార్గం.

సారాంశం

ఇక్కడ HEX ను HSL గా మార్చడానికి, హెక్స్ కోడ్‌ను టైప్ చేయండి లేదా పేస్ట్ చేయండి, hsl విలువను వెంటనే చదవండి. మార్పిడి కన్ను వర్గీకరించే విధంగా రంగును నిలుపుకుంటుంది: చక్రంపై వర్ణం, ఎంత సంతృప్తం, ఎంత తేలిక. అందుకే HSL ఉండడం విలువైనది, ఎందుకంటే మీరు ఒక సంఖ్యను మార్చడం ద్వారా రంగును పాలినదిగా లేదా ఒక షేడ్ ముదురుగా చేయవచ్చు, హెక్స్‌లో అది దాదాపు అసాధ్యం. రెండూ ఒకే రంగులను వర్ణిస్తాయి, కానీ HSL వాటిని వేరే జ్యామితి ద్వారా చేరుతుంది, దాని మూడు సంఖ్యలు పూర్ణ డిగ్రీలకు, పూర్ణ శాతాలకు రౌండ్ చేయబడతాయి, కాబట్టి HSL కి తీసుకెళ్లి తిరిగి తెచ్చిన రంగు మొదలుపెట్టిన చోటు నుంచి ఒకటి లేదా రెండు అడుగుల దూరంలో ముగియవచ్చు. మీకు ఖచ్చితమైన బైట్లు తిరిగి కావాలంటే, హెక్స్‌ను ఉంచండి. ఏదీ అప్‌లోడ్ కాదు.