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%) |