Badilisha HEX kuwa HSL Hexadecimal ↔ Hue Saturation Lightness Bure Mtandaoni Salama
Andika thamani katika HEX na uisome katika HSL papo hapo. Hesabu hufanyika kwenye kivinjari chako, hakuna kinachotumwa popote, na kile ambacho ubadilishaji unategemea kimeandikwa hapa chini badala ya kudhaniwa.
Hakuna kinachopakiwa
Notesheni hizi zinatoka wapi
Hex na RGB ni kitu kimoja kilichoandikwa mara mbili. Rangi ya skrini ni namba tatu — kiasi gani cha mwanga mwekundu, wa kijani na wa buluu kitolewe — kila moja kutoka 0 hadi 255, ambayo ni baiti moja; hex huandika tu baiti hizo katika msingi wa kumi na sita, kwa hivyo #FF8800 na rgb(255, 136, 0) ni maagizo yaleyale kwa pikseli ileile. HSL ilibuniwa kwa sababu hakuna kati ya hizo mbili kinachosomeka kwa binadamu: inatoa hue kama pembe kuzunguka gurudumu la rangi, pamoja na saturation na lightness kama asilimia, ili mbunifu aweze kufanya kitu kiwe chepesi zaidi bila kukokotoa upya namba tatu. CMYK inahusu ulimwengu tofauti kabisa — wino badala ya mwanga. Ni ya kutoa, imejengwa kutoka sahani nne za uchapishaji, na haiwezi kufikia kila rangi ambayo skrini inaweza, kwa sababu skrini hutoa mwanga ilhali karatasi huuakisi tu.
Unakutana nazo wapi
Hex ndiyo unayoiandika kwenye stylesheet na ndiyo unayopewa na zana ya usanifu. RGB huonekana popote rangi inapohitaji hesabu — gradient, uwazi, msimbo unaokokotoa kivuli. HSL ndiyo unayoichukua unaporekebisha palette kwa mkono, kwa sababu mabadiliko unayoyataka kwa kawaida ni mabadiliko ya moja kati ya namba zake tatu. CMYK ndiyo anayoiomba mchapishaji, na kubadilisha kuiingia ndio wakati ambapo usanifu huacha kuwa mwanga na kuwa wino.
Maswali ambayo watu huuliza
Kwa nini matokeo yangu ya CMYK yanatofautiana na yale ninayopewa na mchapishaji wangu?
Kwa sababu hakuna ubadilishaji mmoja sahihi. Hesabu kwenye ukurasa huu ni ile rahisi isiyotegemea kifaa, ambayo ndiyo jibu sahihi unapohitaji mahali pa kuanzia au kielelezo cha takriban. Kiwanda cha uchapishaji hubadilisha kupitia wasifu wa rangi unaozingatia wino, karatasi na mashine mahususi, na rangi ileile ya RGB itatoa thamani tofauti za CMYK kwenye karatasi inayong’aa kuliko kwenye isiyong’aa. Kwa chochote kinachopaswa kulingana, muombe mchapishaji wasifu wao badala ya kuamini fomula.
Kwa nini baadhi ya rangi za skrini haziwezi kuchapishwa?
Kwa sababu hizo mbili haziwezi kufikia rangi zilezile. Skrini hutengeneza rangi kwa kuongeza mwanga na inaweza kutoa sayani au kijani chenye mng’ao na uzito ambacho wino hauwezi kulingana nacho; karatasi hutengeneza rangi kwa kunyonya mwanga, na mwangavu zaidi inayoweza kuwa ni weupe wa ukurasa wenyewe. Seti ya rangi ambazo kila moja inaweza kufikia huitwa gamut yake, na pale ambapo hazipishani, ubadilishaji lazima uchague rangi iliyo karibu zaidi inayopatikana. Ndiyo maana rangi angavu ya skrini mara nyingi huonekana kufifia kidogo inapochapishwa.
Je, jibu ni sahihi kabisa?
Pale ambapo vipimo vyote viwili vimefafanuliwa kwa kutumia kimoja kingine kwa nambari kamili, ndiyo — ukurasa unasema hivyo juu ya nambari, na ukadiriaji pekee ni katika idadi ya tarakimu zinazoonyeshwa. Pale ambapo uwiano hauna desimali yenye mwisho, ukurasa unaonyesha tarakimu kumi na mbili muhimu na kusema kwamba uhusiano ni wa kukadiria, badala ya kujifanya vinginevyo.
Je, kitu ninachoandika kinatoka kwenye kifaa changu?
Hapana. Hesabu hufanyika kwenye kivinjari chako; hakuna kinachopakiwa na hakuna seva ya kukipokea. Pakia ukurasa mara moja na utaendelea kufanya kazi hata mtandao ukizimwa.
Kwa nini ubadilishe HEX kuwa HSL
Msimbo wa hex kama #5A4632 ni njia nzuri ya kuhifadhi rangi na njia duni ya kuifikiria. Hakuna kitu katika tarakimu kinachokuambia kwamba rangi ni kahawia, ina mwangaza kiasi gani, au toleo hafifu zaidi kidogo lingeonekanaje. HSL ilibuniwa kurekebisha hilo. Inaeleza rangi jinsi watu wanavyozungumza kuihusu: ni rangi gani (hue), ni angavu kiasi gani na ni nyepesi kiasi gani. Kubadilisha HEX kuwa HSL ni kutafsiri rangi kutoka umbo ambalo zana ya usanifu inakupa hadi umbo unaloweza kulitumia kufikiri: hsl(30, 29%, 28%) ni kahawia-machungwa nyeusi na hafifu, na unaweza kuona mara moja kwamba kuongeza namba ya mwisho kutaifanya iwe hafifu zaidi kwa wepesi.
Hiyo ndiyo sababu halisi wabunifu na watengenezaji wa sehemu ya mbele hutumia ubadilishaji huu. Wana rangi ya chapa katika hex na wanahitaji familia ya rangi zinazohusiana: nyepesi zaidi kwa hali ya kuelea kipanya, nyeusi zaidi kwa kitufe kilichobonyezwa, hafifu sana kwa kivuli cha mandharinyuma, na iliyopunguzwa mjazo kwa kidhibiti kilichozimwa. Katika hex, kila moja ni uwindaji mpya wa jozi tatu za tarakimu. Katika HSL, kila moja ni mabadiliko ya namba moja. Rangi ni ileile, ikitazamwa kupitia lenzi yenye manufaa zaidi.
Ukurasa huu hubadilisha ndani ya kivinjari chako, na hakuna kinachopakiwa. Hapa chini utapata jinsi namba tatu za HSL zinavyokokotolewa kutoka tarakimu za hex, kile ambacho ubadilishaji unahifadhi na mahali unapokadiria, maana ya hue, mjazo na mwangaza kwa vitendo, jinsi wabunifu wanavyotumia HSL kujenga paleti na hali, na mitego inayowanasa watu wanaobadilisha HEX kuwa HSL kwa mara ya kwanza.
HSL inaeleza nini
Hue: nafasi kwenye gurudumu la rangi
Hue ni pembe kutoka digrii 0 hadi 360 kuzunguka gurudumu la rangi. Nyekundu iko kwenye 0, njano kwenye 60, kijani kwenye 120, cyan kwenye 180, buluu kwenye 240 na magenta kwenye 300; kwenye 360 umerudi kwenye nyekundu. Hue ya 30 iko kati ya nyekundu na njano, ambayo ni machungwa. Namba inasema uko katika familia gani ya rangi, na si chochote kuhusu ni angavu au hafifu kiasi gani.
Mjazo: ni angavu kiasi gani
Mjazo ni asilimia. Kwenye 100% rangi ni safi kadiri hue inavyoruhusu; kwenye 0% imepoteza rangi yote na ni kijivu. Mjazo wa 29%, kama kwenye kahawia ya mfano wetu, ni rangi hafifu ya udongo. Kupunguza mjazo ndiyo njia ya haraka zaidi ya kutuliza rangi kali bila kubadilisha tabia yake.
Mwangaza: ni hafifu au nyeusi kiasi gani
Mwangaza pia ni asilimia. Kwenye 0% rangi ni nyeusi bila kujali hue na mjazo; kwenye 100% ni nyeupe; kwenye 50% ni rangi kamili ya kawaida. Kahawia yetu kwenye 28% iko upande wa giza. Kuongeza namba hutoa toleo hafifu zaidi la rangi ileile, na kuipunguza hutoa nyeusi zaidi, ambalo ndilo badiliko wabunifu wanalotaka mara nyingi zaidi.
Kwa nini ni rahisi kuliko hex
Katika hex, kufanya rangi iwe hafifu zaidi kunamaanisha kuongeza jozi zote tatu kwa kiasi tofauti ili hue isipotee, jambo karibu lisilowezekana kufanya kwa jicho. Katika HSL kunamaanisha kubadilisha namba moja na kuacha mbili nyingine zilivyo.
Jinsi ubadilishaji unavyofanya kazi
Kutoka baiti tatu hadi pembe na asilimia mbili
Kibadilishaji kwanza husoma tarakimu za hex kama thamani za nyekundu, kijani na buluu, kila moja kutoka 0 hadi 255, na kuzipima ziwe kati ya 0 na 1. Hupata kubwa zaidi na ndogo zaidi kati ya hizo tatu. Mwangaza ni wastani wa hizo mbili. Mjazo hutegemea umbali kati yake, kulingana na mwangaza. Hue hutegemea njia ipi ni kubwa zaidi na jinsi mbili nyingine zinavyolinganishwa. Zote tatu zikiwa sawa, rangi ni kijivu, mjazo ni sifuri na hue haina maana; kibadilishaji kisha huonyesha 0 kwa hiyo.
Mfano
Kwa #5A4632 baiti ni 90, 70 na 50. Nyekundu ni kubwa zaidi kwa 0.353, buluu ndogo zaidi kwa 0.196. Mwangaza ni nusu ya jumla yake, 0.275, takriban 28%. Tofauti ni 0.157, kwa hiyo mjazo ni 0.157 ikigawanywa kwa jumla 0.549, takriban 29%. Nyekundu ndiyo njia kubwa zaidi na kijani iko katikati, jambo linaloweka hue kwenye digrii 30. Matokeo ni hsl(30, 29%, 28%).
Namba kamili
Namba tatu hukadiriwa hadi digrii kamili na asilimia kamili zinapoandikwa. Hilo ndilo umbo wanalotumia watu na umbo ambalo CSS inatarajia katika kazi ya kila siku, lakini inamaanisha kwamba taarifa fulani hupotea kwenye tarakimu ya mwisho, kama sehemu inayofuata inavyoeleza.
Kile ambacho ubadilishaji unahifadhi na kile usichoweza
Unahifadhi rangi kama jicho linavyoipanga
Matokeo ni rangi kama jicho linavyoipanga: hue kwenye gurudumu, mjazo wake, na mwangaza. Ndiyo maana HSL inafaa kuwa nayo. Unaweza kufanya rangi iwe hafifu zaidi au kivuli kiwe cheusi zaidi kwa kubadilisha namba moja, jambo karibu lisilowezekana katika hex.
Hauwezi kuahidi baiti zilezile zitarudi
Zote mbili zinaeleza rangi zilezile, lakini HSL huzifikia kupitia jiometri tofauti na namba zake tatu hukadiriwa hadi digrii kamili na asilimia kamili zinapoandikwa. Kwa hiyo rangi iliyochukuliwa hadi HSL na kurudi inaweza kutua hatua moja au mbili kutoka ilipoanzia: kwa kuona ni ileile, si baiti kwa baiti. Ukihitaji baiti kamili zirudi, hifadhi hex. Badilisha HEX kuwa HSL ili kufanya kazi na rangi, na uweke hex kama nakala kuu.
Kijivu hakina hue
Baiti tatu zikiwa sawa, hakuna cha kusema kuhusu hue. Kibadilishaji hutoa hue ya 0 na mjazo wa 0%, na mwangaza peke yake unaeleza kijivu. Usisome chochote ndani ya hiyo 0.
Kutumia HSL kwa vitendo
Kujenga familia ya vivuli
Chukua rangi ya msingi hsl(30, 29%, 28%). Kivuli chepesi zaidi kwa kuelea kipanya ni hsl(30, 29%, 34%). Kivuli hafifu sana kwa mandharinyuma ni hsl(30, 29%, 94%). Kivuli cheusi zaidi kwa hali zilizobonyezwa ni hsl(30, 29%, 22%). Hue na mjazo hubaki vilivyo, kwa hiyo rangi zinaonekana wazi kuwa zinahusiana. Kufanya vivyo hivyo katika hex kungechukua majaribio kadhaa na bado kungeonekana kimakosa kidogo.
Mandhari na hali ya giza
Mandhari mara nyingi huhitaji paleti ileile katika toleo jepesi na jeusi. Kwa HSL, unaweka hue na kurekebisha mwangaza na mjazo: fanya mandharinyuma ziwe nyepesi na maandishi yawe meusi kwa mandhari nyepesi, na kinyume chake kwa ile nyeusi. Kufafanua hue kama sifa maalum na kubadilisha mwangaza tu ni njia ya kawaida na nadhifu ya kufanya hivyo.
Kutengeneza paleti
Ili kupata rangi zinazoendana na msingi, zungusha hue. Digrii thelathini kila upande hutoa rangi jirani, 180 hutoa rangi pinzani, na 120 au 240 hutoa utatu. Weka mjazo na mwangaza, badilisha hue, na rangi zinakuwa na hisia sawa. Ni njia ya haraka ya kuanza paleti isiyoonekana ya bahati nasibu.
Utofautishaji unaofikika
Mwangaza ndio kidhibiti kikuu cha utofautishaji. Maandishi yakiwa magumu kusoma kwenye mandharinyuma yenye rangi, suluhisho kwa kawaida ni kuongeza tofauti ya mwangaza kati yake, na HSL hulifanya jambo la kurekebisha namba moja upande kila.
Jinsi ya kubadilisha HEX kuwa HSL hapa
Andika au bandika msimbo wa hex
Weka rangi kwenye sehemu ya kwanza, kwa alama ya reli au bila. Maumbo ya tarakimu tatu na sita yanakubaliwa, na umbo la tarakimu nane lenye uwazi pia linasomwa.
Soma thamani ya hsl
Jibu huonekana mara moja, kama katika #5A4632 = hsl(30, 29%, 28%). Namba tatu ni hue kwa digrii na mjazo na mwangaza kwa asilimia.
Inakili kwenye karatasi yako ya mitindo
Tumia matokeo kama yalivyo, katika kanuni kama color: hsl(30, 29%, 28%). Ili kurekebisha rangi, badilisha namba ya mwisho. Zana ya mwelekeo kinyume ni HSL kuwa HEX.
Mahali nukuu hizi zinapotoka
Hex na RGB ni kitu kimoja kilichoandikwa mara mbili
Rangi ya skrini ni namba tatu, kiasi gani cha mwanga mwekundu, kijani na buluu cha kutoa, kila moja kutoka 0 hadi 255, ambayo ni baiti moja. Hex huandika baiti hizo kwa msingi kumi na sita tu. Ili kuona namba, badilisha HEX kuwa RGB.
HSL na CMYK
HSL ilibuniwa kwa sababu hakuna kati ya hizo mbili inayosomeka na binadamu: inatoa hue kama pembe kuzunguka gurudumu la rangi, pamoja na mjazo na mwangaza kama asilimia, ili mbunifu aweze kufanya kitu kiwe chepesi bila kukokotoa upya namba tatu. CMYK ni ya ulimwengu tofauti kabisa, wino badala ya mwanga. Ni ya kutoa, imejengwa kwa mabamba manne ya uchapishaji, na haiwezi kufikia kila rangi ambayo skrini inaweza, kwa sababu skrini hutoa mwanga huku karatasi ikiuakisi tu.
Mitego unapobadilisha HEX kuwa HSL
Kutarajia safari kamili ya kwenda na kurudi
Kwa sababu ya ukadiriaji, kubadilisha kurudi kunaweza kutoa msimbo hatua moja au mbili mbali na asili. Kwa rangi moja haionekani. Kwa mfumo wa usanifu ambapo rangi nyingi hubadilishwa kwenda na kurudi, inaweza kukusanyika. Weka hex kama chanzo.
Kudhani mwangaza sawa unamaanisha mng’ao sawa
Rangi mbili zenye mwangaza sawa wa HSL zinaweza kuonekana tofauti sana katika mng’ao: njano kwenye 50% inaonekana angavu zaidi kuliko buluu kwenye 50%. Mwangaza wa HSL ni namba ya urahisi, si kipimo cha mng’ao unaoonekana. Kwa ukaguzi wa utofautishaji, tumia zana sahihi ya utofautishaji.
Kusahau alama za asilimia
Katika CSS, mjazo na mwangaza katika hsl() hubeba alama za asilimia, na hue ni namba tupu au namba yenye deg. Kuacha alama ni kosa la kawaida.
Kusoma mambo mengi mno katika kijivu
Kijivu hakina hue. Kibadilishaji kikionyesha 0 kwa hiyo, haimaanishi ina rangi ya nyekundu.
Maswali ambayo watu huuliza kabla ya kubadilisha
#FF0000 ni nini katika HSL?
hsl(0, 100%, 50%), nyekundu safi.
#FFFFFF ni nini katika HSL?
hsl(0, 0%, 100%), nyeupe. Hue haina maana kwa nyeupe, na kibadilishaji huonyesha 0.
Je, HSL inaungwa mkono kila mahali?
Vivinjari vyote vya sasa vinaelewa hsl() na hsla(). Imekuwa katika CSS kwa miaka mingi.
Je, ubadilishaji ni sahihi kabisa?
Ni sahihi kwa maana ya kueleza rangi ileile, lakini namba hukadiriwa hadi digrii na asilimia kamili, kwa hiyo kurudi kunaweza kutua hatua moja kando.
Je, rangi yangu inapakiwa?
Hapana. Hesabu hufanyika ndani ya kivinjari chako na hakuna kinachotumwa popote.
Ninarudije?
Kwa HSL kuwa HEX.
Kuchagua kwa busara unapobadilisha HEX kuwa HSL
Tumia HSL kufanya kazi, hex kuhifadhi
Weka paleti kuu katika hex, ambapo haina utata, na utumie HSL unapotaka kuunda tofauti. Safari za kwenda na kurudi hupoteza kidogo; nakala kuu haipotezi.
Zingatia nafasi mpya za rangi
CSS sasa inatoa oklch() na nukuu zinazofanana ambapo mwangaza sawa huonekana sawa kweli. Zinafaa kujifunzwa kwa mifumo mipya ya usanifu. HSL inabaki kuwa nukuu ambayo karibu kila mtu anaielewa na kila zana inaiunga mkono.
Tumia sifa maalum
Fafanua --hue, --sat na --light, na ujenge rangi kutoka kwazo: hsl(var(--hue) var(--sat) var(--light)). Mandhari kisha hubadilika kwa kuhariri namba chache.
Kusoma na kuandika HSL kwa kujiamini
Baadhi ya vituo vya kukumbuka
Namba chache hufanya HSL iwe rahisi kusoma. Hue zilizo kwenye vizidisho vya 60 ni rangi safi: 0 nyekundu, 60 njano, 120 kijani, 180 cyan, 240 buluu, 300 magenta. Mwangaza wa 50 na mjazo wa 100 hutoa toleo safi zaidi la hue yoyote, na mwangaza wa 95 au zaidi ni kivuli hafifu sana hivi kwamba kinafanya kazi kama mandharinyuma. Unapobadilisha HEX kuwa HSL na kuona hue karibu na mojawapo ya vituo hivi, unaweza kutaja familia ya rangi kwa mtazamo mmoja.
Kusogea kati ya familia
Kuongeza 180 kwenye hue hutoa rangi iliyo kinyume kwenye gurudumu, ambayo ni rangi pinzani na kwa kawaida utofautishaji mkali zaidi. Kuongeza au kutoa 30 hutoa jirani anayekaa vizuri kando ya asili. Wabunifu hutumia hatua hizi kuchagua rangi za msisitizo zinazolingana na rangi ya chapa bila kubahatisha.
Kuweka kumbukumbu ya thamani zilizobadilishwa
Unapobadilisha HEX kuwa HSL kwa paleti, andika matokeo kwenye jedwali pamoja na hex asili kando yake. Jedwali linaonyesha jinsi rangi zinavyohusiana, na ikiwa hue au mwangaza haulingani na zingine, kasoro huonekana mara moja. Pia linaipa timu yako rejeo la pamoja.
Kujaribu kwenye skrini halisi
Rangi zinazoonekana zimesawazika kwenye kifuatiliaji kilichosawazishwa zinaweza kuonekana tofauti kwenye simu iliyo juani au kompyuta mpakato ya bei nafuu. Kagua paleti iliyokamilika kwenye angalau vifaa viwili, na urekebishe mwangaza kidogo ikiwa vivuli hafifu vinatoweka kwenye kimoja.
Vibadilishaji vinavyohusiana
Familia hiyohiyo ya zana inashughulikia ubadilishaji wa jirani. Ili kurudi, tumia HSL kuwa HEX. Kwa namba zilizo nyuma ya msimbo, kuna HEX kuwa RGB na RGB kuwa HEX, na kwa uchapishaji, HEX kuwa CMYK na CMYK kuwa HEX. Kwa ukubwa katika karatasi ileile ya mitindo, px kuwa rem na px kuwa em hufanya kwa urefu kile ukurasa huu unachofanya kwa rangi.
Mfano uliotatuliwa
Tuseme rangi ya chapa yako ni #1E7A5C. Unabadilisha HEX kuwa HSL na kusoma hsl(160, 61%, 30%). Kwa hali ya kuelea kipanya unaandika hsl(160, 61%, 36%), nyepesi kidogo. Kwa hali ya kubonyezwa, hsl(160, 61%, 24%). Kwa mandharinyuma hafifu sana nyuma ya taarifa, hsl(160, 40%, 95%). Kwa kitufe kilichozimwa, hsl(160, 12%, 60%), hue ileile ikiwa na rangi nyingi zimeondolewa. Rangi tano, hue moja, zimeandikwa kwa dakika moja, na zote zinaonekana kana kwamba zinaendana. Rangi ya chapa ikibadilika, unabadilisha namba ya hue mara moja.
Orodha fupi ya ukaguzi
Kabla ya kubadilisha
Amua unataka kufanya nini na rangi: kuibadilisha, kuiweka kwenye mandhari au kuisoma tu.
Wakati wa kubadilisha
Bandika hex, soma hsl na uandike namba tatu.
Baada ya kubadilisha
Tengeneza tofauti kwa kubadilisha namba moja kwa wakati, na uzitazame kwenye mandharinyuma halisi.
Makosa ya kawaida
Kuchukulia namba zilizokadiriwa kama sahihi kabisa
Ni namba kamili. Weka hex kama nakala kuu.
Kufananisha mwangaza na mng’ao
Rangi mbili zenye mwangaza sawa zinaweza kutofautiana sana katika jinsi zinavyoonekana angavu.
Kuacha alama za asilimia
Mjazo na mwangaza zinazihitaji katika CSS.
Rangi zako hubaki kwenye kifaa chako
Hesabu hufanyika ndani ya kifaa. Thamani zako hutumiwa na kivinjari chako mwenyewe na hakuna kinachotumwa popote. Hakuna cha kufuta baadaye na hakuna akaunti ya kuunda. Hiyo ndiyo njia rahisi ya kubadilisha HEX kuwa HSL.
Muhtasari
Ili kubadilisha HEX kuwa HSL hapa, andika au bandika msimbo wa hex na usome thamani ya hsl mara moja. Ubadilishaji unahifadhi rangi kama jicho linavyoipanga: hue kwenye gurudumu, mjazo wake, na mwangaza. Ndiyo maana HSL inafaa kuwa nayo, kwa kuwa unaweza kufanya rangi iwe hafifu zaidi au kivuli kiwe cheusi zaidi kwa kubadilisha namba moja, jambo karibu lisilowezekana katika hex. Zote mbili zinaeleza rangi zilezile, lakini HSL huzifikia kupitia jiometri tofauti na namba zake tatu hukadiriwa hadi digrii kamili na asilimia kamili, kwa hiyo rangi iliyochukuliwa hadi HSL na kurudi inaweza kutua hatua moja au mbili kutoka ilipoanzia. Ukihitaji baiti kamili zirudi, hifadhi hex. Hakuna kinachopakiwa.