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