Интихоби ранг дар HSL бароҳат аст, вале stylesheet-ҳо, супоришҳои дизайни ва ҳуҷҷатҳои бренд ҳамоно бо HEX кор мекунанд. Ин табдилдиҳанда фосиларо мепӯшад ва барои ҳар як комбинатсияи тон, сатурация ва равшанӣ коди шаш-рақамиро медиҳад.
Чӣ гуна табдили HSL ба HEX кор мекунад
- Сатурация ва равшаниро ба ададҳои қисматӣ табдил деҳ: 60% мешавад 0.6.
- Хромаро ҳисоб дор C = (1 − |2L − 1|) × S — ин нишон медиҳад, ки ранг чанд қадар аз хокистарӣ дур аст.
- Бо истифодаи hue он хромаро ба каналҳои сурх, сабз ва кабуд ҷойгир кун, пас ҳар се каналро бо L − C/2 ҷобаҷо (shift) кун.
- Ҳар каналро бо 255 зарб кун, гардиш (round) кун ва онро ҳамчун ду рақами ҳексадецималӣ навис.
Намунаи амалӣ
Гардиш як бор дар қадами охир рух медиҳад, вақте ки ҳар канал ба арзиши тамоми 0–255 бурида мешавад. Натиҷа наздиктарин коди HEX ба воридоти HSL-и ту аст ва одатан бо ончи асбоби дизайн нишон медиҳад якхела аст.
HSL ва HEX шарҳ дода шудаанд
HSL чист?
HSL рангро ба тон (0–360° дар чархи ранг), қаноатмандӣ (чӣ қадар рангафзун, 0–100%) ва равшанӣ (чӣ қадар равшан, 0–100%) ҷудо мекунад. Азбаски ҳар бахш мувофиқи тавсифи инсон аз ранг аст, HSL осонтарин формат барои сохтани тилтҳо, сояҳо ва палитраҳои устувор — дастонӣ ё дар код — мебошад.
- Синтаксис:
- hsl(H, S%, L%)
- Диапазон:
- 0–360°, 0–100%, 0–100%
- Барои беҳтарин:
- палитраҳо, тилтҳо ва сояҳо, мавзубандӣ
HEX чист?
Коди HEX рақами ҳексанумерии шашрақамест, ки канали сурх, сабз ва кабуди рангро паси аломати # нигоҳ медорад. Ҳар ҷуфт рақам як каналро аз 00 (ҳеҷ) то FF (пур) нишон медиҳад, ки ҳамон 16.7 миллион рангҳои RGB-ро дар шакли кӯтоҳтар медиҳад. HEX дар CSS, воситаҳои дизайни ва дастурҳои бренди стандартӣ мебошад.
- Синтаксис:
- #RRGGBB
- Диапазон:
- 00–FF барои ҳар канал
- Барои беҳтарин:
- CSS, супориши дизайн, дастурҳои бренд
Ҷадвали муроҷиатии HSL ба HEX
Машҳуртарин рангҳои CSS, табдил ёфта аз HSL ба HEX.
| Ранг | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |