HSL төсне кеше сөйләгәнчә тасвирлый: кайсы тон, ни дәрәҗәдә төсле, ничә яктырту. HEX кодын HSLгә әйләндерү — төстән реаль үзгәрешләр ясар өчен (яктыртуны арттыру, төсне сүндерү, бер масштаб эшләү) иң тиз ысул.
HEX дан HSL га конвертация ничек эшли
- HEX кодын RGBга әйләндер һәм һәр каналны 255 кә бүл, шулай итеп барлык өч күрсәткеч 0 белән 1 арасында булачак.
- Өч кыйммәттән иң зур һәм иң кечкенәсен таб. Аларның уртачасы — яктырту L.
- Алар арасындагы аерма сатурация S ны билгели: якты төсләр өчен аны (2 − max − min) гә, кара төсләр өчен (max + min) гә бүл.
- Максимум тоткан канал тонны H белән билгели — кызыл 0°, яшел 120°, зәңгәр 240° — һәм калган ике канал тонны шул сектор эчендә урнаштыра.
Эшләгән үрнәк
Математика төгәл, ләкин HSL гадәттә градуслар һәм процентлар белән түгәрәкләнеп күрсәтелә. Шуңа кире әйләндергәндә бер-ике RGB адымына тайпылу булырга мөмкин — практикта күренми, әмма төсләрне еш кире әйләндерсәң истә тот.
HEX һәм HSL аңлатмасы
HEX нәрсә ул?
HEX коды — алда торган # символы белән бирелгән алты санлы hexadecimal сан, ул төснең кызыл, яшел һәм зәңгәр каналларын саклый. Һәр пар бит каналны белдерә, 00 (юк) дән FF (тулы) кадәр, бу RGB белән бер үк 16.7 миллион төсне кыскарак язылышта бирә. 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%) |