RGB экранга ничә яктырту чыгарырга икәнен сөйли; HSL исә төснең чын күренешен тасвирлый. Өч каналны тон, сатурация һәм яктыртуга әйләндерү төсне кул белән җиңел үзгәртергә мөмкин итә.
RGB дан HSL га конвертация ничек эшли
- R, G һәм Bны 255 кә бүл, шуңа һәр кыйммәт 0 белән 1 арасында була.
- Өчтән иң зур һәм иң кечкенәсен ал — аларның уртачасы яктырту L була.
- Әгәр иң зур белән иң кечкенәнең кыйммәте тигез булса, төс соры: тон һәм сатурация икесе дә 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%) |