HSL აღწერს ფერს ისე, როგორც ადამიანები საუბრობენ: რომელი ტონია, რამდენად გაჯერილი და რამდენად ნათელი. HEX-ის HSL-ად გადაყვანა ყველაზე სწრაფი გზაა, რომ ფერთან მუშაობა ნამდვილად ხელმისაწვდომ გქონდე — გაბრწყინება, გამოტანება ან მასეულობის აგება.
როგორ მუშაობს HEX-დან HSL-ში კონვერსია
- გადაცვალე HEX RGB-ად და ყველა არხი გაყავი 255-ით, რათა ყველა მნიშვნელობა იყოს 0–1 შუალედში.
- იპოვნე სამიდან ყველაზე დიდი და ყველაზე პატარა მნიშვნელობები. მათი საშუალო არის განათება L.
- შესაბამისი გაფართოება განსაზღვრავს გაჯერებას S-ს: გაუყოფე იგი (2 − max − min)-ზე მსხალ ფერებისთვის ან (max + min)-ზე მუქ ფერებისთვის.
- რომელ არხშია მაქსიმუმი, ის განაგებს ტონის H-ს — წითელი 0°, მწვანე 120°, ლურჯი 240° — და დანარჩენი ორი არხი ადგენს ტონის მდებარეობას ამ სეგმენტში.
გასამშრომლებელი მაგალითი
გადაწერა მათემატიკურად ზუსტი არის, მაგრამ HSL მნიშვნელობები ჩვეულებრივ ირგზავება ამორტიზირებულ მთელი გრადუსებსა და პროცენტებში. დაბრუნება შესაძლოა დაახარისხოს ერთი ან ორი RGB ნაბიჯით თავდაპირველიდან — პრაქტიკაში უხილავია, მაგრამ კარგი იცოდე თუ ფერებს მრავალჯერ აიღებ.
HEX და HSL ახსნილი
რას წარმოადგენს HEX?
HEX კოდი არის ქვესტი ექვსი ჰექსადეციმალური სიმბოლო, რომელიც ინახავს ფერის წითელ, მწვანე და ლურჯ არხებს წინმორბედ #-თან ერთად. თითოეული წყვილი სიმბოლოები ასახავს ერთ არხს 00–დან FF-მდე, რაც იძლევა იგივე 16.7 მილიონ ფერს რაც RGB, მაგრამ მოკლე ნოტაციაში. HEX არის სტანდარტი CSS-ში, დიზაინის ინსტრუმენტებში და ბრენდის გზამკვლავებში.
- სინტაქსი:
- #RRGGBB
- დიაპაზონი:
- 00–FF თითო არხისთვის
- საუკეთესო მისთვის:
- CSS, დიზაინის გადაცემები, ბრენდის წესები
რას წარმოადგენს HSL?
HSL აყოფს ფერს შეფერილობაზე (0–360° ფერის წრეზე), სარჩულზე (რაად გადაამრთველია ფერი, 0–100%) და სიკაშკაშეზე (თუ რამდენად ბრწყინავს, 0–100%). რადგან თითოეული ნაწილი ჰარმონიულად ეწყობა იმას, თუ როგორ აღწერენ ადამიანები ფერს, HSL არის ყველაზე მარტივი ფორმატი ტონების, ჩრდილების და თანმიმდევრი პალეტების შესაქმნელად — ხელით ან კოდში.
- სინტაქსი:
- hsl(H, S%, L%)
- დიაპაზონი:
- 0–360°, 0–100%, 0–100%
- საუკეთესო მისთვის:
- პალეტები, ტონები და ჩრდილები, თემინგი
HEX to HSL სამოხელეო ცხრილი
ყველაზე გავრცელებული CSS ფერები, გადაკეთებული HEX-დან HSL-ში.
| ფერი | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |