RGB გიწვდის სამი ათობით არხს 0–255 შორის. HEX-ში გადაყვანა ცვლის თითო არხს ორ-ციფრიან ჰექსადეციმალურ მნიშვნელობად, ასე რომ მთელი ფერი ერთ კომპაქტურ ნიშანში ჯდება, რასაც ყველა ბრაუზერი, დიზაინის ინსტრუმენტი და სტილის სახელმძღვანელო მიხვდება.
როგორ მუშაობს RGB-დან HEX-ში კონვერსია
- აიღე წითელი არხი და გაყავი 16-ით: ჯამი იქნება პირველი იშვიათი ციფრი, დანარჩენი — მეორე.
- დააწერე ციფრები 10–დან 15-მდე როგორც ასოები A–დან F — 255 გადაიზრდება FF-ად.
- გაიმეორე მწვანე და ლურჯი არხებისთვის, ერთნიშნა ციფრები აავსე წინამორბედით ნულით: 5 გახდება 05.
- შეერთე სამი წყვილი და დაუსვი წინ #.
გასამშრომლებელი მაგალითი
სრულყოფილად მოქმედებს მაშინ, როცა არხები მთლიან რიცხვებადაა 0–255 შუალედში. წრფივი მნიშვნელობები როგორიცაა rgb(79.5, 70, 229) ჯერ გახურდება უახლოეს მთლიან რიცხვებზე, რადგან 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 to 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 |