RGB нь дэлгэцэнд ямар их гэрэл цацахыг хэлдэг; HSL нь өнгө нь үнэндээ яаж харагдахыг заадаг. Гурван сувгийг hue, saturation болон lightness болгон хөрвүүлбэл өнгийг гараараа амархан тохируулж болно.
RGB-г HSL-руу хэрхэн хөрвүүлдэг вэ
- R, G, B-ийг 255-аар хуваа, ингэснээр утгууд 0 ба 1 хооронд орно.
- Гурваас хамгийн их ба хамгийн бага утгыг ав — тэдний дундаж нь гэрэлтэл L байна.
- Хамгийн их ба хамгийн бага ижил байвал өнгө саарал байна: hue ба saturation хоёулаа 0.
- Үгүй бол S-ийг хамгийн их ба хамгийн бага утгуудын тархалаас гаргаж, H-г аль сувгийг хамгийн их утгатай байгаагаар тодорхойл.
Ажлын жишээ
Онолын хувьд яг. Гэвч H, S, L-ийг ихэвчлэн дугуйлж целлээр харуулдаг тул буцааж хөрвүүлэхэд нэг хоёр сувгийн утга өөрчлөгдөж болно.
RGB ба HSL тайлбарласан
RGB гэж юу вэ?
RGB нь өнгийг гурван гэрлийн сувгаар тодорхойлдог — улаан, ногоон, цэнхэр — тус бүр нь 0–255 хүртэл утгатай. Энэ нь дэлгэц хэрхэн ажилладагтай таарч байна: гурвын аль нь ч 255 байвал цагаан, бүгд 0 байвал хар болно. RGB нь өнгөөр тооцоолол хийх шаардлагатай үед тохиромжтой, мөн rgba() нь давхаргуудын тунгалаг байдлыг нэмдэг.
- Синтакс:
- rgb(R, G, B)
- Хүрээ:
- Сувгаар 0–255
- Хамгийн тохиромжтой:
- код, canvas, rgba()-тай тунгалаг байдал
HSL гэж юу вэ?
HSL нь өнгийг хүрээ (color wheel дээр 0–360°), өнгө баялаг (saturation, 0–100%) болон гэрэллэг (lightness, 0–100%) болгон хуваадаг. Хүн бүр өнгийг ингэж тайлбарладаг учраас HSL нь туйтс, сүүдэр, тогтмол палитр үүсгэхэд — гараар эсвэл кодоор — хамгийн хялбар формат юм.
- Синтакс:
- hsl(H, S%, L%)
- Хүрээ:
- 0–360°, 0–100%, 0–100%
- Хамгийн тохиромжтой:
- палитр, туйтс ба сүүдэр, сэдэвжүүлэх
RGB-г HSL-руу лавлах хүснэгт
Хамгийн түгээмэл CSS өнгөнүүд, RGB-аас HSL-руу хөрвүүлсэн.
| Өнгө | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |