Безкоштовний конвертер

HSL до HEX конвертер

Миттєво перетворюйте значення кольорів HSL на коди кольорів HEX — безкоштовний конвертер кольорів у реальному часі.

Відтінок
насиченість (%)
Легкість (%)

HEX вихід

#368CE2
R:54
G:140
B:226

Копіювати формат

Формат #HEX#368CE2
формат hsl().hsl(210°, 75%, 55%)
формат rgb().rgb(54, 140, 226)

Про цей інструмент

Перетворюйте значення кольорів HSL (відтінок, насиченість, освітленість) у шістнадцяткові коди. HSL — це інтуїтивно зрозуміла колірна модель, де відтінок — кут кольору (0-360°), насиченість — інтенсивність кольору (0-100%), а освітленість визначає, наскільки світлим або темним є колір (0-100%). Корисно для дизайнерів, які працюють у HSL і потребують шістнадцяткових кодів для CSS.

Як використовувати

  1. Введіть значення відтінку (0-360 градусів на колірному колі).
  2. Встановіть насиченість (0-100%) і освітленість (0-100%).
  3. Шістнадцятковий код обчислюється та відображається в реальному часі.
  4. Скопіюйте шістнадцятковий код для використання у вашому CSS або інструменті дизайну.

Поширені запитання

Навіщо використовувати HSL замість hex або RGB?
HSL більш інтуїтивно зрозумілий для людини. Хочете більш темний відтінок? Зменшити легкість. Хочете версію з приглушеним звуком? Зменшити насиченість. Ці зв’язки неочевидні в шістнадцятковому чи RGB, де вам потрібно налаштувати всі три канали.
Що означає відтінок 0 проти 360?
І 0°, і 360° червоні — колесо відтінків обертається навколо. Основні відтінки: 0° = червоний, 60° = жовтий, 120° = зелений, 180° = блакитний, 240° = синій, 300° = пурпурний.
Що відбувається при 0% і 100% насичення?
При 0% насиченості будь-який відтінок стає відтінком сірого (визначається лише світлотою). При 100% насиченості ви отримуєте найчистіший, найяскравіший варіант цього відтінку.
Як працює легкість?
Світлота 0 % — це завжди чорний, незалежно від відтінку/насиченості. 100% завжди білий. 50% дає чистий, найбільш яскравий варіант кольору. Значення від 0 до 50% — це темніші відтінки, 50-100% — світлі відтінки.