HSLта төс сайлау уңай, ләкин стил битлекләре, дизайн тапшырмалары һәм бренд документлары һаман да HEXта эш итә. Бу конвертер теләсә кайсы тон, сатурация һәм яктырту комбинациясе өчен алты цифрлы код бирә.
HSL дан HEX га конвертация ничек эшли
- Сатурация һәм яктрутны өлешләргә әйләндер: 60% → 0.6.
- Хрома исәплә C = (1 − |2L − 1|) × S — бу төсенең сорыдан ничәгә ерак булуын күрсәтә.
- Хроманы кызыл, яшел һәм зәңгәр каналларга урнаштырыр өчен тонны куллан, аннары барлык өчне L − C/2 кадәр күчер.
- Һәр каналны 255кә тапкырла, түгәрәклә һәм ике HEX цифрасы итеп яз.
Эшләгән үрнәк
Түгәрәкләү соңгы адымда бер тапкыр була, һәр канал 0–255 бөтен санга сыгылдырылганда. Нәтиҗә синең HSL керүеңә мөмкин кадәр якын HEX коды була һәм гадәттә дизайн коралы күрсәткән белән бертигез.
HSL һәм HEX аңлатмасы
HSL нәрсә ул?
HSL төсне өч өлешкә бүлә: төс (0–360° төс тәгәрмәчендә), тәмамлык (насыщенность, 0–100%) һәм яктык (0–100%). Һәр өлеш кеше төсне тасвирлаганча туры килә, шуңа HSL төсләрдән тоннар, күләгәләр һәм тотрыклы палитралар төзү өчен иң җайлы формат — кул белән дә, кодта да.
- Синтаксис:
- hsl(H, S%, L%)
- Диапазон:
- 0–360°, 0–100%, 0–100%
- Киңрәк кулланыш өчен:
- палитралар, тоннар һәм күләгәләр, тема ясау
HEX нәрсә ул?
HEX коды — алда торган # символы белән бирелгән алты санлы hexadecimal сан, ул төснең кызыл, яшел һәм зәңгәр каналларын саклый. Һәр пар бит каналны белдерә, 00 (юк) дән FF (тулы) кадәр, бу RGB белән бер үк 16.7 миллион төсне кыскарак язылышта бирә. 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 |