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