HSL рангиеро тавре шарҳ медиҳад, ки одамон дар бораи он гап мезананд: кадом тон (hue), чӣ қадар рангдор (saturation), чӣ қадар равшан (lightness). Табдил додани коди HEX ба HSL зудтарин роҳ аст, то рангро тағйир диҳӣ — равшантар кунӣ, хомӯшаш кунӣ ё тамоми шкала созӣ.
Чӣ гуна табдили HEX ба HSL кор мекунад
- Коди HEX-ро ба RGB табдил деҳ ва ҳар каналро ба 255 тақсим кун, то ҳар се байни 0 ва 1 бошанд.
- Аз се арзиш калонтарин ва хурдтаринро ёбед. Миёнаи онҳо равшанӣ L аст.
- Тафовут байни онҳо сатурация S-ро муайян мекунад: онро барои рангҳои равшан бо (2 − max − min) ва барои торикҳо бо (max + min) тақсим кунед.
- Канали дорои арзиши макс қарор медиҳад, ки hue H кадом аст — сурх 0°, сабз 120°, кабуд 240° — ва ду канали дигар ҳузури тонро дар дохили он сегмент ҷойгир мекунанд.
Намунаи амалӣ
Ҳисобҳо дақиқ ҳастанд, вале одатан арзишҳои HSL ба дараҷаҳову фоизҳои тамоми гардида мешаванд. Табдили баргашт метавонад як ё ду қадами RGB-ро аз аслӣ дур кунад — амалӣ нонамоён аст, вале агар такрор- такрор гардиш кунӣ, арзидани донистанаш хуб аст.
HEX ва HSL шарҳ дода шудаанд
HEX чист?
Коди HEX рақами ҳексанумерии шашрақамест, ки канали сурх, сабз ва кабуди рангро паси аломати # нигоҳ медорад. Ҳар ҷуфт рақам як каналро аз 00 (ҳеҷ) то FF (пур) нишон медиҳад, ки ҳамон 16.7 миллион рангҳои RGB-ро дар шакли кӯтоҳтар медиҳад. HEX дар CSS, воситаҳои дизайни ва дастурҳои бренди стандартӣ мебошад.
- Синтаксис:
- #RRGGBB
- Диапазон:
- 00–FF барои ҳар канал
- Барои беҳтарин:
- CSS, супориши дизайн, дастурҳои бренд
HSL чист?
HSL рангро ба тон (0–360° дар чархи ранг), қаноатмандӣ (чӣ қадар рангафзун, 0–100%) ва равшанӣ (чӣ қадар равшан, 0–100%) ҷудо мекунад. Азбаски ҳар бахш мувофиқи тавсифи инсон аз ранг аст, HSL осонтарин формат барои сохтани тилтҳо, сояҳо ва палитраҳои устувор — дастонӣ ё дар код — мебошад.
- Синтаксис:
- hsl(H, S%, L%)
- Диапазон:
- 0–360°, 0–100%, 0–100%
- Барои беҳтарин:
- палитраҳо, тилтҳо ва сояҳо, мавзубандӣ
Ҷадвали муроҷиатии HEX ба HSL
Машҳуртарин рангҳои CSS, табдил ёфта аз HEX ба HSL.
| Ранг | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |