HSL — гэта зручны спосаб выбару колеру, а RGB — тое, што насамрэч спажываюць маніторы, canvas API і код з выявамі. Гэты канвертар пераўтварае любыя адценне, насычанасць і светласць у дакладныя каналы 0–255.
Як працуе пераўтварэнне з HSL у RGB
- Пераўтвары S і L у дробавыя значэнні і вылічы хрому C = (1 − |2L − 1|) × S.
- Падзялі колер H на 60, каб знайсці сегмент на каляровым крузе, і вылічы прамежкавае X = C × (1 − |(H/60 mod 2) − 1|).
- Прысвой C, X і 0 у слоты R, G і B у адпаведнасці з вызначаным сегментам.
- Дадай зрух светласці L − C/2 да ўсіх трох каналаў і памнож на 255.
Прыклад
Вынік дакладны да апошняга акруглення да цэлых значэнняў каналаў. Простыя дробавыя значэнні адцення або насычанасці падтрымліваюцца і апынуцца на найбліжэйшай 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) |