RGB-ից HEX Փոխարկիչ

Ի՞նչ է անում այս էջը

Էջում մուտքագրում եք կարմիր, կանաչ և կապույտ արժեքներ — յուրաքանչյուրը 0-ից 255 միջակայքի ամբողջ թիվ — և ակնթարթորեն տեսնում համարժեք տասնվեցական (hex) գույնի կոդը, օրինակ՝ #1E90FF։ Գործիքը միաժամանակ ցույց է տալիս գույնի նմուշը և թարմացնում մնացած բոլոր աջակցվող գունային ձևաչափերը՝ HSL, HSV, CMYK, LAB և գունային ընտրիչը։ Այսպիսով, դուք կարող եք վերցնել hex արժեքը և ուղղակիորեն օգտագործել այն CSS-ում, դիզայնի ծրագրերում կամ ցանկացած այլ աշխատանքային հոսքում, որտեղ սպասվում է hex գույն։

Սա սովորական կոնվերտեր չէ. խմբագրման բոլոր դաշտերը փոխկապակցված են, և «Փոխարկել» կոճակ գոյություն չունի։ Երբ փոխում եք RGB արժեքները, hex դաշտը, գույնի նմուշը և մյուս ձևաչափերը թարմացվում են միաժամանակ։ Ամբողջ մշակումը կատարվում է ձեր բրաուզերում, և ոչ մի տվյալ չի ուղարկվում սերվեր։

Ինչո՞վ է այս էջը տարբերվում մյուսներից

Կոնվերտացիան RGB-ից (տասական, երեք ալիք 0‑255) hex (տասնվեցական, վեցանիշ կամ եռանիշ կրճատ) կատարվում է առանց գամուտի կտրման կամ մոտարկման։ Երկու ձևաչափերն էլ ներկայացնում են ճիշտ նույն գունային տիրույթը՝ sRGB աշխատանքային տարածությունը, որն օգտագործում են ժամանակակից էկրանների մեծ մասը։

Hex ելքը միշտ սկսվում է #-ով։ Եթե չօգտագործեք ութանիշ ձևը (օրինակ՝ ալֆա-ալիքով), hex կոդը չի պարունակում թափանցիկության մասին տեղեկություն։ RGB մուտքը սպասում է երեք թվերի՝ բաժանված ստորակետերով կամ բացատներով, օրինակ՝ 79, 70, 229։ Ստացված hex կոդը միշտ վեցանիշ է (օրինակ՝ #4F46E5), քանի որ յուրաքանչյուր 0‑255 արժեք քարտեզագրվում է երկու տասնվեցական թվանշանների զույգի։

Ինչպե՞ս է աշխատում փոխարկումը. RGB → Hex մաթեմատիկա

RGB-ից hex փոխարկումը հիմնված է պարզ թվաբանության վրա։ Յուրաքանչյուր գունային ալիք (R, G, B) ներկայացված է 0-ից 255 ամբողջ թվով։ Hex-ում յուրաքանչյուր ալիք ներկայացվում է երկու տասնվեցական թվանշանով (00-ից FF)։ Թվանշանները լինում են 0-9 և A-F, որտեղ A=10, B=11, C=12, D=13, E=14, F=15։

Աշխատանքային օրինակ. Ենթադրենք, ունենք RGB արժեքներ՝ R=79, G=70, B=229:

1. Կարմիր (79). 79 ÷ 16 = 4 (քանորդ) մնացորդ 15: 4-ը hex-ում 4 է, 15-ը՝ F: Ստանում ենք 4F:
2. Կանաչ (70). 70 ÷ 16 = 4 մնացորդ 6: Ստանում ենք 46:
3. Կապույտ (229). 229 ÷ 16 = 14 մնացորդ 5: 14-ը hex-ում E է, 5-ը՝ 5: Ստանում ենք E5:

Այսպիսով, ամբողջական hex կոդը #4F46E5 է: Հակադարձ փոխարկումը՝ hex-ից RGB, կատարվում է նույն սկզբունքով. յուրաքանչյուր զույգ թվանշան թարգմանվում է տասականի (օրինակ, 4F → 4×16 + 15 = 79), և արդյունքը ճիշտ նույնն է:

