Ինչպես HEX գույնը փոխարկել RGB և HSL ձևաչափերի

Տասնվեցական գունային կոդերը վեբ ծրագրավորման և դիզայնի ամենատարածված ձևաչափերից են, սակայն CSS ոճերում հաճախ պահանջվում է օգտագործել RGB կամ HSL արժեքներ: Փոխարկումը կատարելու համար կարող եք օգտագործել առցանց Գույների ընտրիչ գործիքը, որն ապահովում է ճշգրիտ արդյունք և հաշվարկում գույնի պայծառությունը:

Ինչի համար է նախատեսված գործիքը

Այս ծրագիրը նախատեսված է երեք կամ վեց նիշ պարունակող HEX տողերը ստուգելու և դրանք միաժամանակ կամ առանձին RGB ու HSL ձևաչափերի փոխակերպելու համար: Այն օգնում է դիզայներներին և ծրագրավորողներին արագ համադրել տարբեր միջավայրերում պահանջվող գունային կոդերը:

Բացի հիմնական գունային ներկայացումներից, համակարգը հաշվարկում է նաև լրացուցիչ տվյալներ, ինչպիսիք են լրացնող հակադիր գույնը և թվային պայծառությունը 0-ից 255 սանդղակով:

Քայլ առ քայլ ուղեցույց

1. Մուտքագրեք տասնվեցական գույնի կոդը համապատասխան դաշտում: Կարող եք նշել երեք նիշանոց կարճ տարբերակ (օրինակ՝ f00) կամ վեցանիշ ամբողջական կոդ (օրինակ՝ #3498db): Սկզբի # նշանը պարտադիր չէ, քանի որ համակարգն ավտոմատ մշակում է այն:
2. Ընտրեք ելքային ձևաչափը: Լռելյայն ընտրված է «Բոլորը» (all) տարբերակը, որը ցուցադրում է HEX, RGB և HSL բոլոր արժեքները: Ցանկության դեպքում կարող եք ընտրել միայն կոնկրետ մեկ ձևաչափ:
3. Ստուգեք ստացված արդյունքը: Դուք կտեսնեք ճշգրիտ հաշվարկված գունային տողերը, RGB բաղադրիչները և գույնի պայծառության ցուցանիշը:

Եթե աշխատում եք պատրաստի լուսանկարի հետ և ցանկանում եք գույն վերցնել անմիջապես պատկերից, ձեզ կարող է օգնել նաև Պատկերի գույների ընտրիչ գործիքը:

Ինչպես կարդալ և հասկանալ ստացված արդյունքը

Ելքային արդյունքներում ներկայացվում են մի քանի առանցքային պարամետրեր.

• HEX՝ ստանդարտացված վեցանիշ փոքրատառ գրելաձև սկզբնական # նշանով:
• RGB՝ կարմիր, կանաչ և կապույտ ալիքների արժեքները 0-ից մինչև 255 ամբողջ թվերի տեսքով rgb(r, g, b) ձևաչափով:
• HSL՝ գույնի երանգը աստիճաններով (0-360) ու հագեցվածությունն ու լուսավորությունը տոկոսներով hsl(h, s%, l%) ձևաչափով:
• Պայծառություն՝ կշռված թվային ցուցանիշ, որը հաշվարկվում է 0.299 × R + 0.587 × G + 0.114 × B բանաձևով: Եթե արժեքը գերազանցում է 128-ը, գույնը համարվում է բաց:

Գործնական օրինակ

Ենթադրենք, դուք ունեք #3498db երանգը և ցանկանում եք իմանալ դրա բաղադրիչները:

1. Գունային դաշտում մուտքագրում եք #3498db:
2. Ելքային ձևաչափի դաշտում թողնում եք «Բոլորը» տարբերակը:
3. Արդյունքում ստանում եք rgb(52, 152, 219) և hsl(204, 70%, 53%) արժեքները:
4. Պայծառության ցուցանիշը կազմում է 131.649, ինչը նշանակում է, որ գույնը դասվում է բաց երանգների շարքին:

Գործիքի սահմանափակումները

• Գործիքն ընդունում է միայն երեք կամ վեց նիշանոց տասնվեցական կոդեր:
• Չորս կամ ութ նիշ պարունակող ալֆա թափանցիկության կոդերը (օրինակ՝ #3498db80) չեն աջակցվում և մերժվում են:
• Որպես մուտքային տվյալ հնարավոր չէ ներմուծել rgb(...) կամ hsl(...) ֆունկցիոնալ տողեր:
• Պայծառության ցուցանիշը զուտ տեխնիկական հաշվարկային արժեք է և չի փոխարինում WCAG մատչելիության կամ կոնտրաստի պաշտոնական ստուգումներին:

Հաճախ հանդիպող սխալներ

• Ոչ տասնվեցական նիշերի օգտագործում՝ մուտքագրվող տողը պետք է պարունակի միայն 0-9 թվանշանները և a-f տառերը:
• Սխալ երկարություն՝ չորս, հինգ կամ յոթ նիշ պարունակող կոդերը համարվում են անվավեր:
• RGB տեքստի մուտքագրում՝ գործիքը ստեղծված է HEX կոդերի մշակման համար, ուստի այլ ձևաչափերի տողեր տեղադրելիս կստանաք սխալի հաղորդագրություն:

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

Կարո՞ղ եմ օգտագործել երեքանիշ կարճ HEX գույն

Այո, կարող եք մուտքագրել երեք նիշանոց կարճ կոդ, օրինակ՝ abc կամ #abc: Համակարգը ավտոմատ կերպով այն կընդլայնի վեցանիշ ամբողջական տեսքի՝ վերածելով #aabbcc արժեքի:

Ինչպե՞ս ստանալ HEX, RGB և HSL ձևերը միասին

Ելքային ձևաչափերի ցանկից ընտրեք «Բոլորը» տարբերակը: Դա թույլ կտա միանգամից տեսնել բոլոր երեք ձևաչափերը մեկ ընդհանուր արդյունքների աղյուսակում:

Կարո՞ղ եմ մուտքագրել RGB կամ թափանցիկությամբ գույն

Ոչ, գործիքն ընդունում է միայն երեք կամ վեց նիշանոց HEX կոդեր: RGB ֆունկցիաները և թափանցիկության ալֆա ալիքով կոդերը չեն աջակցվում: