HSL-д дизайнгдсан палитрууд ихэвчлэн цаасан дээр очдог. Энэ хөрвүүлэгч нь таны сонгосон hue, saturation, lightness-ийг авч, хэвлэх газар ашиглах дөрвөн бэхийн хувийг буцаадаг.
HSL-г CMYK-руу хэрхэн хөрвүүлдэг вэ
- HSL гурвалыг 0–255 хоорондын RGB сувгууд руу хөрвүүл.
- Тэр сувгуудыг 255-ээр хувааж ерөнхийжүүл.
- Түлхүүр K = 1 − max(R, G, B)-г тооц.
- Үлдсэн сувгуудаас C, M, Y-г гаргаж, дөрвөн утгыг бүгдийг нь хувиар хөрвүүл.
Ажлын жишээ
Хоёр хөрвүүлэлт дараалан явагддаг тул тойрголт хоёр удаа ордог — мөн CMYK нь өнгийн профильгүйгээр таамаг хэвээр. Хэвлэгдсэн үр дүн HSL урьдчилж харуулснаас арай сул өнгөтэй гарахыг тооцоол.
HSL ба CMYK тайлбарласан
HSL гэж юу вэ?
HSL нь өнгийг хүрээ (color wheel дээр 0–360°), өнгө баялаг (saturation, 0–100%) болон гэрэллэг (lightness, 0–100%) болгон хуваадаг. Хүн бүр өнгийг ингэж тайлбарладаг учраас HSL нь туйтс, сүүдэр, тогтмол палитр үүсгэхэд — гараар эсвэл кодоор — хамгийн хялбар формат юм.
- Синтакс:
- hsl(H, S%, L%)
- Хүрээ:
- 0–360°, 0–100%, 0–100%
- Хамгийн тохиромжтой:
- палитр, туйтс ба сүүдэр, сэдэвжүүлэх
CMYK гэж юу вэ?
CMYK нь хэвлэлтэнд ашиглагддаг дөрвөн бэхний модель: cyan, magenta, yellow болон key (black), тус бүр нь 0–100% хүртэл хувь. Бэх нь гэрлийг ялгаж авдаг тул дэлгэцнээс харьцангуй бага өнгийг хамардаг — тиймээс дэлгэцэн дээр тод харагдсан өнгө хэвлэхэд барагдуулах үед бүдэг харагддаг.
- Синтакс:
- cmyk(C%, M%, Y%, K%)
- Хүрээ:
- Бэх бүрээр 0–100%
- Хамгийн тохиромжтой:
- хэвлэл, савлагаа, хэвлэхэд бэлэн зураг
HSL-г CMYK-руу лавлах хүснэгт
Хамгийн түгээмэл CSS өнгөнүүд, HSL-аас CMYK-руу хөрвүүлсэн.
| Өнгө | HSL | CMYK |
|---|---|---|
| black | hsl(0, 0%, 0%) | cmyk(0%, 0%, 0%, 100%) |
| white | hsl(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) |
| red | hsl(0, 100%, 50%) | cmyk(0%, 100%, 100%, 0%) |
| lime | hsl(120, 100%, 50%) | cmyk(100%, 0%, 100%, 0%) |
| blue | hsl(240, 100%, 50%) | cmyk(100%, 100%, 0%, 0%) |
| yellow | hsl(60, 100%, 50%) | cmyk(0%, 0%, 100%, 0%) |
| orange | hsl(39, 100%, 50%) | cmyk(0%, 35%, 100%, 0%) |
| teal | hsl(180, 100%, 25%) | cmyk(100%, 1%, 0%, 50%) |
| purple | hsl(300, 100%, 25%) | cmyk(0%, 100%, 1%, 50%) |
| gray | hsl(0, 0%, 50%) | cmyk(0%, 0%, 0%, 50%) |