HSL роҳи дӯстона барои интихоби ранг аст, RGB бошад ҳамон чизест, ки экранҳо, API-ҳои canvas ва кодҳои тасвир воқеан истеъмол мекунанд. Ин конвертер ҳар як тройкаи тон, сатурасия ва равшаниро ба каналҳои дақиқ 0–255 табдил медиҳад.
Чӣ гуна табдили HSL ба RGB кор мекунад
- S ва L-ро ба фраксияҳо табдил деҳ ва хромаро ҳисоб кун C = (1 − |2L − 1|) × S.
- Тонро ба 60 тақсим кун то сегменти он дар чархи рангро ёбӣ ва арзиши миëнаро ҳисоб кун X = C × (1 − |(H/60 mod 2) − 1|).
- Бар асоси он сегмент C, X ва 0-ро ба ҷойҳои R, G ва B таъин кун.
- Ба ҳар се канал офсети равшанӣ L − C/2-ро илова кун ва дар 255 зарб зан.
Намунаи амалӣ
Натиҷа то ҷамъбасти ниҳоӣ ба ададҳои тақчилшуда дақиқ аст. Қиматҳои фраксиялии тон ё сатурасия пуштибонӣ мешаванд ва ба RGB-тройкаи наздиктар меафтанд.
HSL ва RGB шарҳ дода шудаанд
HSL чист?
HSL рангро ба тон (0–360° дар чархи ранг), қаноатмандӣ (чӣ қадар рангафзун, 0–100%) ва равшанӣ (чӣ қадар равшан, 0–100%) ҷудо мекунад. Азбаски ҳар бахш мувофиқи тавсифи инсон аз ранг аст, HSL осонтарин формат барои сохтани тилтҳо, сояҳо ва палитраҳои устувор — дастонӣ ё дар код — мебошад.
- Синтаксис:
- hsl(H, S%, L%)
- Диапазон:
- 0–360°, 0–100%, 0–100%
- Барои беҳтарин:
- палитраҳо, тилтҳо ва сояҳо, мавзубандӣ
RGB чист?
RGB як рангро ҳамчун се канали нур — сурх, сабз ва кабуд — ҳар кадоме аз 0 то 255 тасвир мекунад. Он чӣ гуна экранахо воқеан кор мекунандро такрор мекунад: ҳама се канал 255 шуда сафед мешавад, ҳама 0 шуда сиёҳ мешавад. Ҳангоми ниёз ба ҳисобҳо бо ранг (масалан анимация) RGB интихоби дуруст аст, ва rgba() шаффофиятро илова мекунад.
- Синтаксис:
- rgb(R, G, B)
- Диапазон:
- 0–255 барои ҳар канал
- Барои беҳтарин:
- код, canvas, шаффофият бо rgba()
Ҷадвали муроҷиатии HSL ба RGB
Машҳуртарин рангҳои CSS, табдил ёфта аз HSL ба RGB.
| Ранг | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |