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