ImageColorPicker.com

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

Конвертирај која било HEX боја во HSL — веднаш и бесплатно

#2ECC71

Залепи било која боја — форматот го детектираме за тебе.

HSL резултат
Нијанса
145°
Заситеност
63%
Светлина
49%

Оваа боја во сите формати

CMYK профил: Coated FOGRA39 (стандардната поставка на Photoshop за Европа)

HSL го опишува боиот на начин на кој луѓето зборуваат: која нијанса, колку е интензивна, колку е светла. Конвертирањето на HEX код во HSL е најбрзиот начин да добиеш боја во форма што можеш навистина да ја прилагодуваш — осветли, затемни или создадете цела скала од неа.

Како работи претворањето од HEX во HSL

  1. Конвертирај го HEX кодот во RGB и подели секој канал со 255, така што сите три ќе бидат меѓу 0 и 1.
  2. Најди го најголемиот и најмалиот од трите вредности. Нивната средина е светлината L.
  3. Опсегот помеѓу нив ја одредува заситеноста S: подели го со (2 − max − min) за светли бои, или со (max + min) за темни.
  4. Каналот кој го држи максимумот ја одредува нијансата H — црвена на 0°, зелена на 120°, сина на 240° — а другите два канали ја позиционираат нијансата во тој сегмент.

Пример

HEX #2ECC71=HSL hsl(145, 63%, 49%)

Математиката е прецизна, но HSL вредностите обично се заокружуваат на цели степени и проценти. Конвертирањето назад може затоа да се разликува за една или две RGB вредности од оригиналот — невидливо во практика, но важно ако боите ги префрлуваш напред-назад често.

HEX и HSL објаснети

Што е HEX?

HEX код е шест-цифрен хексадецимален број што ги чува црвената, зелената и сината компонента на бојата зад водечкиот #. Секој пар цифри покрива една компонента, од 00 (нема) до FF (целосно), и дава истите 16,7 милиони бои како RGB, но во пократка нотација. HEX е стандардниот формат во CSS, алатките за дизајн и брендовските упатства.

Синтакса:
#RRGGBB
Опсег:
00–FF по канал
Најдобро за:
CSS, предавање дизајн, водичи за бренд

Што е HSL?

HSL ја дели бојата на hue (0–360° на колорот), saturation (колку е наситена, 0–100%) и lightness (колку е светла, 0–100%). Бидејќи секој дел одговара на начинот на кој луѓето ја опишуваат бојата, HSL е најлесниот формат за градење нијанси, затемнувања и консистентни палети — рачно или во код.

Синтакса:
hsl(H, S%, L%)
Опсег:
0–360°, 0–100%, 0–100%
Најдобро за:
палети, нијанси и затемнувања, теми

HEX во HSL табела за референца

Најчестите CSS бои, конвертирани од HEX во HSL.

БоиHEXHSL
black#000000hsl(0, 0%, 0%)
white#FFFFFFhsl(0, 0%, 100%)
red#FF0000hsl(0, 100%, 50%)
lime#00FF00hsl(120, 100%, 50%)
blue#0000FFhsl(240, 100%, 50%)
yellow#FFFF00hsl(60, 100%, 50%)
orange#FFA500hsl(39, 100%, 50%)
teal#008080hsl(180, 100%, 25%)
purple#800080hsl(300, 100%, 25%)
gray#808080hsl(0, 0%, 50%)

Повеќе конвертори на бои

Најчесто поставувани прашања

Конвертирај го HEX кодот во RGB и подели секој канал со 255, така што сите три ќе бидат меѓу 0 и 1. Најди го најголемиот и најмалиот од трите вредности. Нивната средина е светлината L. Опсегот помеѓу нив ја одредува заситеноста S: подели го со (2 − max − min) за светли бои, или со (max + min) за темни. Каналот кој го држи максимумот ја одредува нијансата H — црвена на 0°, зелена на 120°, сина на 240° — а другите два канали ја позиционираат нијансата во тој сегмент.

Математиката е прецизна, но HSL вредностите обично се заокружуваат на цели степени и проценти. Конвертирањето назад може затоа да се разликува за една или две RGB вредности од оригиналот — невидливо во практика, но важно ако боите ги префрлуваш напред-назад често.

HSL ја дели бојата на hue (0–360° на колорот), saturation (колку е наситена, 0–100%) и lightness (колку е светла, 0–100%). Бидејќи секој дел одговара на начинот на кој луѓето ја опишуваат бојата, HSL е најлесниот формат за градење нијанси, затемнувања и консистентни палети — рачно или во код.

Да. Копчето за замена до полето за внес те носи до конверторот од HSL во HEX, кој работи на ист начин. Двете насоки користат иста формула, само применета обратено.

Префрли се на HSL веднаш штом ќе ти требаат варијации на бојата. Задржувајќи H и S фиксни и менувајќи само L добиваш доследна скала на тонови и сенки, што е многу потешко да се постигне рачно во HEX.