HSL ពណ៌ណែនាំពណ៌ដោយរបៀបដែលមនុស្សពិភាក្សា៖ ថាតើ hue ណា, ត្រូវធ្លាប់ប៉ុន្មាន, និងមានភ្លឺប៉ុនណា។ ការបំលែងកូដ HEX ទៅ HSL ជាផ្លូវដ៏លឿនដើម្បីទទួលបានពណ៌ក្នុងទ្រង់ទ្រាយដែលអ្នកអាចកែប្រែបាន — បម្រៃ, ធ្វើឲ្យស្តើង, ឬបង្កើតស្ពែកពណ៌មួយទាំងមូលពីវា។
របៀបធ្វើការរបស់ការបំលែងពី HEX ទៅ HSL
- បំលែងកូដ HEX ទៅ RGB ហើយចែកឆានែលនីមួយៗដោយ 255 ដើម្បីឲ្យទាំងបីមានតម្លៃចន្លោះ 0 និង 1។
- ស្វែងរកតម្លៃធំបំផុត និងតូចបំផុតពីទាំងបី។ មធ្យមភាគរបស់ពួកវាគឺជា lightness L។
- ការបេីកចំហររវាងពួកវាជាដើមដើម្បីកំណត់ saturation S៖ ចែកវាដោយ (2 − max − min) សម្រាប់ពណ៌ភ្លឺ ឬដោយ (max + min) សម្រាប់ពណ៌ងងឹត។
- ឆានែលដែលមានតម្លៃធំបំផុតកំណត់ hue H — ក្រហមនៅ 0°, បៃតងនៅ 120°, ខៀវនៅ 240° — ហើយឆានែលពីរនៅសល់កំណត់ទីតាំង hue រួចនៅក្នុងផ្នែកនោះ។
ឧទាហរណ៍ដែលបានដំណើរការ
គណិតវិទ្យាត្រឹមត្រូវ ប៉ុន្តែតម្លៃ HSL ធម្មតាត្រូវបានកែងជាថ្នាក់ដឺក្រេ និងភាគរយ។ ការបំលែងវិលត្រឡប់អាចធ្វើឲ្យខ្សែ RGB ផ្លាស់ជាមួយចំហៀងមួយ ឬពីរពិន្ទុពីដើម — មិនអាចមើលឃើញជាក់សោះ ប៉ុន្តេចាំបាច់ដឹងប្រសិនបើអ្នកធ្វើ round-trip ពណ៌ច្រើនរៀងរាល់។
HEX និង HSL ពន្យល់
HEX ជាអ្វី?
កូដ HEX គឺជាលេខហិចសាឡើមែតិកមាន៦ខ្ទង់ដែលផ្ទុកប៉ាតេនដូចជា red, green និង blue ជាមួយសញ្ញា # នៅដើម។ គ្រាប់លេខនីមួយៗពីរគ្នាតំណាងឲ្យមួយប៉ាតេន ចាប់ពី 00 (គ្មាន) ដល់ FF (ពេញ) ដែលបង្កើតពណ៌ចំនួនដូចជា RGB (16.7 លាន) ក្នុងទ្រង់ទ្រាយកាត់សង្ខេប។ HEX ជាជម្រើសលំនាំមុនកាលនៅក្នុង CSS, កម្មវិធីរចនា និងមគ្គុទេសក៍ម៉ាក។
- វេយ្យាករណ៍:
- #RRGGBB
- ចន្លោះ:
- 00–FF per channel
- ល្អសម្រាប់:
- CSS, ផ្តល់ការងាររចនា, គោលការណ៍ម៉ាក
HSL ជាអ្វី?
HSL បំបែកពណ៌ជា hue (0–360° លើវិចល័หลักពណ៌), saturation (ថ្ងៃណាស់—0–100%) និង lightness (ភ្លឺ—0–100%)។ ពីព្រោះផ្នែកនីមួយៗផ្គូផ្គងនឹងវិធីដែលមនុស្សពិពណ៌នាពណ៌ HSL គឺទ្រង់ទ្រាយងាយសម្រាប់សង់ tint, shade និង palette ដែលមានសែតធី — ដោយដៃឬក្នុងកូដ។
- វេយ្យាករណ៍:
- hsl(H, S%, L%)
- ចន្លោះ:
- 0–360°, 0–100%, 0–100%
- ល្អសម្រាប់:
- palette, tint និង shade, theming
HEX to HSL reference table
ពណ៌ CSS ដែលប្រើជាទូទៅជាងគេ ដែលបានបំលែងពី HEX ទៅ HSL។
| ពណ៌ | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |