HSL айландыруу HEX

Кандай гана HSL түсүн болбосун HEX кылып айландыр — дароо жана акысыз

#3398DB

Кандай гана түс маанисин чапта — биз форматты сен үчүн аныктайбыз.

H
S
L
HEX натыйжасы

Бул түс бардык форматтарда

CMYK профили: Coated FOGRA39 (Европа үчүн Photoshop'тун демейки жөндөөсү)

HSLде түс тандоо ыңгайлуу, бирок стилдер, дизайн тапшырмалары жана бренд документтери дагы деле HEX менен иштейт. Бул конвертер ал аралыкты жапып, каалаган hue, saturation жана lightness айкалышына алты символдуу код берет.

HSL дан HEX га кантип айландыруу иштейт

  1. S жана L маанилерин бөлүктөргө айландыр: 60% → 0.6.
  2. Хрома C эсепте: C = (1 − |2L − 1|) × S. Бул түстүн боздон канчалык алыс экенин көрсөтөт.
  3. Hueн колдонуп хроманы кызыл, жашыл жана көк каналдарга жайгаштыр, андан кийин бардыгын L − C/2 менен жылдыр.
  4. Ар бир каналды 255ке көбөйт, тегерет, анан эки он алтылык цифра менен жазы.

Иштеген мисал

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

Тегеретүү акыркы кадамда, ар бир канал 0–255 бүтүнгө карай тартылганда болот. Натыйжа сенин HSL киришиңе эң жакын HEX коду болуп, адатта дизайн куралы көрсөтө турган менен бирдей болот.

HSL жана HEX түшүндүрмөсү

HSL деген эмне?

HSL түсүн үч бөлүккө ажыратат: өң (тон) — түстөр дискосунда 0–360°, каныктыруу (кандайча жөнөкөй же жаркыраган) 0–100% жана жарыктык (канчалык жарык) 0–100%. Ар бир бөлүк адамдар түстү сүрөттөгөндө колдонгон түшүнүктөргө туура келгендиктен, HSL тондорду, көлөкөлөрдү жана туруктуу палитраларды кол менен же коддо түзүү үчүн эң жеңил формат.

Синтаксиси:
hsl(H, S%, L%)
Аралыгы:
0–360°, 0–100%, 0–100%
Үчүн мыкты:
палитралар, тондор жана көлөкөлөр, темалаштыруу

HEX деген эмне?

HEX коду — алдыңкы # менен башталган кызыл, жашыл жана көк каналдарын сактаган алты орундуу он алтылык сан. Ар бир экилик цифра бир каналды билдирет, 00 (жоопкер эмес) ден FF (толук) чейин, бул RGB менен бирдей 16.7 миллион түстү кыскарган жазууда билдирет. 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

Көп берилүүчү суроолор

S жана L маанилерин бөлүктөргө айландыр: 60% → 0.6. Хрома C эсепте: C = (1 − |2L − 1|) × S. Бул түстүн боздон канчалык алыс экенин көрсөтөт. Hueн колдонуп хроманы кызыл, жашыл жана көк каналдарга жайгаштыр, андан кийин бардыгын L − C/2 менен жылдыр. Ар бир каналды 255ке көбөйт, тегерет, анан эки он алтылык цифра менен жазы.

Тегеретүү акыркы кадамда, ар бир канал 0–255 бүтүнгө карай тартылганда болот. Натыйжа сенин HSL киришиңе эң жакын HEX коду болуп, адатта дизайн куралы көрсөтө турган менен бирдей болот.

HEX коду — алдыңкы # менен башталган кызыл, жашыл жана көк каналдарын сактаган алты орундуу он алтылык сан. Ар бир экилик цифра бир каналды билдирет, 00 (жоопкер эмес) ден FF (толук) чейин, бул RGB менен бирдей 16.7 миллион түстү кыскарган жазууда билдирет. HEX CSS, дизайн куралдар жана бренд жетекчиликтери үчүн демейки формат.

Ооба. Киргизүүдөгү алмаштыруу баскычы сени HEXтан HSLга конвертерге алып барат, ал ошол эле принципте иштейт. Экөө тең бир эле формуланы колдонушат, болгону тескери багытта колдонулат.

Палитраны HSLде түз, анан экспортто HEXке. Палитра логикасын — бирдей hue, басылган жарыктык — сактайт, ал эми жүктөлгөн код программисттер күтчү форматта болот.