HSL нь өнгө сонгоход эелдэг арга, харин RGB нь дэлгэц, canvas API ба зурагны код бодитоор хэрэглэдэг формат. Энэ хөрвүүлэгч нь ямар ч hue, saturation, lightness гурвалийг яг 0–255 хоорондын сувгуудад хувиргана.
HSL-г RGB-руу хэрхэн хөрвүүлдэг вэ
- S ба L-ийг хэсэгчилж (фракци) өөрчлөөд хрома C = (1 − |2L − 1|) × S-г тооц.
- Hue-г 60-аар хувааж өнгө дугуйн дээрх хэсгийг олж, дундаж утга X = C × (1 − |(H/60 mod 2) − 1|)-г тооц.
- Тухайн сегментийн дагуу C, X болон 0-ийг R, G, B оронгуудад дамжуул.
- Гурван сувгуудад L − C/2 гэрэлтлийн офсетыг нэмээд 255-ээр үржүүл.
Ажлын жишээ
Эцсийн бүхэл сувгууд руу тойргох хүртэлх үр дүн нь яг зөв байна. Hue эсвэл saturation-ын хэсгийн утгууд дэмжигддэг ба хамгийн ойрын RGB гурвал дээр унадаг.
HSL ба RGB тайлбарласан
HSL гэж юу вэ?
HSL нь өнгийг хүрээ (color wheel дээр 0–360°), өнгө баялаг (saturation, 0–100%) болон гэрэллэг (lightness, 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-г 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) |