RGB ამბობს ეკრანს რამდენ სინათლეს უნდა უშვებდეს; HSL კი გხვდება რას ფერი სინამდვილეში გამოიყურება. სამ არხის გადაყვანა ტონს, გაჯერებასა და განათებად აკეთებს ფერის ხელით კორექტირებას ადვილს.
როგორ მუშაობს RGB-დან HSL-ში კონვერსია
- გყავი R, G და B 255–ით, რათა თითოეული მნიშვნელობა იყოს 0–1 შუალედში.
- აიღე სამიდან მაქსიმუმი და მინიმუმი — მათი საშუალო არის განათება L.
- თუ მაქსიმუმი და მინიმუმი თანაბარია, ფერი არის ნაცარი: ტონიც და გაჯერებაც ორივე არის 0.
- სხვა შემთხვევაში, გამოიხსენე S გაფართოებიდან მაქსიმუმსა და მინიმუმს შორის და წაიკითხე H იმ არხიდან, რომელიც არის მაქსიმუმი.
გასამშრომლებელი მაგალითი
მარტოდან ზუსტი. რადგან H, S და L ჩვეულებრივ ირგზავება მთლიან რიცხვებად, დაბრუნება შესაძლოა შეცვალოს არხი ერთი ან ორი ნაბიჯით.
RGB და HSL ახსნილი
რას წარმოადგენს RGB?
RGB აღწერს ფერს როგორც երեք სინათლის არხს — წითელი, მწვანე და ლურჯი — თითოეული 0–დან 255-მდე. ეს ასახავს ეკრანების მუშაობას: ყველა არხი 255-ზე იძლევა თეთრის, ყველა 0-ზე — შავს. RGB არის სწორი არჩევანი როცა საჭიროა ფენზე გათვლები, ხოლო rgba() ამატებს გამჭვირვალობას.
- სინტაქსი:
- rgb(R, G, B)
- დიაპაზონი:
- 0–255 თითო არხისთვის
- საუკეთესო მისთვის:
- კოდი, canvas, გამჭვირვალობა rgba()-ით
რას წარმოადგენს HSL?
HSL აყოფს ფერს შეფერილობაზე (0–360° ფერის წრეზე), სარჩულზე (რაად გადაამრთველია ფერი, 0–100%) და სიკაშკაშეზე (თუ რამდენად ბრწყინავს, 0–100%). რადგან თითოეული ნაწილი ჰარმონიულად ეწყობა იმას, თუ როგორ აღწერენ ადამიანები ფერს, HSL არის ყველაზე მარტივი ფორმატი ტონების, ჩრდილების და თანმიმდევრი პალეტების შესაქმნელად — ხელით ან კოდში.
- სინტაქსი:
- hsl(H, S%, L%)
- დიაპაზონი:
- 0–360°, 0–100%, 0–100%
- საუკეთესო მისთვის:
- პალეტები, ტონები და ჩრდილები, თემინგი
RGB to HSL სამოხელეო ცხრილი
ყველაზე გავრცელებული CSS ფერები, გადაკეთებული RGB-დან HSL-ში.
| ფერი | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |