HEX կոդը փաթեթավորում է երեք 8-բիթանոց թվերը վեց հեքսադեցիմալ թվանշանների մեջ։ HEX-ից RGB-ին փոխարկումը նշանակում է այդ թվանշանները բաժանել զույգերի և յուրաքանչյուր զույգը կարդալ որպես տասնորդական թիվ 0-ից 255՝ նույն արժեքները, որոնց սպասում են CSS-ը, Figma-ն և պատկեր խմբագրիչները։
Ինչպես է աշխատում HEX-ից RGB-ի փոխարկումը
- Հեռացրե՛ք առաջնորդող # նշանը և, եթե կոդը ունի միայն երեք թվանշան, կրկնապատկեք յուրաքանչյուրին՝ #f53-ը դառնալով #ff5533։
- Բաժանել վեց թվանշանները երեք զույգերի՝ RR, GG և BB։
- Յուրաքանչյուր զույգը կարդալ որպես հիմք-16 թիվ և փոխարկել բազա-10՝ FF-ը դառնում է 255, 57-ը դառնում է 87, 33-ը դառնում է 51։
- Վերցնել երեք արդյունքները և գրել դրանք որպես rgb(R, G, B).
Օրինակ աշխատանքի մեջ
Այս փոխարկումը ճշգրիտ է։ HEX-ը և RGB-ը նկարագրում են նույն sRGB արժեքները տարբեր նշումներով, այնպես որ ոչինչ չի փակվում կամ կորում որևէ ուղղությամբ։
HEX և RGB բացատրություն
Ի՞նչ է HEX-ը?
HEX կոդը վեց։ թվանշանանոց հեքսադեցիմալ թիվ է, որը պահում է գույնի կարմիր, կանաչ և կապույտ ալիքները՝ առաջնորդող # նշանից հետո։ Յուրաքանչյուր զույգ թվանիշը համապատասխանաբար ներկայացնում է մեկ ալիքը՝ 00 (ոչինչ)-ից մինչև FF (ամբողջը), և այն տալիս է նույն 16.7 միլիոն գույները, ինչ RGB-ը՝ ավելի սեղմ գրառմամբ։ HEX-ը որպես կարգավիճակ տարածված է CSS-ում, դիզայնի գործիքներում և բրենդային ուղեցույցներում։
- Սինտաքս:
- #RRGGBB
- Диապազոն:
- 00–FF յուրաքանչյուր ալիքի համար
- Լավ է համար:
- CSS, դիզայնի փոխանցում, բրենդային ուղեցույցներ
Ի՞նչ է RGB-ը?
RGB-ը բնութագրում է գույնը որպես երեք լույսի ալիք՝ կարմիր, կանաչ և կապույտ՝ յուրաքանչյուրը 0-ից 255։ Դա արտացոլում է, թե ինչպես են էկրանները իրականում աշխատում՝ բոլոր երեքը 255-ն են տալիս սպիտակ, բոլորը 0 են տալիս սև։ RGB-ը ճիշտ ընտրությունն է երբ պետք է հաշվարկներ անել գույնի հետ, իսկ rgba() ավելացնում է թափանցիկություն։
- Սինտաքս:
- rgb(R, G, B)
- Диապազոն:
- 0–255 յուրաքանչյուր ալիքի համար
- Լավ է համար:
- կոդ, canvas, թափանցիկություն rgba()-ով
HEX-ից RGB-ի հղման աղյուսակ
Ամենատարածված CSS գույները, փոխարկված HEX-ից RGB-ին.
| Գույն | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |