HSL ను HEX గా మార్చడం Hue Saturation Lightness ↔ Hexadecimal ఉచితం ఆన్లైన్ సురక్షితం
HSL లో ఒక విలువ రాయండి, అక్కడే దాన్ని HEX గా చదువుకోండి. లెక్క మీ బ్రౌజర్లోనే జరుగుతుంది, ఎక్కడికీ ఏదీ పంపబడదు, జవాబు దేనిమీద ఆధారపడుతుందో ఊహించకుండా కింద రాసి ఉంది.
ఏదీ అప్లోడ్ కాదు
ఈ రాత పద్ధతులు ఎక్కడి నుండి వచ్చాయి
హెక్స్, RGB ఒకే విషయాన్ని రెండుసార్లు రాసినవి. తెర మీది రంగు అంటే మూడు సంఖ్యలు — ఎంత ఎరుపు, ఆకుపచ్చ, నీలి కాంతిని వెలువరించాలి — ఒక్కొక్కటీ 0 నుండి 255 దాకా, అంటే ఒక బైటు; హెక్స్ ఆ బైట్లను పదహారు ఆధారంలో రాస్తుందంతే; కాబట్టి #FF8800, rgb(255, 136, 0) రెండూ ఒకే పిక్సెల్కు ఇచ్చిన ఒకే ఆజ్ఞ. HSL కనిపెట్టడానికి కారణం — ఆ రెండూ మనిషికి చదవడానికి పనికిరావు. అది రంగు ఛాయను రంగు చక్రం మీది కోణంగా, సాంద్రతను, ప్రకాశాన్ని శాతాలుగా ఇస్తుంది; కాబట్టి డిజైనరు మూడు అంకెలను మళ్ళీ లెక్కించకుండానే దేన్నైనా లేతగా చేయగలడు. CMYK పూర్తిగా వేరే ప్రపంచానిది — కాంతిది కాదు, సిరాది. అది వ్యవకలన పద్ధతిది, నాలుగు ముద్రణ ఫలకాలతో కట్టినది; తెర ఇవ్వగల ప్రతి రంగునూ అందుకోలేదు — ఎందుకంటే తెర కాంతిని వెలువరిస్తుంది, కాగితం దాన్ని ప్రతిఫలించడమే చేస్తుంది.
ఇవి మీకు ఎక్కడ ఎదురవుతాయి
హెక్స్ అంటే మీరు స్టైల్షీటులో టైపు చేసేది, డిజైను పనిముట్టు మీ చేతికిచ్చేది. RGB రంగుకు లెక్క అవసరమైన ప్రతిచోటా కనిపిస్తుంది: వర్ణక్రమాలు, పారదర్శకత, ఒక ఛాయను లెక్కించే కోడు. ఒక రంగుల పలకను చేత్తో సరిచేసేటప్పుడు HSL వైపు చెయ్యి వెళ్తుంది — ఎందుకంటే కోరుకునే మార్పులు సాధారణంగా దాని మూడు అంకెల్లో ఒకదాని మార్పే. CMYK అంటే ముద్రణాలయం అడిగేది; దానికి మార్చే క్షణమే, ఒక డిజైను కాంతిగా ఉండటం మాని సిరా అయ్యే క్షణం.
తరచుగా అడిగే ప్రశ్నలు
నా CMYK ఫలితం ముద్రణాలయం ఇచ్చిన దానికన్నా ఎందుకు వేరుగా ఉంది?
ఎందుకంటే సరైన మార్పిడి ఒక్కటే అన్నది లేనే లేదు. ఈ పేజీలోని లెక్క సరళమైనది, పరికరంతో సంబంధం లేనిది; మీకు ఒక ఆరంభ బిందువో, సుమారు సమానమైన విలువో కావాలంటే అదే సరైన జవాబు. ముద్రణాలయం ఒక రంగు ప్రొఫైలు ద్వారా మారుస్తుంది; అది నిర్దిష్ట సిరాను, కాగితాన్ని, యంత్రాన్ని లెక్కలోకి తీసుకుంటుంది. అదే RGB రంగు మెరిసే కాగితం మీద ఒకలా, పూత లేని కాగితం మీద మరోలా CMYK విలువలు ఇస్తుంది. ఖచ్చితంగా సరిపోవలసిన దేనికైనా, ఒక సూత్రాన్ని నమ్మే బదులు ముద్రణాలయం వారి ప్రొఫైలును అడగండి.
తెర మీది కొన్ని రంగులను ఎందుకు ముద్రించలేం?
ఎందుకంటే రెండూ ఒకే రంగులను అందుకోలేవు. తెర కాంతిని కలిపి రంగును చేస్తుంది; సిరా ఏమాత్రం సాటిరాలేని మెరిసే, దట్టమైన నీలిపచ్చ లేదా ఆకుపచ్చ ఇవ్వగలదు. కాగితం కాంతిని పీల్చుకుని రంగును చేస్తుంది; అది అందుకోగల అత్యంత ప్రకాశం పేజీ తెలుపే. ఒక్కొక్కటీ అందుకోగల రంగుల సమూహాన్ని «గ్యామట్» అంటారు; అవి ఒకదానిపై ఒకటి పడని చోట, మార్పిడి దొరికే వాటిలో అత్యంత దగ్గరి రంగును ఎంచుకోక తప్పదు. తెరపై మెరిసే రంగు ముద్రణలో తరచూ కాస్త మసకగా కనిపించడానికి కారణం అదే.
సమాధానం ఖచ్చితమేనా?
రెండు ప్రమాణాలూ పూర్ణ సంఖ్యలతో ఒకదానినొకటి నిర్వచించే చోట అవును — పేజీ దాన్ని సంఖ్య పైనే చెబుతుంది, గుండ్రీకరణ అనేది ఎన్ని అంకెలు చూపాలి అన్నదానిలోనే ఉంటుంది. నిష్పత్తికి పరిమిత దశాంశం లేని చోట, పేజీ పన్నెండు సార్థక అంకెలు చూపి సంబంధం సుమారైనదని చెబుతుంది — వేరేలా నటించదు.
నేను టైప్ చేసేది నా పరికరం నుండి బయటకు వెళ్తుందా?
లేదు. లెక్క మీ బ్రౌజర్లోనే జరుగుతుంది; ఏదీ అప్లోడ్ కాదు, అప్లోడ్ చేయడానికి సర్వరే లేదు. పేజీని ఒకసారి తెరిస్తే, నెట్వర్క్ ఆపేసినా పనిచేస్తుంది.
మీరు HSL ను HEX గా ఎందుకు మారుస్తారు
మీరు ఒక రంగును HSL లో రూపొందించారు, ఎందుకంటే అది మీరు ఆలోచించగల సంకేతం: వర్ణం 30, సంతృప్తత 29%, తేలిక 28%, ఒక మందకొడి గోధుమ, హోవర్ స్థితికి 34% వద్ద పాలిన వెర్షన్. ఇప్పుడు ఆ రంగు హెక్స్ కోడ్ కోరే చోటికి వెళ్లాలి: డిజైన్ టోకెన్ ఫైల్, బ్రాండ్ షీట్, hsl() ను అర్థం చేసుకోని సాధనం, ఇమెయిల్ టెంప్లేట్, సహోద్యోగికి సందేశం. HSL ను HEX గా మార్చడం అంటే మీరు తర్కించిన రంగును తీసుకుని, చిన్నదిగా, సందిగ్ధత లేకుండా, ప్రతిదీ అర్థం చేసుకునే రూపంలో రాయడం.
ఈ మార్పిడి డిజైనర్లు మొదట ఎదుర్కొనే దానికి వ్యతిరేక దిశలో పని చేస్తుంది. ఇది మనిషికి అనుకూలమైన మూడు సంఖ్యల నుంచి మొదలై మూడు బైట్లకు చేరుతుంది. ప్రతి అడుగు సరళమైన అంకగణితం, కానీ ఇందులో కొన్ని త్రికోణమితి లాంటి సందర్భాలు, రౌండింగ్ ఉంటాయి, అందుకే ప్రజలు దాన్ని తమ కోసం చేయించుకోవడానికి ఇష్టపడతారు. పేజీ దాన్ని మీ బ్రౌజర్లో చేస్తుంది, ఏదీ అప్లోడ్ కాదు. కింద మూడు సంఖ్యలు ఆరు హెక్స్ అంకెలు ఎలా అవుతాయో, మార్పిడి ఏమి నిలుపుకుంటుందో, HSL గుండా వెళ్లిన రంగు మొదలుపెట్టిన చోటు నుంచి ఒకటి రెండు అడుగుల దూరంలో ఎందుకు ముగియవచ్చో, డిజైనర్లు మార్పిడిని వాడే విధానాలు, తప్పించుకోవాల్సిన ఉచ్చులను మీరు చూస్తారు.
మార్పిడి ఎలా పని చేస్తుంది
వర్ణం, సంతృప్తత, తేలిక నుంచి ఎరుపు, ఆకుపచ్చ, నీలానికి
కన్వర్టర్ మొదట క్రోమాను లెక్కిస్తుంది, అది రంగు బూడిద నుంచి ఎంత దూరంలో ఉందో: అది సంతృప్తతతో పెరుగుతుంది, తేలిక 50% నుంచి దూరమయ్యే కొద్దీ తగ్గుతుంది. తర్వాత అది వర్ణాన్ని రంగు చక్రంలోని ఆరు విభాగాల్లో ఒకదానిలో ఉంచుతుంది, ప్రతిదీ 60 డిగ్రీల వెడల్పు, విభాగం నుంచి మూడు ఛానెళ్లలో ఏది గరిష్ఠంలో ఉందో, ఏది కనిష్ఠంలో ఉందో, ఏది మధ్యలో ఉందో నిర్ణయిస్తుంది. చివరగా అది తేలిక సరిగా వచ్చేలా ఒక స్థిరాంకాన్ని కలుపుతుంది, మూడు విలువలను 0 నుంచి 1 పరిధి నుంచి 0 నుంచి 255 కు స్కేల్ చేస్తుంది, ప్రతిదాన్ని పూర్ణ సంఖ్యకు రౌండ్ చేస్తుంది. ఆ మూడు బైట్లు బేస్ పదహారులో, ఒక్కొక్కటి రెండు అంకెలుగా, రాయబడతాయి.
సంఖ్యలతో ఒక ఉదాహరణ
hsl(30, 29%, 28%) తీసుకోండి. క్రోమా (1 − |2 × 0.28 − 1|) × 0.29 = 0.56 × 0.29 = 0.1624. 30 డిగ్రీల వర్ణం మొదటి విభాగం మధ్యలో ఉంది, కాబట్టి మధ్య ఛానెల్ క్రోమాలో సగం, 0.0812. కలపాల్సిన స్థిరాంకం 0.28 − 0.0812 = 0.1988. కాబట్టి ఎరుపు 0.1624 + 0.1988 = 0.3612, ఆకుపచ్చ 0.0812 + 0.1988 = 0.28, నీలం 0.1988. 255 తో గుణించి రౌండ్ చేస్తే, ఇవి 92, 71, 51. హెక్స్లో, అది #5C4733.
బూడిద రంగులు
సంతృప్తత 0% అయినప్పుడు, వర్ణం ఏదైనా రంగు బూడిద, మూడు బైట్లు సమానం. hsl(0, 0%, 50%) అంటే #808080. వర్ణం విస్మరించబడుతుంది, కాబట్టి ఏ వర్ణ సంఖ్య అయినా అదే బూడిదను ఇస్తుంది.
మార్పిడి ఏమి నిలుపుకుంటుంది, ఏది నిలుపుకోలేదు
మీరు వర్ణించిన విధంగా రంగును నిలుపుకుంటుంది
ఫలితం మీరు ఇచ్చిన వర్ణం, సంతృప్తత, తేలిక ఉన్న రంగు, బైట్లుగా రాయబడింది. మీరు టైప్ చేసిన మూడు సంఖ్యలు కన్ను వర్గీకరించే విధంగా రంగు: చక్రంపై వర్ణం, ఎంత సంతృప్తం, ఎంత తేలిక. అందుకే HSL ఉండడం విలువైనది, మార్పిడి మీ ఎంపికను హెక్స్కు విశ్వసనీయంగా తీసుకువెళ్తుంది.
తిరిగి వెళ్లేటప్పుడు అవే సంఖ్యలు వస్తాయని హామీ ఇవ్వలేదు
రెండూ ఒకే రంగులను వర్ణిస్తాయి, కానీ HSL వాటిని వేరే జ్యామితి ద్వారా చేరుతుంది, దాని మూడు సంఖ్యలు రాసినప్పుడు పూర్ణ డిగ్రీలకు, పూర్ణ శాతాలకు రౌండ్ చేయబడతాయి. కాబట్టి HSL కి తీసుకెళ్లి తిరిగి తెచ్చిన రంగు మొదలుపెట్టిన చోటు నుంచి ఒకటి లేదా రెండు అడుగుల దూరంలో ముగియవచ్చు: దృశ్యపరంగా ఒకటే, బైట్కు బైట్ ఒకటే కాదు. మా ఉదాహరణలో, #5A4632 HSL సుమారు hsl(30, 29%, 28%) ఉన్న రంగు; ఆ రౌండ్ చేసిన సంఖ్యలను తిరిగి మారిస్తే #5C4733 వస్తుంది, ఎరుపులో రెండు అడుగుల దూరం. మీకు ఖచ్చితమైన బైట్లు కావాలంటే, హెక్స్ను ఉంచండి.
శాతం, డిగ్రీ గుర్తులు
పేజీ వర్ణాన్ని డిగ్రీల్లో, సంతృప్తత, తేలికను శాతంలో చదువుతుంది. మీరు వాటిని గుర్తులతో లేదా లేకుండా రాయవచ్చు. 360 పైన లేదా 0 కింద ఉన్న వర్ణం చక్రం చుట్టూ చుట్టబడుతుంది, కాబట్టి 390 అంటే 30 తో సమానం.
ఆచరణాత్మక ఉపయోగాలు
డిజైన్ టోకెన్ ఫైల్ రాయడం
డిజైన్ సిస్టమ్ రంగులను టోకెన్లుగా నిల్వ చేస్తుంది. చాలా బృందాలు రంగులను HSL లో సృష్టిస్తాయి, ఎందుకంటే వాటి గురించి తర్కించగలవు, వాటిని హెక్స్లో ప్రచురిస్తాయి, ఎందుకంటే ప్రతి సాధనం దాన్ని చదువుతుంది. ప్రతి టోకెన్కు ఒకసారి HSL ను HEX గా మార్చండి, ప్రచురించిన ఫైల్ అందరూ వాడగలిగేది అవుతుంది.
hsl() చదవని సాధనాల కోసం రంగులు తయారు చేయడం
ఇమెయిల్ క్లయింట్లు, కొన్ని డాక్యుమెంట్ ఎడిటర్లు, పాత గ్రాఫిక్స్ ప్రోగ్రామ్లు, చాలా చార్ట్ లైబ్రరీలు హెక్స్ను మాత్రమే అంగీకరిస్తాయి. మీరు HSL లో రూపొందించినది అవి వాడడానికి ముందు మార్చబడాలి.
తయారు చేసిన పాలెట్ను తనిఖీ చేయడం
వర్ణాన్ని తిప్పి పాలెట్ను తయారు చేసే స్క్రిప్ట్ hsl() విలువల జాబితాను ఇస్తుంది. వాటిని మీరు స్టైల్షీట్లో పెట్టే లేదా డిజైనర్కు ఇచ్చే కోడ్లుగా చూడడానికి, ప్రతిదాన్ని హెక్స్కు మార్చండి. అదే కోడ్కు రౌండ్ అయ్యే, కాబట్టి నిజంగా భిన్నం కాని విలువలను గుర్తించడానికి కూడా ఇది వీలు కల్పిస్తుంది.
సందేశంలో రంగును పంచుకోవడం
హెక్స్ కోడ్ చిన్నది, కాపీ చేయదగినది, రంగుతో పని చేసే దాదాపు అందరికీ అర్థమవుతుంది. hsl() విలువ పొడవైనది, డిజైన్ వెలుపల తక్కువ పరిచితం. మీరు ఎవరికైనా రంగును పంపినప్పుడు, హెక్స్ మర్యాదపూర్వక రూపం.
ఇక్కడ HSL ను HEX గా ఎలా మార్చాలి
hsl విలువను టైప్ చేయండి లేదా పేస్ట్ చేయండి
మొదటి ఫీల్డ్లో రంగును hsl(30, 29%, 28%) రూపంలో, లేదా కేవలం మూడు సంఖ్యలను, నమోదు చేయండి. వర్ణం డిగ్రీల్లో, సంతృప్తత, తేలిక శాతంలో.
హెక్స్ కోడ్ను చదవండి
సమాధానం వెంటనే కనిపిస్తుంది, hsl(30, 29%, 28%) = #5C4733 లాగా. అది పెద్ద అక్షరాలతో, హ్యాష్ గుర్తుతో రాయబడుతుంది.
దాన్ని మీ పనిలోకి కాపీ చేయండి
కోడ్ను మీ స్టైల్షీట్, టోకెన్ ఫైల్ లేదా సందేశంలో వాడండి. వ్యతిరేక దిశకు, HEX ను HSL గా ఒక క్లిక్ దూరంలో ఉంది.
ఈ సంకేతాలు ఎక్కడి నుంచి వచ్చాయి
హెక్స్, RGB రెండుసార్లు రాసిన ఒకే విషయం
తెర రంగు మూడు సంఖ్యలు, ఎంత ఎరుపు, ఆకుపచ్చ, నీలం కాంతిని ప్రసరించాలి, ప్రతి ఒక్కటి 0 నుంచి 255 వరకు, అది ఒక బైట్. హెక్స్ ఆ బైట్లను బేస్ పదహారులో రాస్తుంది అంతే. సంఖ్యలు చూడడానికి, HEX ను RGB గా మార్చండి.
HSL, CMYK
రెండూ మనిషికి చదవడానికి వీలుగా లేనందున HSL కనుగొనబడింది: ఇది రంగు చక్రం చుట్టూ కోణంగా వర్ణాన్ని, సంతృప్తత, తేలికను శాతాలుగా ఇస్తుంది, కాబట్టి డిజైనర్ మూడు సంఖ్యలను తిరిగి లెక్కించకుండా ఏదైనా తేలికగా చేయగలడు. CMYK పూర్తిగా వేరే ప్రపంచానికి చెందినది, కాంతికి బదులు ఇంకు. ఇది వ్యవకలన పద్ధతి, నాలుగు ప్రింటింగ్ ప్లేట్లతో నిర్మించబడింది, తెర ఏ రంగునైనా చేరగలదు కానీ ఇది చేరలేదు, ఎందుకంటే తెర కాంతిని ప్రసరిస్తుంది, కాగితం ప్రతిబింబిస్తుంది మాత్రమే.
HSL ను HEX గా మార్చేటప్పుడు ఉచ్చులు
అసలు కోడ్ తిరిగి వస్తుందని ఆశించడం
మీరు హెక్స్ కోడ్ నుంచి మొదలుపెట్టి, HSL కి మార్చి, ఏదీ సర్దుబాటు చేయకుండా తిరిగి మారిస్తే, ఒకటి రెండు అడుగుల దూరంలో వేరే కోడ్ రావచ్చు. ఒక్క రంగుకు అది కనిపించదు. డిజైన్ సిస్టమ్కు, ఏ రూపం మాస్టర్ అని నిర్ణయించి, మరొకదాన్ని ఉత్పన్నంగా పరిగణించండి.
సంతృప్తత, తేలికను కలపడం
ఈ రెండింటినీ పొరపాటున మార్చడం సులువు: hsl(30, 28%, 29%) అంటే hsl(30, 29%, 28%) కాదు. క్రమం వర్ణం, సంతృప్తత, తేలిక. తెరపై రంగు మీరు ఆశించినట్టు కనిపించకపోతే, వాటిని తిరగబెట్టలేదని తనిఖీ చేయండి.
తేలిక ప్రకాశం కాదని మరచిపోవడం
ఒకే తేలిక ఉన్న రెండు రంగులు ప్రకాశంలో భిన్నంగా కనిపించవచ్చు. 50% తేలిక వద్ద పసుపు 50% వద్ద నీలం కంటే చాలా ప్రకాశవంతంగా కనిపిస్తుంది. మీరు వచనం, నేపథ్యం కోసం రంగులను ఎంచుకుంటుంటే, వాటి కాంట్రాస్ట్ను తేలిక సంఖ్యలను పోల్చి కాకుండా సరైన సాధనంతో తనిఖీ చేయండి.
పరిధి వెలుపలి విలువలు వాడడం
సంతృప్తత, తేలిక 0 నుంచి 100 శాతానికి పరిమితం. ఆ పరిధి వెలుపలి విలువలు బిగించబడతాయి. 120% తేలిక తెలుపు కంటే ప్రకాశవంతం కాదు; అది తెలుపు.
మార్చే ముందు ప్రజలు అడిగే ప్రశ్నలు
హెక్స్లో hsl(0, 100%, 50%) ఏమిటి?
#FF0000, స్వచ్ఛమైన ఎరుపు.
హెక్స్లో hsl(0, 0%, 100%) ఏమిటి?
#FFFFFF, తెలుపు.
నేను దశాంశాలు వాడవచ్చా?
అవును. hsl(30.5, 28.6%, 27.8%) అంగీకరించబడుతుంది. ఫలితం పూర్ణ బైట్లకు రౌండ్ చేయబడుతుంది.
మార్పిడి ఖచ్చితమైనదా?
ఇది మీరు టైప్ చేసిన సంఖ్యలకు ఖచ్చితమైన బైట్లను ఇస్తుంది, పూర్ణ విలువలకు రౌండ్ చేసి. తిరిగి వెళ్లడం ఒక అడుగు దూరంలో ముగియవచ్చు, ఎందుకంటే HSL సంఖ్యలు రౌండ్ చేయబడ్డాయి.
నా రంగు అప్లోడ్ అవుతుందా?
లేదు. అంకగణితం మీ బ్రౌజర్లో నడుస్తుంది, ఏదీ ఎక్కడికీ పంపబడదు.
తిరిగి ఎలా వెళ్లాలి?
HEX ను HSL గా తో.
HSL ను HEX గా మార్చేటప్పుడు తెలివిగా ఎంచుకోవడం
ఏ రూపం మాస్టర్ అని నిర్ణయించండి
మీరు HSL లో డిజైన్ చేస్తే, HSL విలువలను మూలంగా ఉంచి హెక్స్ను అవుట్పుట్గా ప్రచురించండి. బ్రాండ్ మీకు హెక్స్ ఇస్తే, దాన్ని ఉంచి HSL ను వైవిధ్యాలకు మాత్రమే వాడండి. రెండింటినీ సమాన మూలాలుగా కలపడమే జారుడును సృష్టిస్తుంది.
వైవిధ్యానికి HSL, స్థిరపరచడానికి హెక్స్ వాడండి
మీకు షేడ్ల కుటుంబం కావాలంటే, HSL లో పని చేయండి. ప్రతి సాధనంలో ఒకేలా ఉండేలా రంగును స్థిరపరచాలంటే, దాన్ని హెక్స్గా రాయండి.
మీరు టైప్ చేసిన సంఖ్యలను ఉంచండి
మీ పాలెట్ నోట్లో హెక్స్ పక్కన HSL విలువలను నమోదు చేయండి. తర్వాత ఎవరైనా పాలిన వెర్షన్ కోరితే, ఇప్పటికే రౌండ్ అయిన కోడ్ నుంచి కాకుండా మీ సంఖ్యల నుంచి మొదలుపెట్టవచ్చు.
చక్రంలోని ఆరు విభాగాలు
ఏ ఛానెల్ ఎక్కువ, ఏది తక్కువ
మార్పిడి చక్రాన్ని 60 డిగ్రీల ఆరు విభాగాలుగా విభజిస్తుంది, వాటిలో ప్రతిదానిలో ఒక ఛానెల్ గరిష్ఠంలో, ఒకటి కనిష్ఠంలో ఉంటుంది, మూడోది సాఫీగా మారుతుంది. 0 నుంచి 60 వరకు, ఎరుపు గరిష్ఠంలో, నీలం కనిష్ఠంలో, ఆకుపచ్చ పెరుగుతుంది: ఎరుపు పసుపుగా మారుతుంది. 60 నుంచి 120 వరకు, ఆకుపచ్చ గరిష్ఠంలో, ఎరుపు తగ్గుతుంది: పసుపు ఆకుపచ్చగా మారుతుంది. 120 నుంచి 180 వరకు, ఆకుపచ్చ ఎక్కువగా ఉండి నీలం పెరుగుతుంది: ఆకుపచ్చ సియాన్గా మారుతుంది. 180 నుంచి 240 వరకు, నీలం ఆక్రమించి ఆకుపచ్చ తగ్గుతుంది. 240 నుంచి 300 వరకు, నీలం ఎక్కువగా ఉండి ఎరుపు పెరుగుతుంది: నీలం మెజెంటాగా మారుతుంది. 300 నుంచి 360 వరకు, ఎరుపు మళ్లీ ఆక్రమించి నీలం తగ్గుతుంది. మీరు HSL ను HEX గా మార్చినప్పుడు, మీ వర్ణం ఏ విభాగంలో ఉందో తెలుసుకోవడం సహాయపడుతుంది, ఎందుకంటే సమాధానంలోని మూడు జతల్లో ఏది అతి పెద్దదిగా ఉంటుందో అది చెబుతుంది.
సమాధానానికి కుటుంబ పోలిక ఎందుకు ఉంటుంది
ఒకే వర్ణం, సంతృప్తత కానీ వేర్వేరు తేలిక ఉన్న రంగులు బంధువుల్లా కనిపించే హెక్స్ కోడ్లను ఇస్తాయి: ఏ జత ఎక్కువ, ఏది తక్కువ అనే అదే నమూనా, పైకి లేదా కిందకు స్కేల్ చేయబడి మాత్రమే. #5C4733, #7A5F44, #A38461 అన్నీ ఒకే కుటుంబంలో ఉన్నాయి, ఎరుపు అతి పెద్దది, తర్వాత ఆకుపచ్చ, తర్వాత నీలం. మీరు దీన్ని ఒక్క చూపులో చదవడం నేర్చుకోవచ్చు, తప్పులు పట్టుకోవడం సులువవుతుంది.
తేలిక ర్యాంప్ నిర్మించడం
ఒక వర్ణం, తొమ్మిది అడుగులు
మార్పిడి యొక్క చాలా ఆచరణాత్మక ఉపయోగం ఒకే రంగు ర్యాంప్ను చాలా పాలిన నుంచి చాలా ముదురు వరకు నిర్మించడం, డిజైన్ సిస్టమ్లు 50, 100, 200 అని 900 వరకు లేబుల్ చేసే రకమైన స్కేల్. ఒక వర్ణాన్ని, సంతృప్తతను ఎంచుకుని, తేలికను 96, 90, 80, 70, 60, 50, 40, 30, 20 శాతం లాంటి విలువల గుండా మెట్లుగా మార్చండి. ప్రతి మెట్టుకు HSL ను HEX గా మార్చండి, కలిసి ఉండే తొమ్మిది కోడ్లు మీకు ఉంటాయి. అతి పాలిన, అతి ముదురు మెట్ల వద్ద, కొన్ని పాయింట్లు, సంతృప్తతను కొద్దిగా తగ్గించడం తరచూ స్థిరంగా ఉంచడం కంటే సహజంగా కనిపిస్తుంది.
మెట్లకు పేర్లు పెట్టడం
ప్రతి మెట్టుకు దాని విలువను కాకుండా దాని పాత్రను నమోదు చేసే పేరు ఇవ్వండి: అతి పాలినదానికి సర్ఫేస్, తర్వాతిదానికి బోర్డర్, అతి ముదురుదానికి టెక్స్ట్. కోడ్లో, పేరు తర్వాతి పాఠకుడికి రంగు దేనికో చెబుతుంది, దాన్ని వాడే నియమాలను తాకకుండా దాని వెనుక ఉన్న సంఖ్యను మార్చవచ్చు.
లైట్, డార్క్ థీమ్లు
ర్యాంప్ను అద్దంలా చేయడం
డార్క్ థీమ్ తరచూ ర్యాంప్ను తిప్పిన లైట్ థీమ్: అతి పాలిన మెట్టు లైట్ థీమ్లో పేజీ నేపథ్యం అవుతుంది, అతి ముదురుది డార్క్లో నేపథ్యం అవుతుంది. మీరు ర్యాంప్ను HSL లో నిర్మిస్తే, డార్క్ థీమ్కు రెండో సెట్ మార్పిడులు తప్ప ఏమీ ఖర్చు కాదు. వర్ణాన్ని స్థిరంగా ఉంచండి, అది బ్రాండ్ స్వభావాన్ని కాపాడుతుంది, సంతృప్తతను కొద్దిగా సర్దుబాటు చేయండి, ఎందుకంటే సంతృప్త రంగులు ముదురు నేపథ్యాలపై కఠినంగా కనిపిస్తాయి.
రెండు థీమ్లనూ తనిఖీ చేయడం
రెండు థీమ్ల ప్రతి వచనం, నేపథ్యం జతను కాంట్రాస్ట్ కోసం పరీక్షించండి. తెలుపుపై పని చేసే రంగు దాదాపు నలుపుపై విఫలం కావచ్చు, మీరు ఇప్పుడే తయారు చేసిన హెక్స్ కోడ్లు, కాంట్రాస్ట్ సాధనంతో తనిఖీకి ఒక నిమిషం పడుతుంది.
రంగుపై మీకు కఠినమైన ఆలోచన మాత్రమే ఉన్నప్పుడు
చక్రం నుంచి మొదలుపెట్టి, తర్వాత మెరుగుపరచండి
కొన్నిసార్లు మీకు హెక్స్ కోడ్ అసలు ఉండదు, ఒక ఆలోచన మాత్రమే: ప్రశాంతమైన నీలం, వెచ్చని నారింజ, తాజా ఆకుపచ్చ. HSL మొదలుపెట్టడానికి మంచి చోటు, ఎందుకంటే మీరు చక్రం మైలురాళ్ల నుంచి వర్ణాన్ని ఎంచుకుని, మితమైన సంతృప్తతను, మధ్యస్థ తేలికను ఉంచి, ఏమి ఉందో చూడడానికి HSL ను HEX గా మార్చవచ్చు. అది చాలా గట్టిగా కనిపిస్తే, సంతృప్తతను తగ్గించండి; చదునుగా కనిపిస్తే, తేలికను కదిలించండి. ప్రతి ప్రయత్నానికి సెకన్లు ఖర్చవుతాయి, చివరికి మీరు నేరుగా స్టైల్షీట్లో పెట్టగల హెక్స్ కోడ్తో ముగిస్తారు.
సంబంధిత కన్వర్టర్లు
ఇదే సాధనాల కుటుంబం పక్కనున్న మార్పిడులను కవర్ చేస్తుంది. తిరిగి వెళ్లడానికి, HEX ను HSL గా వాడండి. కోడ్ వెనుక ఉన్న సంఖ్యల కోసం, HEX ను RGB గా, RGB ను HEX గా ఉన్నాయి, ప్రింట్ కోసం, HEX ను CMYK గా, CMYK ను HEX గా. అదే స్టైల్షీట్లోని పరిమాణాల కోసం, ఈ పేజీ రంగులకు చేసేది px ను rem గా పొడవులకు చేస్తుంది.
ఒక పని చేసిన ఉదాహరణ
మీరు యాప్ విజయ స్థితికి ఒక ఆకుపచ్చను ఎంచుకున్నారనుకోండి: hsl(145, 55%, 38%). మీరు దాన్ని టైప్ చేసి #2C9658 చదువుతారు. ఆ కోడ్ను టోకెన్ ఫైల్లో --success గా వాడతారు. విజయ నోటీసు నేపథ్యానికి మీరు అదే వర్ణం, hsl(145, 45%, 94%), తీసుకుని #E9F7EF చదువుతారు. అంచుకు, hsl(145, 45%, 78%), అది #AEE0C3 అని చదవబడుతుంది. మూడు కోడ్లు, ఒక వర్ణం, అన్నీ ఒక నిమిషంలో పొందినవి, ప్రతి ఒక్కటి బృందంలో ఏ సాధనమైనా తెరవగల సాధారణ హెక్స్ కోడ్.
ఒక చిన్న చెక్లిస్ట్
మార్చే ముందు
మూడు సంఖ్యల క్రమాన్ని తనిఖీ చేయండి: వర్ణం, సంతృప్తత, తేలిక. ఏ రూపం మీ మాస్టర్ అని నిర్ణయించండి.
మార్చేటప్పుడు
విలువలను టైప్ చేసి, హెక్స్ను చదివి, హ్యాష్ గుర్తుతో కాపీ చేయండి.
మార్చిన తర్వాత
రంగును తెరపై సందర్భంలో చూసి, తర్వాత కోసం కోడ్ పక్కన HSL విలువలను నోట్ చేయండి.
సాధారణ పొరపాట్లు
సంతృప్తత, తేలికను మార్చడం
క్రమం వర్ణం, సంతృప్తత, తేలిక.
పాత హెక్స్ తిరిగి వస్తుందని ఆశించడం
అది ఒక అడుగు దూరంలో ముగియవచ్చు. ముఖ్యమైతే అసలును ఉంచండి.
కాంట్రాస్ట్కు బదులు తేలికను పోల్చడం
వచనం, నేపథ్యం కోసం కాంట్రాస్ట్ సాధనాన్ని వాడండి.
మీ రంగులు మీ పరికరంలోనే ఉంటాయి
లెక్క స్థానికంగా జరుగుతుంది. మీ విలువలను మీ సొంత బ్రౌజర్ వాడుతుంది, ఏదీ ఎక్కడికీ పంపబడదు. తర్వాత తొలగించడానికి ఏమీ లేదు, సృష్టించడానికి ఖాతా లేదు. HSL ను HEX గా మార్చడానికి అదే సరళమైన మార్గం.
సారాంశం
ఇక్కడ HSL ను HEX గా మార్చడానికి, వర్ణాన్ని డిగ్రీల్లో, సంతృప్తత, తేలికను శాతంలో టైప్ చేసి, హెక్స్ కోడ్ను వెంటనే చదవండి. మార్పిడి కన్ను వర్గీకరించే విధంగా రంగును నిలుపుకుంటుంది: చక్రంపై వర్ణం, ఎంత సంతృప్తం, ఎంత తేలిక. రెండు సంకేతాలు ఒకే రంగులను వర్ణిస్తాయి, కానీ HSL వాటిని వేరే జ్యామితి ద్వారా చేరుతుంది, దాని మూడు సంఖ్యలు పూర్ణ డిగ్రీలకు, పూర్ణ శాతాలకు రౌండ్ చేయబడతాయి, కాబట్టి HSL కి తీసుకెళ్లి తిరిగి తెచ్చిన రంగు మొదలుపెట్టిన చోటు నుంచి ఒకటి లేదా రెండు అడుగుల దూరంలో ముగియవచ్చు. మీకు ఖచ్చితమైన బైట్లు కావాలంటే, హెక్స్ను ఉంచండి. ఏదీ అప్లోడ్ కాదు.