HSL-д өнгө сонгох тав тухтай, гэвч stylesheet, дизайн хуваарилалт ба брэнд баримт бичиг ихэвчлэн HEX ашигладаг. Энэ хөрвүүлэгч нь үүнийг холбож, аливаа hue, saturation ба lightness хослолд зориулсан зургаан цифрт HEX кодыг өгөнө.
HSL-г HEX-руу хэрхэн хөрвүүлдэг вэ
- S ба L-ийг хуваах хэсгүүд болгож хувирга: 60% нь 0.6 болно.
- Хрома C = (1 − |2L − 1|) × S-г тооцоол — энэ нь өнгө саарал өнгөөс хэр зайтай байгааг илтгэнэ.
- Hue-г ашиглан тэр хромаг улаан, ногоон, цэнхэр сувгуудад зохион байрлуулж, дараа нь бүх сувгийг L − C/2-оор шилжүүл.
- Сувгуудыг 255-ээр үржүүлээд, дугуйлж, хоёр HEX цифрээр бич.
Ажлын жишээ
Дугуйлах нь сүүлд, сувгуудыг 0–255 бүхэл болгосон үед л явагдна. Үр дүн нь таны HSL оролтод хамгийн ойрхон HEX код бөгөөд ихэнхдээ дизайн хэрэгсэл дээр харагддагтай адилхан байдаг.
HSL ба HEX тайлбарласан
HSL гэж юу вэ?
HSL нь өнгийг хүрээ (color wheel дээр 0–360°), өнгө баялаг (saturation, 0–100%) болон гэрэллэг (lightness, 0–100%) болгон хуваадаг. Хүн бүр өнгийг ингэж тайлбарладаг учраас HSL нь туйтс, сүүдэр, тогтмол палитр үүсгэхэд — гараар эсвэл кодоор — хамгийн хялбар формат юм.
- Синтакс:
- hsl(H, S%, L%)
- Хүрээ:
- 0–360°, 0–100%, 0–100%
- Хамгийн тохиромжтой:
- палитр, туйтс ба сүүдэр, сэдэвжүүлэх
HEX гэж юу вэ?
HEX код нь өнгийн улаан, ногоон, цэнхэр сувгийг удирдсан зургаан оронтой 16-н үндсэн тоо бөгөөд урьдчилсан # тэмдэгтэй байна. Нэг сугалаа нь нэг сувгийг илэрхийлж, 00 (өгөгдөлгүй)–FF (бүтэн) хүртэл утгатай тул RGB-ийн 16.7 сая өнгийг илэрхийлэх богино тэмдэглэгээ юм. HEX нь CSS, дизайн хэрэгсэл болон брэнд удирдамжийн хэвшмэл анхдагч формат юм.
- Синтакс:
- #RRGGBB
- Хүрээ:
- Сувгаар 00–FF
- Хамгийн тохиромжтой:
- CSS, загвар шилжүүлэг, брэнд удирдамж
HSL-г 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 |