RGB-ն տալիս է երեք տասնորդական ալիք 0–255-ի միջակայքում։ Քվեին HEX-ին փոխարկելը յուրաքանչյուր ալիքը վերածում է երկնիշ հեքսադեցիմալ թվի, որպեսզի ամբողջ գույնը տեղավորվի մեկ կոմպակտ նշանում, որը հասկանում են բոլոր բրաուզերները, դիզայնի գործիքները և ոճային ուղեցույցները։
Ինչպես է աշխատում RGB-ից HEX-ի փոխարկումը
- Լրացնել կարմիր ալիքը՝ բաժանել այն 16‑ով. բաժանումի ամբողջ մասն է առաջին թիվը, մնացորդը՝ երկրորդը.
- Թվերը 10–15 գրեք որպես A–F տառեր — 255 բացվում է որպես FF.
- Կրկրեք կանաչի եւ կապտyի համար, մեկանիշ թվերը լրացրեք առաջադրած զրոով. 5 դառնում է 05.
- Միացրեք երեք զույգերը եւ դրեք # առջեւում.
Օրինակ աշխատանքի մեջ
Ճշգրիտ է, եթե ալիքները ամբողջ թվեր են 0–255 միջակայքից: ֆրակցիոն արժեքները, օրինակ rgb(79.5, 70, 229), սկզբում կլորացվեն najոտ թիվին, որովհետև HEX-ը չի կարող պահել միջանկյալ արժեքներ.
RGB և HEX բացատրություն
Ի՞նչ է RGB-ը?
RGB-ը բնութագրում է գույնը որպես երեք լույսի ալիք՝ կարմիր, կանաչ և կապույտ՝ յուրաքանչյուրը 0-ից 255։ Դա արտացոլում է, թե ինչպես են էկրանները իրականում աշխատում՝ բոլոր երեքը 255-ն են տալիս սպիտակ, բոլորը 0 են տալիս սև։ RGB-ը ճիշտ ընտրությունն է երբ պետք է հաշվարկներ անել գույնի հետ, իսկ rgba() ավելացնում է թափանցիկություն։
- Սինտաքս:
- rgb(R, G, B)
- Диապազոն:
- 0–255 յուրաքանչյուր ալիքի համար
- Լավ է համար:
- կոդ, canvas, թափանցիկություն rgba()-ով
Ի՞նչ է HEX-ը?
HEX կոդը վեց։ թվանշանանոց հեքսադեցիմալ թիվ է, որը պահում է գույնի կարմիր, կանաչ և կապույտ ալիքները՝ առաջնորդող # նշանից հետո։ Յուրաքանչյուր զույգ թվանիշը համապատասխանաբար ներկայացնում է մեկ ալիքը՝ 00 (ոչինչ)-ից մինչև FF (ամբողջը), և այն տալիս է նույն 16.7 միլիոն գույները, ինչ RGB-ը՝ ավելի սեղմ գրառմամբ։ HEX-ը որպես կարգավիճակ տարածված է CSS-ում, դիզայնի գործիքներում և բրենդային ուղեցույցներում։
- Սինտաքս:
- #RRGGBB
- Диապազոն:
- 00–FF յուրաքանչյուր ալիքի համար
- Լավ է համար:
- CSS, դիզայնի փոխանցում, բրենդային ուղեցույցներ
RGB-ից HEX-ի հղման աղյուսակ
Ամենատարածված CSS գույները, փոխարկված RGB-ից HEX-ին.
| Գույն | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |