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 коды — алда торган # символы белән бирелгән алты санлы hexadecimal сан, ул төснең кызыл, яшел һәм зәңгәр каналларын саклый. Һәр пар бит каналны белдерә, 00 (юк) дән FF (тулы) кадәр, бу RGB белән бер үк 16.7 миллион төсне кыскарак язылышта бирә. HEX CSS, дизайн кораллары һәм бренд-гидада төп формат булып тора.

Синтаксис:
#RRGGBB
Диапазон:
Каналга 00–FF
Киңрәк кулланыш өчен:
CSS, дизайн тапшырмасы, бренд-һүҗәтләр

HSL нәрсә ул?

HSL төсне өч өлешкә бүлә: төс (0–360° төс тәгәрмәчендә), тәмамлык (насыщенность, 0–100%) һәм яктык (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 төсне өч өлешкә бүлә: төс (0–360° төс тәгәрмәчендә), тәмамлык (насыщенность, 0–100%) һәм яктык (0–100%). Һәр өлеш кеше төсне тасвирлаганча туры килә, шуңа HSL төсләрдән тоннар, күләгәләр һәм тотрыклы палитралар төзү өчен иң җайлы формат — кул белән дә, кодта да.

Әлбәттә. Керү янында торган алмаштыручылар төймәсе сине HSL → HEX конвертерына күчерә, ул тулысынча шул ук принцип буенча эшли. Ике юнәлеш тә шул ук формуланы куллана, тик кире якка мөрәҗәгать ителә.

Төснең вариантлары кирәк булса HSLгә күч. H һәм S ны тоташтырып, бары L ны үзгәртү белән син охшаш тинт һәм шәд шкаласын аласың — HEXта моны кул белән эшләү күпкә авыр.