HSL គឺជារបៀបងាយស្រួលក្នុងការជ្រើសពណ៌, ខណៈដែល RGB គឺជាអ្វីដែលអេក្រង់, canvas API និងកូដរូបភាពប្រើប្រាស់ពិតប្រាកដ។ ឧបករណ៍បម្លែងនេះបំលែង hue, saturation និង lightness ទៅជាច្រក 0–255 ដូចដើម។
របៀបធ្វើការរបស់ការបំលែងពី HSL ទៅ RGB
- បម្លែង S និង L ទៅជាផ្នែកភាគ ហើយគណនា chroma C = (1 − |2L − 1|) × S។
- ចែក hue ដោយ 60 ដើម្បីរកផ្នែកវាផ្សំពណ៌លើកង់ពណ៌ ហើយគណនាតម្លៃចន្លោះ X = C × (1 − |(H/60 mod 2) − 1|)。
- ផ្តល់ C, X និង 0 ទៅក្នុងស្លុត R, G និង B យោងតាមផ្នែកនោះ។
- បន្ថែមអត្រា lightness L − C/2 ទៅទាំងបី channel ហើយគុណដោយ 255។
ឧទាហរណ៍ដែលបានដំណើរការ
លទ្ធផលជាសត្យាដល់ការងារបញ្ចប់នៃការបង្គត់ទៅជាចំនួនពេញនៅក្នុងច្រក។ តម្លៃ hue ឬ saturation ជាផ្នែកភាគគឺគាំទ្រ និងទទួលបាន RGB triple ដែលនៅជិតបំផុត។
HSL និង RGB ពន្យល់
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
RGB ជាអ្វី?
RGB ពិពណ៌នាពណ៌ជាប៉ាតេនភ្លើងបី — ស្រមោលក្រហម, បៃតង និងខៀវ — រាល់យ៉ាងចាប់ពី 0 ទៅ 255។ វាស្រដៀងនឹងរបៀបដែលអេក្រង់ធ្វើការ: ទាំងបីនៅ 255 ផ្តល់ស, ទាំងបីនៅ 0 ផ្តល់អំបូរ។ RGB គឺជាជម្រើសត្រូវពេលដែលអ្នកត្រូវគណនាជាមួយពណ៌ ហើយ rgba() បន្ថែមភាពថ្លាថ្លា។
- វេយ្យាករណ៍:
- rgb(R, G, B)
- ចន្លោះ:
- 0–255 per channel
- ល្អសម្រាប់:
- កូដ, canvas, ភាពថ្លាថ្លាជាមួយ rgba()
HSL to RGB reference table
ពណ៌ CSS ដែលប្រើជាទូទៅជាងគេ ដែលបានបំលែងពី HSL ទៅ RGB។
| ពណ៌ | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |