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