Քանի որ RGB-ն և hex-ը գտնվում են նույն sRGB գունային տարածության մեջ, փոխարկումը ամբողջությամբ դարձելի է և առանց կորուստների: Սա նշանակում է, որ ցանկացած RGB արժեք (0-255 միջակայքում) կունենա ճշգրիտ hex համարժեք, և հակառակը:

Մուտքագրման կանոններ և սխալների մշակում

Գործիքը պահանջում է RGB արժեքները մուտքագրել երեք թվերի տեսքով, յուրաքանչյուրը 0-255 միջակայքում: Թույլատրվում են հետևյալ բաժանարարները.

• ստորակետեր (օրինակ՝ 79, 70, 229)
• բացատներ (օրինակ՝ 79 70 229)
• կամ դրանց համակցությունը (օրինակ՝ 79, 70 229)

Եթե մուտքագրվեն 0-255 միջակայքից դուրս թվեր կամ սխալ ձևաչափ, գործիքը ցույց է տալիս հետևյալ սխալի հաղորդագրությունը (թարգմանված).

«Մուտքագրեք RGB-ն որպես երեք թիվ 0-255 միջակայքում, օրինակ՝ 79, 70, 229»:

Hex մուտքագրման դաշտը, ի տարբերություն ելքի, ընդունում է նաև եռանիշ կրճատ ձևը (օրինակ՝ #abc): Այդ դեպքում գործիքը ներքին ընդլայնում է այն՝ կրկնելով յուրաքանչյուր թվանշանը. #abc → #aabbcc: Սա համապատասխանում է CSS-ի կանոններին, որտեղ #abc-ն համարժեք է #aabbcc-ին: Սակայն ելքային hex արժեքը միշտ ցուցադրվում է վեցանիշ տարբերակով, նույնիսկ եթե մուտքը եռանիշ էր: Գործիքը ավտոմատաբար չի կրճատում #AABBCC-ն #ABC-ի, քանի որ դա կարող է շփոթություն առաջացնել:

Սխալների աղյուսակ

Ո՞ւմ է անհրաժեշտ այս գործիքը

• Front-end մշակողներին, ովքեր գրում են CSS կամ inline ոճեր և պահանջում hex գունային արժեքներ: Օրինակ, RGB արժեքներ ստանալով դիզայներից, նրանք կարող են արագ ստանալ համապատասխան hex կոդը:
• UI/UX դիզայներներին, ովքեր ստանում են գույների ճշգրտումները RGB եռյակների տեսքով (օրինակ՝ Photoshop-ից կամ GIMP-ից) և պետք է դրանք փոխարկեն դիզայնի հանձնման գործիքների կամ կոդի համար:
• Գրաֆիկական դիզայներներին, ովքեր աշխատում են վեբ-ասսետների հետ և ցանկանում են ապահովել գույնի հետևողականություն RGB-ից ստացված նախատիպերի և վերջնական hex-ով կոդավորված ներդրման միջև:
• Ուսանողներին կամ հոբբիստներին, ովքեր սովորում են, թե ինչպես է աշխատում թվային գույնը, և ցանկանում են տեսնել տասական և տասնվեցական ներկայացումների միջև կապը:
• Բոլորին, ովքեր օգտագործում են գունային ընտրիչի տվյալներ, որոնք վերադարձնում են RGB արժեքներ (օրինակ՝ բրաուզերի DevTools-ից) և անհրաժեշտ է համապատասխան hex կոդը ոճային թերթի համար:

sRGB աշխատանքային տարածությունը և գունային ճշգրտություն

Ինչու՞ է RGB-ի և hex-ի միջև փոխարկումը կատարյալ: Պատասխանը sRGB գունային տարածության մեջ է: sRGB-ն (Standard RGB) 1996 թվականին HP-ի և Microsoft-ի կողմից մշակված ստանդարտ է, որը նկարագրում է գույնի վերարտադրությունը էկրաններում: Այն ընդգրկում է մարդու աչքին տեսանելի գույների մի մասը, սակայն դա այն տարածությունն է, որում աշխատում են գրեթե բոլոր ժամանակակից մոնիտորները, վեբ բրաուզերները և թվային պատկերները:

RGB-ը և hex-ը sRGB-ի ներսում ներկայացնում են ճիշտ նույն կետերը: Տարբերությունը միայն ներկայացման ձևն է.

• RGB-ն օգտագործում է տասական թվեր (0-255 յուրաքանչյուր ալիքի համար):
• Hex-ն օգտագործում է տասնվեցական թվեր (00-FF յուրաքանչյուր ալիքի համար):

Որովհետև 256-ը 16-ի ամբողջ աստիճանն է (16² = 256), 0-255 միջակայքի յուրաքանչյուր արժեք ունի ճշգրիտ երկնիշ hex համարժեք: Սա նշանակում է, որ rgb(79, 70, 229)-ը և #4F46E5-ը նույն գույնի երկու տարբեր գրառումներ են: Այլ գունային մոդելներում, օրինակ՝ CMYK-ում (որը հանող է), փոխարկումը կարող է պահանջել մոտարկում, բայց RGB ↔ Hex-ը մաթեմատիկորեն ճշգրիտ է:

Հաճախ տրվող հարցեր (FAQ)

1. Ինչու՞ hex կոդը միշտ 6 նիշ է, եթե կարող եմ օգտագործել 3-ը: Գործիքը ելքում ցուցադրում է 6 նիշ, քանի որ յուրաքանչյուր RGB ալիքին 2 նիշ է հատկացվում: Սա ապահովում է լիակատար համատեղելիություն CSS-ի հետ: Սակայն hex մուտքագրման դաշտը ընդունում է 3-նիշ կրճատ (օրինակ #abc), և գործիքը ինքնաբերաբար ընդլայնում է այն: Եթե ցանկանում եք կրճատ գրել CSS-ում, կարող եք դա անել ձեռքով, սակայն գործիքը չի կրճատում ավտոմատ:

2. Ի՞նչ անել, եթե մուտքագրեմ 255-ից մեծ թիվ: Գործիքը ցույց կտա սխալի հաղորդագրություն: Դուք պետք է մուտքագրեք միայն 0-255 միջակայքի ամբողջ թվեր: Սա վերաբերում է նաև բացասական թվերին:

3. Կարո՞ղ եմ արդյոք մուտքագրել RGB արժեքներ տոկոսներով (օրինակ 30%, 50%, 80%): Ոչ, այս գործիքն ակնկալում է մուտքագրել ամբողջ թվեր 0-255 միջակայքում: Տոկոսները (0%-100%) կարող են փոխարկվել 0-255-ի 255/100 բազմապատկիչով, բայց գործիքը դա չի անում ավտոմատ:

4. Ինչու՞ hex կոդը չի պարունակում ալֆա-ալիք (թափանցիկություն): Երբ մուտքագրում եք միայն R, G, B արժեքներ, ալֆա-ալիք չի տրվում: Hex կոդը 6 նիշ է, ինչը նշանակում է լրիվ անթափանց գույն: Ալֆա-ալիք ավելացնելու համար կարող եք օգտագործել 8-նիշ hex (օրինակ #4F46E5FF), բայց այս գործիքը չի արտադրում 8-նիշ: Այնուամենայնիվ, գույնի նմուշը ցույց է տալիս լրիվ անթափանց գույնը, և դուք կարող եք հետագայում ավելացնել ալֆան ձեր CSS-ում opacity հատկությամբ կամ rgba() ֆունկցիայով:

5. Ինչպե՞ս մուտքագրել RGB արժեքներ. ստորակետո՞վ, թե՞ բացատով: Երկուսն էլ թույլատրվում է: Կարող եք գրել 79,70,229 կամ 79 70 229 կամ խառը՝ 79, 70 229: Կարևոր է, որ լինի երեք առանձին արժեք: Ավելորդ բացատները անտեսվում են:

6. Կարո՞ղ եմ արդյոք օգտագործել այս գործիքը CMYK-ի հետ: Գործիքը ցույց է տալիս CMYK արժեքները որպես լրացուցիչ ձևաչափ, բայց հիմնական փոխարկումը RGB-ից hex է: CMYK արժեքները հաշվարկվում են RGB-ից sRGB պրոֆիլում, սակայն դրանք կարող են ճշգրիտ չլինել տպագրության համար, քանի որ իրական CMYK-ն կախված է թղթի և տպիչի պրոֆիլից: Գործիքը տալիս է մոտավոր արժեքներ, բայց հիմնական նպատակը RGB ↔ hex-ի ճշգրիտ փոխարկումն է: