HEX-ից RGB փոխարկում. ինչպես է այն աշխատում և ինչու է այն ճշգրիտ
Այս էջը վերցնում է HEX գունային կոդը (օրինակ՝ #4f46e5 կամ #abc) և ակնթարթորեն ցույց է տալիս համապատասխան RGB արժեքները (երեք թիվ 0–255 միջակայքում), որոնք անհրաժեշտ են էկրաններին ցուցադրելու համար: RGB եռյակը ցուցադրվում է այլ գունային ձևաչափերի կողքին, որպեսզի այն կարողանաք ուղղակի պատճենել կոդի կամ դիզայնի ծրագրի մեջ:
Էջի տարբերությունը հետևյալն է. այն կատարում է գույնի վեցանկյուն (16-ական) ներկայացումից տասնորդական (10-ական) RGB ալիքների ուղղակի փոխարկում, որն օգտագործում են ցուցադրիչները և գույնի խառնման հաշվարկները: HEX կոդերը կոմպակտ են և լայնորեն կիրառվում են CSS-ում, բայց դրանք ըստ էության նույն երեք 8-բիթանոց ալիքների սղագրությունն են, որոնք RGB-ն ներկայացնում է թվային տեսքով:
Քանի որ սա HEX-ից RGB փոխարկիչ է, գործում են հատուկ կանոններ.
- HEX կոդերը տրվում են վեց թվանշանով (
#RRGGBB) կամ եռանիշ սղագրությամբ (#RGB), որտեղ յուրաքանչյուր սղագրային թվանշան կրկնապատկվում է՝ կազմելով լրիվ վեցանիշ կոդը: #նախածանցը պարտադիր չէ. գործիքն ընդունում է կոդեր ինչպես նշանով, այնպես էլ առանց դրա:- Թիրախային RGB ալիքները միշտ 0-ից 255 ամբողջ թվեր են, առանց ալֆա ալիքի (ութանիշ HEX կոդերը, որոնք ներառում են ալֆան, չեն մշակվում այս էջում. էջն ակնկալում է միայն վեցանիշ կամ եռանիշ HEX):
- Փոխարկումը զուտ մաթեմատիկական է. 16-ական թվանշանների յուրաքանչյուր զույգ բազմապատկվում է 16-ի աստիճաններով, ուստի արդյունքը ճշգրիտ է և հետադարձելի (ոչ կլորացում, ոչ գամուտի սեղմում):
Փոխարկման մաթեմատիկան. ինչպես 16-ականը դառնում է 10-ական
HEX գունային կոդը կազմված է երեք զույգ վեցանկյուն թվանշաններից՝ կարմիր, կանաչ և կապույտ ալիքների համար: Յուրաքանչյուր զույգը 16-ական թվի երկնիշ ներկայացումն է, որը կարող է ընդունել 0-ից մինչև 255 արժեքներ (քանի որ 16² = 256):
Փոխարկման բանաձևը.
R = (առաջին զույգի առաջին թվանշան × 16) + (առաջին զույգի երկրորդ թվանշան)
Նույնը՝ G և B-ի համար:
Օրինակ՝ #4f46e5 կոդի համար.
- Կարմիր զույգը
4fէ: 4-ը տասնորդականում 4 է, f-ը՝ 15: Հետևաբար՝ (4 × 16) + 15 = 64 + 15 = 79: - Կանաչ զույգը
46է: (4 × 16) + 6 = 64 + 6 = 70: - Կապույտ զույգը
e5է: (14 × 16) + 5 = 224 + 5 = 229:
Արդյունքը՝ RGB(79, 70, 229):
Այս մեթոդը ճշգրիտ է և հետադարձելի. եթե 79-ը նորից վերածեք 16-ականի, կստանաք 4f, քանի որ 79 ÷ 16 = 4 (մնացորդ 15, որը f է): Ոչ մի կլորացում տեղի չի ունենում, քանի որ 16-ական թվանշաններն ամբողջությամբ ծածկում են 0–255 տիրույթը:
Եռանիշ HEX սղագրության ընդլայնումը
Եռանիշ HEX կոդերը, ինչպիսին #abc-ն է, թույլատրվում են CSS-ում և այլ համատեքստերում՝ որպես կոմպակտ գրելաձև: Գործիքն ավտոմատ կերպով ընդլայնում է դրանք վեցանիշի` կրկնապատկելով յուրաքանչյուր թվանշան: Այսինքն՝
#abc→#aabbcc#4f0→#44ff00#fff→#ffffff
Այս կանոնը բխում է CSS սպեցիֆիկացիայից. յուրաքանչյուր ալիքի արժեքը (0–15) կրկնապատկվում է, որպեսզի ստացվի 0–255 միջակայքի արժեք: Օրինակ, #abc-ի դեպքում.
- A (10) → AA (170)
- B (11) → BB (187)
- C (12) → CC (204)
Այսպիսով, RGB(170, 187, 204):
Եթե մուտքագրեք #abc, գործիքը կվերածի այն #aabbcc-ի և կցուցադրի RGB(170, 187, 204):
Մուտքագրման կանոնները և սխալների մշակումը
Գործիքն ընդունում է հետևյալ ձևաչափերը.
- Վեցանիշ HEX՝
#4f46e5,4f46e5 - Եռանիշ HEX՝
#abc,abc #նշանը կամընտիր է, բայց տարածված է
Եթե մուտքագրված արժեքը չի համապատասխանում այս ձևաչափերին (օրինակ՝ 5 նիշ, 8 նիշ ալֆայով, անվավեր նիշեր, ինչպես #xyz), ապա ցուցադրվում է հետևյալ սխալի հաղորդագրությունը.
«Enter a hex color like #4f46e5 or #abc.»
Էջը չի մշակում 8-նիշանոց HEX կոդեր (որոնք ներառում են ալֆա ալիք, ինչպես #4f46e580): Սա միտումնավոր սահմանափակում է, քանի որ այս էջը նվիրված է միայն HEX-ից RGB փոխարկմանը՝ առանց թափանցիկության:
Բոլոր մուտքագրումները մշակվում են ձեր բրաուզերում. ոչ մի տվյալ չի ուղարկվում սերվեր: Կարող եք նաև օգտագործել ներկառուցված գունային ընտրիչը՝ HEX արժեքը վիզուալ ընտրելու համար:
Ինչու են RGB արժեքները միշտ ամբողջ թվեր 0–255 միջակայքում
RGB գունային մոդելում յուրաքանչյուր ալիք (կարմիր, կանաչ, կապույտ) ներկայացված է 8 բիթով, ինչը տալիս է 2⁸ = 256 հնարավոր արժեք՝ 0-ից մինչև 255: 0-ը նշանակում է ալիքի լրիվ բացակայություն, 255-ը՝ առավելագույն ինտենսիվություն:
HEX-ից RGB փոխարկումը հենց այս 256 արժեքներն է ստանում: Յուրաքանչյուր 16-ական զույգը (00-ից FF) համապատասխանում է 0–255 միջակայքին: Փոխարկումը ճշգրիտ է, քանի որ 16-ական թվանշանների յուրաքանչյուր համակցություն ունի յուրահատուկ տասնորդական համարժեք: Ոչ մի կլորացում պետք չէ, քանի որ 16-ական համակարգը ամբողջությամբ ծածկում է 8-բիթանոց արժեքները:
Հետևաբար, HEX #000000-ը վերածվում է RGB(0,0,0) (սև), իսկ #ffffff-ը՝ RGB(255,255,255) (սպիտակ): Մոխրագույնի բոլոր երանգները ստացվում են, երբ երեք ալիքների արժեքները հավասար են, օրինակ՝ #808080 → RGB(128,128,128):
Ովքե՞ր են օգտվում այս էջից և ինչու
Այս գործիքը օգտակար է.
- Front-end ծրագրավորողներին, ովքեր CSS-ի HEX կոդերը պետք է վերածեն RGB արժեքների՝ JavaScript-ում, canvas-ում կամ inline ոճերում օգտագործելու համար: Օրինակ, canvas API-ն հաճախ պահանջում է RGB զանգվածներ:
- Դիզայներներին, ովքեր ստանում են գույնի սպեցիֆիկացիաներ HEX-ով (օրինակ՝ բրենդինգի ուղեցույցից) և պետք է դրանք մուտքագրեն դիզայնի ծրագրերում, որոնք նախընտրում են RGB սահիկներ կամ թվային արժեքներ:
- Խաղերի մշակողներին և թվային արտիստներին, ովքեր մաթեմատիկորեն մանիպուլյացիա են անում գույները և ուզում են 0–255 ալիքների ճշգրտությունը:
- Ուսանողներին և սովորողներին, ովքեր հետազոտում են, թե ինչպես են վեցանկյուն գունային կոդերը կապված ավելի գումարվող RGB գունային մոդելի հետ, որն օգտագործում են մոնիտորները:
Էջի ճշգրիտ փոխարկումը և միաժամանակ բոլոր գունային ձևաչափերի թարմացումը (HSL, HSV, CMYK, LAB) թույլ է տալիս համեմատել HEX-ի և RGB-ի հարաբերությունները այլ մոդելների հետ:
Գործնական օրինակներ
Ստորև բերված են մի քանի սովորական HEX գույներ և դրանց RGB համարժեքները.
| HEX | RGB |
|---|---|
#ff0000 |
RGB(255, 0, 0) |
#00ff00 |
RGB(0, 255, 0) |
#0000ff |
RGB(0, 0, 255) |
#ffff00 |
RGB(255, 255, 0) |
#ff00ff |
RGB(255, 0, 255) |
#00ffff |
RGB(0, 255, 255) |
#808080 |
RGB(128, 128, 128) |
#c0c0c0 |
RGB(192, 192, 192) |
#800000 |
RGB(128, 0, 0) |
Նկատեք, որ #808080-ը միջին մոխրագույնն է, որտեղ բոլոր երեք ալիքներն էլ նույն արժեքն ունեն: Ալիքների արժեքների տարբերությունները ստեղծում են գույնի երանգ:
Հաճախ տրվող հարցեր
1. Ի՞նչ է նշանակում # նշանը HEX կոդում:
#-ը ցույց է տալիս, որ հաջորդող թվանշանները վեցանկյուն գունային կոդ են: CSS-ում և HTML-ում այն պարտադիր է, բայց այս գործիքն ընդունում է նաև առանց դրա:
2. Ինչո՞ւ է եռանիշ HEX-ը վերածվում վեցանիշի:
Քանի որ յուրաքանչյուր ալիք պետք է ունենա 0–255 արժեք, իսկ եռանիշ կոդը տալիս է միայն 0–15 արժեք: Կրկնապատկելով թվանշանը (օր. a → aa) ստացվում է 0–255 միջակայքը: Սա CSS ստանդարտն է:
3. Կարո՞ղ եմ մուտքագրել 8-նիշանոց HEX ալֆա ալիքով (ինչպես #4f46e580):
Ոչ, այս էջը մշակում է միայն 6 կամ 3 նիշ: Եթե մուտքագրեք 8 նիշ, կստանաք սխալի հաղորդագրություն:
4. Ինչպե՞ս պատճենել RGB արժեքը:
RGB արժեքը ցուցադրվում է առանձին դաշտում: Կարող եք ընտրել այն և պատճենել (Ctrl+C / Cmd+C): Շատ դեպքերում այն ներկայացված է որպես rgb(79, 70, 229) ձևաչափով:
5. Ի՞նչ կլինի, եթե սխալ HEX մուտքագրեմ, օրինակ «xyz»:
Գործիքը կցուցադրի սխալի հաղորդագրություն. «Enter a hex color like #4f46e5 or #abc.»: Այն նաև չի ընդունում արտասովոր նիշեր կամ սխալ երկարություն:
6. Ինչու՞ են RGB արժեքները 0–255, այլ ոչ թե 0–1 կամ 0–100:
Պատճառը պատմական է. համակարգիչներն օգտագործում են 8-բիթանոց ալիքներ, որոնք կարող են ներկայացնել 256 արժեք: 0–255 միջակայքը թույլ է տալիս ամբողջ թվային ներկայացում: CSS-ում կա նաև rgb(79, 70, 229) ձևաչափը, որը համապատասխանում է այս միջակայքին:
7. Կարո՞ղ եմ օգտագործել այս էջը անցանց ռեժիմում:
Այո, քանի որ բոլոր հաշվարկները կատարվում են ձեր բրաուզերում: Մի անգամ բեռնելով էջը, կարող եք այն օգտագործել առանց ինտերնետ կապի:
8. Հնարավո՞ր է HEX-ից RGB փոխարկել առանց # նշանի:
Այո, եթե մուտքագրեք 4f46e5, գործիքը կճանաչի այն որպես վավեր HEX և կցուցադրի RGB(79, 70, 229):