ImageColorPicker.com

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

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

#3398DB

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

H
S
L
HEX резултат

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

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

Избирањето боја во HSL е удобно, но CSS датотеките, предавањата за дизајн и брендовските документи сѐ уште користат HEX. Овој конвертер ја затвора таа празнина и ти дава шест-цифрен код за секоја комбинација на нијанса, заситеност и светлина.

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

  1. Претвори ја заситеноста и светлината во фракции: 60% станува 0.6.
  2. Пресметај го хромата C = (1 − |2L − 1|) × S — тоа ја покажува растојанието на бојата од сивата.
  3. Користи ја нијансата за да ја поставиш хромата на црвениот, зелениот и синиот канал, потоа помести ги сите три за L − C/2.
  4. Помножи секој канал со 255, заокружи го и запиши го како две хексадецимални цифри.

Пример

HSL hsl(204, 70%, 53%)=HEX #3398DB

Заокружувањето се случува еднаш, во последниот чекор, кога секој канал се заковува на цела вредност 0–255. Резултатот е најблискиот HEX код на твојот HSL влез и обично е идентичен со тоа што го прикажува алатката за дизајн.

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

Што е HSL?

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

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

Што е HEX?

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

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

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

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

БоиHSLHEX
blackhsl(0, 0%, 0%)#000000
whitehsl(0, 0%, 100%)#FFFFFF
redhsl(0, 100%, 50%)#FF0000
limehsl(120, 100%, 50%)#00FF00
bluehsl(240, 100%, 50%)#0000FF
yellowhsl(60, 100%, 50%)#FFFF00
orangehsl(39, 100%, 50%)#FFA600
tealhsl(180, 100%, 25%)#007F80
purplehsl(300, 100%, 25%)#80007F
grayhsl(0, 0%, 50%)#808080

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

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

Претвори ја заситеноста и светлината во фракции: 60% станува 0.6. Пресметај го хромата C = (1 − |2L − 1|) × S — тоа ја покажува растојанието на бојата од сивата. Користи ја нијансата за да ја поставиш хромата на црвениот, зелениот и синиот канал, потоа помести ги сите три за L − C/2. Помножи секој канал со 255, заокружи го и запиши го како две хексадецимални цифри.

Заокружувањето се случува еднаш, во последниот чекор, кога секој канал се заковува на цела вредност 0–255. Резултатот е најблискиот HEX код на твојот HSL влез и обично е идентичен со тоа што го прикажува алатката за дизајн.

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

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

Изгради палета во HSL, па потоа извези како HEX. Палетата ги задржува правилата — иста нијанса, чекорувана светлина — додека испорачаниот код е во формат што девелоперите го очекуваат.