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