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