HEX-ийг HSL руу хөрвүүлэгч

HEX өнгөний кодоос HSL өнгөний загвар руу хөрвүүлэх чөлөөт онлайн хэрэгсэл

Та зургаан оронтой HEX кодыг (жишээ нь #1E90FF) эсвэл гурван оронтой товчилсон хувилбарыг (#abc) оруулахад, энэ хуудас тэр даруй HSL-ийн утгыг буцаан өгнө. HSL нь хүний ойлголтод зориулагдсан өнгөний загвар бөгөөд өнгийг градусаар (hue), ханалт болон гэрэлтлийг хувиар харуулдаг. Үүнтэй зэрэгцэн тухайн өнгөний HEX, RGB, HSV, CMYK болон LAB дүрслэлүүдийг харуулж, танд хэрэгтэй форматыг хуулах боломж олгоно.

HEX болон HSL-ийн үндсэн ялгаа

HEX код нь RGB өнгөний системийн шууд дүрслэл юм. Зургаан арвантын орон (0-9, A-F) нь улаан, ногоон, цэнхэр гэсэн гурван бүрэлдэхүүн хэсгийг кодолдог. Жишээлбэл, #4f46e5 кодонд 4f нь улаан (79/255), 46 нь ногоон (70/255), e5 нь цэнхэр (229/255) гэсэн утгыг илэрхийлнэ. Гурван оронтой товчилсон хувилбар #abc нь #aabbcc-тэй тэнцүү бөгөөд орон бүрийг давхар бичнэ.

HEX код нь маш авсаархан бөгөөд CSS болон дизайны хэрэгслүүдэд өргөн хэрэглэгддэг. Гэхдээ хүний хувьд тохируулга хийхэд тохиромжгүй. Өнгөний тод байдлыг багасгахын тулд HEX кодонд ямар нэгэн хэв маягийг ажиглах боломжгүй.

HSL нь хүний ойлголтод зориулсан өнгөний загвар юм. Hue (өнгө) нь 0-360 градусын өнгийн хүрд дээр хэмжигддэг: 0° нь улаан, 120° нь ногоон, 240° нь цэнхэр. Saturation (ханалт) нь 0-100% хооронд хэлбэлздэг бөгөөд 0% нь саарал, 100% нь цэвэр өнгө. Lightness (гэрэлтэл) нь 0-100% хооронд хэлбэлздэг бөгөөд 0% нь хар, 100% нь цагаан өнгө.

Энэ хэрэгсэл яг юу хийдэг вэ?

Та зурагт үзүүлсэн шиг зургаан оронтой HEX кодыг (#4f46e5) эсвэл гурван оронтой товчилсон хувилбарыг (#abc) оруулна. Эхний # тэмдэгтийг заавал оруулах шаардлагагүй. Хэрэгсэл таны оруулсан HEX кодыг дараах алхамаар HSL руу хөрвүүлдэг:

1. HEX кодыг RGB утга болгон задална.
2. RGB утгыг HSL загвар руу математик томъёогоор хөрвүүлнэ.
3. Үр дүнг градус болон хувиар харуулна.

Жишээлбэл, #1E90FF (Dodger Blue) гэсэн HEX кодыг оруулахад, хэрэгсэл дараах үр дүнг харуулна:

• HSL: hue = 210°, saturation = 100%, lightness = 75%
• HEX: #1E90FF
• RGB: rgb(30, 144, 255)
• HSV: hsv(210°, 88%, 100%)
• CMYK: cmyk(88%, 44%, 0%, 0%)
• LAB: lab(0.55, -0.08, -0.24)

Бүх талбарууд нэгэн зэрэг шинэчлэгддэг тул та ямар ч форматыг шууд хуулж авах боломжтой.

Хэрэглэгчид яагаад HSL-ийг илүүд үздэг вэ?

HSL нь хүний ойлголтод тохирсон өнгөний загвар учраас дараах давуу талуудтай:

• Өнгөний хүрд: Hue нь 0-360 градусын хүрд дээр байрладаг тул complementary (нэмэлт) өнгө (180° ялгаатай), analogous (зэргэлдээ) өнгө (30-60° ялгаатай) болон monochromatic (нэг өнгийн өөр гэрэлтэй) схемийг хялбархан үүсгэж болно.
• Гэрэлтэл ба ханалтыг тус тусад нь тохируулах: Гэрэлтлийг өөрчилөхөд өнгө өөрчлөгддөггүй. Энэ нь hover төлөв, dark/light theme, болон contrast ratio тохируулгад маш тохиромжтой.
• WCAG нийцтэй байдал: Хандалтын чанарын шалгалтын үед HSL нь өнгөний тодосголтыг хянах, өнгөний харалган байдлыг шалгахад илүү хялбар байдаг.

Жишээлбэл, та #4f46e5 гэсэн өнгийг HSL руу хөрвүүлбэл (240°, 75%, 55%) гэсэн утга гарна. Дараа нь гэрэлтлийг 45% болгож бууруулбал (240°, 75%, 45%) гэсэн илүү бараан өнгө гарна. Энэ нь HEX код ашиглан ижил зүйлийг хийхээс хамаагүй хялбар юм.

Хөрвүүлэлтийн математик үндэс

RGB-аас HSL руу хөрвүүлэлт нь дараах алхамаар явагддаг:

1. RGB утгуудыг 0-1 хүртэлх хувь хэлбэрт шилжүүлнэ (жишээ нь 255-ыг 1 гэж тооцно).
2. Хамгийн их ба хамгийн бага утгыг олно: max = max(R, G, B), min = min(R, G, B).
3. Гэрэлтэл (Lightness): L = (max + min) / 2
4. Хэрэв max = min бол (саарал өнгө), ханалт 0% байна.
5. Ханалт (Saturation):
   • Хэрэв L ≤ 0.5 бол S = (max - min) / (max + min)
   • Хэрэв L > 0.5 бол S = (max - min) / (2 - max - min)
6. Өнгө (Hue):
   • Хэрэв max = R бол H = (G - B) / (max - min)
   • Хэрэв max = G бол H = 2 + (B - R) / (max - min)
   • Хэрэв max = B бол H = 4 + (R - G) / (max - min)
   • Дараа нь 60-аар үржүүлж, шаардлагатай бол 360 нэмнэ.

Энэхүү хөрвүүлэлтийн томъёо нь бүх орчин үеийн хөтөчүүдэд ижил бөгөөд CSS3 стандартад тодорхойлогдсон.

Ашиглах үеийн чухал анхааруулга

Хүчинтэй HEX код: Хэрэгсэл нь зөвхөн зургаан оронтой эсвэл гурван оронтой хүчинтэй HEX кодыг хүлээн авна. Алдаатай код оруулбал "Enter a hex color like #4f46e5 or #abc" гэсэн мессеж гарч ирнэ.

Альфа суваг байхгүй: Стандарт HEX (зургаан оронтой эсвэл гурван оронтой) нь тунгалаг бус өнгийг илэрхийлдэг. HSL нь альфа сувгийг агуулдаггүй. Тиймээс хөрвүүлэлт нь зөвхөн бүрэн тунгалаг өнгийг хамарна.

Бодит бус өнгөний тохируулга: Хэрэв та LAB эсвэл CMYK руу шилжиж, харагдах RGB өнгөний гамаас гадуур утга оруулбал, өнгө нь хамгийн ойр харагдах өнгө болгон тохируулагдана. Энэ тохиолдолд буцаж HEX руу хөрвүүлэхэд бага зэрэг өөрчлөлт гарч болзошгүй.

CMYK тоонууд зөвхөн дэлгэцэн дээр харагдах тооцоо: CMYK утгууд нь зөвхөн дэлгэцэн дээр харагдах тооцоо юм. Мэргэжлийн хэвлэлд ашиглахад тохиромжгүй. Жинхэнэ CMYK утгыг мэргэжлийн хэвлэлийн төхөөрөмжөөр шалгах шаардлагатай.

Бүрэн нууцлал: Бүх хөрвүүлэлт нь таны хөтөч дотор хийгддэг. Таны оруулсан мэдээлэл интернетэд дамжихгүй, хадгалагдахгүй.

Түгээмэл асуултууд (FAQ)

Асуулт 1: Хэрэв би #xyz гэх мэт хүчинтэй бус HEX код оруулбал яах вэ? Хариулт: Хэрэгсэл нь зөвхөн хүчинтэй зургаан оронтой эсвэл гурван оронтой HEX кодыг хүлээн авна. Алдаатай код оруулбал "Enter a hex color like #4f46e5 or #abc" гэсэн мессеж гарч ирнэ. Зургаан арвантын орон (0-9, A-F) ашиглах шаардлагатай.

Асуулт 2: Гурван оронтой HEX код (#abc) ба зургаан оронтой код (#aabbcc) хооронд ялгаа бий юу? Хариулт: Ялгаа байхгүй. Гурван оронтой товчилсон хувилбар нь зургаан оронтой кодын товчилсон хэлбэр юм. #abc нь #aabbcc-тай яг ижил утгатай. Хэрэгсэл аль ч хэлбэрийг хүлээн авна.

Асуулт 3: HSL ба HSV хооронд ялгаа бий юу? Хариулт: Тийм, ялгаа байна. HSL нь Lightness (гэрэлтэл) ашигладаг бол HSV нь Value (утга) ашигладаг. HSL-д гэрэлтэл нь 0% (хар) - 100% (цагаан) хооронд хэлбэлздэг. HSV-д утга нь 0% (хар) - 100% (цэвэр өнгө) хооронд хэлбэлздэг. HSL нь хүний ойлголтод илүү тохиромжтой гэж үздэг.

Асуулт 4: Хэрэв би HSL утгыг CSS-д шууд ашиглаж болох уу? Хариулт: Тийм, та hsl(210, 100%, 75%) гэх мэт синтаксийг CSS-д шууд ашиглаж болно. Энэ нь HEX кодоос илүү уян хатан бөгөөд дизайны тохируулгад тохиромжтой.

Асуулт 5: CMYK утгууд яагаад бодит хэвлэлд тохиромжгүй вэ? Хариулт: Дэлгэц болон хэвлэлийн төхөөрөмжүүдийн өнгөний гама нь ялгаатай. Мөн хэвлэлийн бэх, цаасны чанар зэрэг олон хүчин зүйл нөлөөлдөг. Тиймээс эдгээр утгуудыг зөвхөн ойролцоо тооцоо гэж үзэх хэрэгтэй.

Асуулт 6: Хэрэв би HSL-ээс HEX руу буцаан хөрвүүлбэл яг адилхан утга гарах уу? Хариулт: Хэрэв HSL утга нь RGB гамаас гадуур байхгүй бол тийм. Гэхдээ хэрэв та LAB эсвэл CMYK руу шилжиж, буцаж ирвэл, тохируулгын улмаас бага зэрэг ялгаа гарч болно.