HSL төс сайлау өчен җайлырак — ә экраннар, canvas API‑лар һәм рәсем кодлары чынлап та RGB кабул итә. Бу конвертер теләсә кайсы hue, saturation һәм lightness триосын төгәл 0–255 каналларга әйләндерә.
HSL дан RGB га конвертация ничек эшли
- S һәм L‑ны өлешләргә әйләндер һәм хрома C = (1 − |2L − 1|) × S ны исәплә.
- Нугык түгәрәге сегментын табу өчен hue‑ны 60‑ка бүл һәм арадаш X = C × (1 − |(H/60 mod 2) − 1|) кыйммәтен исәплә.
- Шул сегментка карап R, G һәм B урыннарына C, X һәм 0‑ны билгелә.
- Барлык өч каналга lightness офсеты L − C/2‑ны өстә һәм 255‑кә тапкырла.
Эшләгән үрнәк
Нәтиҗә ахырдагы бөтен каналларга түгәрәкләүгә кадәр төгәл. Кисәкле hue яки saturation кыйммәтләре булса да, алар якынрак 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) |