ជ្រើសពណ៌ក្នុង HSL មើលមានផាសុកភាព ប៉ុន្តែ stylesheets, handoffs រចនា និងឯកសារម៉ាកនៅតែប្រើ HEX។ អ្នកបំលែងនេះបិទចន្លោះនោះ និងផ្តល់កូដ ៦ ខ្ទង់សម្រាប់កំម៉ូន Hue, saturation និង lightness ទាំងអស់។
របៀបធ្វើការរបស់ការបំលែងពី HSL ទៅ HEX
- ផ្លាស់ saturation និង lightness ទៅជាផ្នែកខ្នាត៖ 60% ក្លាយជា 0.6។
- គណនាចម្រូ Chroma C = (1 − |2L − 1|) × S — នេះបង្ហាញពីចម្ងាយពីពណ៌ទៅពីរ-gray។
- ប្រើ hue ដើម្បីដាក់ចម្រូនោះលើឆានែលក្រហម បៃតង និងខៀវ រួចផ្លាស់ទីទាំងបីដោយ L − C/2។
- គុណឆានែលនីមួយៗដោយ 255 កែសម្រាប់កង្វះ ហើយសរសេរជាអក្សរជាខ្ទង់ hexadecimal ពីរកន្លែង។
ឧទាហរណ៍ដែលបានដំណើរការ
ការកែសម្រួលត្រូវកើតឡើងម្តងក្នុងជំហានចុងក្រោយ នៅពេលដែលឆានែលនីមួយៗត្រូវបានបង្រួមទៅតម្លៃគត់ 0–255។ លទ្ធផលគឺជា HEX ដែលនៅជិតបំផុតនឹងបញ្ចូល HSL របស់អ្នក និងភាគច្រើនដូចគ្នានឹងអ្វីដែលឧបករណ៍រចនាបង្ហាញ។
HSL និង HEX ពន្យល់
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 ជាអ្វី?
កូដ HEX គឺជាលេខហិចសាឡើមែតិកមាន៦ខ្ទង់ដែលផ្ទុកប៉ាតេនដូចជា red, green និង blue ជាមួយសញ្ញា # នៅដើម។ គ្រាប់លេខនីមួយៗពីរគ្នាតំណាងឲ្យមួយប៉ាតេន ចាប់ពី 00 (គ្មាន) ដល់ FF (ពេញ) ដែលបង្កើតពណ៌ចំនួនដូចជា RGB (16.7 លាន) ក្នុងទ្រង់ទ្រាយកាត់សង្ខេប។ HEX ជាជម្រើសលំនាំមុនកាលនៅក្នុង CSS, កម្មវិធីរចនា និងមគ្គុទេសក៍ម៉ាក។
- វេយ្យាករណ៍:
- #RRGGBB
- ចន្លោះ:
- 00–FF per channel
- ល្អសម្រាប់:
- CSS, ផ្តល់ការងាររចនា, គោលការណ៍ម៉ាក
HSL to HEX reference table
ពណ៌ CSS ដែលប្រើជាទូទៅជាងគេ ដែលបានបំលែងពី HSL ទៅ HEX។
| ពណ៌ | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |