វាយ ឬបិទភ្ជាប់កូដពណ៌ក្នុងទម្រង់ទូទៅណាមួយ — #1e90ff, rgb(30, 144, 255), hsl(210, 100%, 56%), HSV ឬ CMYK — ឬជ្រើសរើសពណ៌ដោយប្រើ color picker ហើយគ្រប់ទម្រង់ផ្សេងទៀតនឹងធ្វើបច្ចុប្បន្នភាពភ្លាមៗ។ តម្លៃនីមួយៗមានប៊ូតុងចម្លងផ្ទាល់ខ្លួន និងត្រូវបានសរសេរជា CSS រួចរាល់សម្រាប់យកទៅប្រើប្រាស់។
កម្មវិធីបម្លែងនេះក៏គណនាសមាមាត្រកម្រិតពណ៌ WCAG ធៀបនឹងអត្ថបទពណ៌ស និងខ្មៅ ជាមួយផ្លាកសញ្ញាជាប់ ឬធ្លាក់ AA និង AAA ផងដែរ ដូច្នេះអ្នកអាចដឹងភ្លាមៗថាពណ៌ប៊ូតុង ឬផ្ទៃខាងក្រោយងាយស្រួលមើលដែរឬទេ។ ជួរ tints និង shades ជួយអ្នកបង្កើត hover states និងក្ដារពណ៌ពីពណ៌គោលតែមួយ។
របៀបប្រើឧបករណ៍ ឧបករណ៍បម្លែងពណ៌
- បញ្ចូលកូដពណ៌ក្នុងប្រអប់អត្ថបទ ឬចុចលើ color picker ដើម្បីជ្រើសរើសពណ៌។
- មើលតម្លៃ HEX, RGB, HSL, HSV និង CMYK ក្នុងតារាង។
- ចុច Copy នៅជិតទម្រង់ដែលអ្នកត្រូវការ។
- ពិនិត្យសមាមាត្រកម្រិតពណ៌ និងផ្លាកសញ្ញា ដើម្បីជ្រើសរើសអត្ថបទពណ៌ស ឬខ្មៅ។
- ចុចលើ tint ឬ shade ណាមួយ ដើម្បីកំណត់វាជាពណ៌គោលថ្មី។
ហេតុអ្វីប្រើ ឧបករណ៍បម្លែងពណ៌ របស់ ToolOrca
- HEX, RGB, RGBA, HSL, HSV និង CMYK
- គាំទ្រ HEX ខ្លី និង HEX 8 ខ្ទង់ដែលមាន alpha
- ការពិនិត្យ contrast កម្រិត WCAG AA និង AAA
- ជួរ tints និង shades
- Native color picker
- ការមើលផ្ទាល់ជាមួយអត្ថបទពណ៌ស និងខ្មៅ
តើខ្ញុំគួរប្រើទម្រង់ពណ៌មួយណា?
HEX និង RGB បង្ហាញពីទិន្នន័យដូចគ្នា — បរិមាណពណ៌ក្រហម បៃតង និងខៀវ ចាប់ពី 0 ដល់ 255 — ហើយត្រូវបានប្រើច្រើនបំផុតក្នុង CSS និងឧបករណ៍ឌីហ្សាញ។ HSL (hue, saturation, lightness) ងាយស្រួលកែសម្រួលដោយដៃជាង៖ រក្សា hue ដដែល ហើយប្តូរ lightness ដើម្បីទទួលបានកម្រិតភ្លឺ ឬងងឹត។ ចំណែក HSV/HSB គឺជាទម្រង់ដែល color picker ភាគច្រើនក្នុង Photoshop និង Figma ប្រើប្រាស់។
CMYK (cyan, magenta, yellow, black) ត្រូវបានប្រើសម្រាប់ការបោះពុម្ព។ តម្លៃនៅទីនេះជាការបម្លែងតាមរូបមន្តគណិតវិទ្យាសាមញ្ញ។ រោងពុម្ពជំនាញប្រើ color profiles ជាក់លាក់ ដូច្នេះសូមចាត់ទុក CMYK នេះជាចំណុចចាប់ផ្តើម មិនមែនជាពណ៌ត្រូវគ្នាយ៉ាងជាក់លាក់ទាំងស្រុងនោះទេ។
សមាមាត្រ Contrast និង WCAG
គោលការណ៍ណែនាំស្តីពីលទ្ធភាពចូលប្រើមាតិកាគេហទំព័រ (WCAG) តម្រូវឱ្យមានសមាមាត្រ contrast យ៉ាងហោចណាស់ 4.5:1 សម្រាប់អត្ថបទធម្មតា (កម្រិត AA) និង 3:1 សម្រាប់អត្ថបទធំទំហំ 24 px ឬ 18.7 px ដិត (bold)។ កម្រិត AAA ដំឡើងសមាមាត្រនេះដល់ 7:1 និង 4.5:1។ សមាមាត្រនេះមានចន្លោះពី 1:1 (គ្មាន contrast) ដល់ 21:1 (អក្សរខ្មៅលើផ្ទៃស)។
សំណួរដែលសួរញឹកញាប់
តើខ្ញុំអាចបម្លែង HEX ទៅ RGB ដោយរបៀបណា?
បំបែកលេខ HEX ទាំង 6 ខ្ទង់ជា 3 គូ ហើយបម្លែងគូនីមួយៗពីគោល 16 ទៅជាចំនួនទសភាគ។ សម្រាប់ #3366CC៖ 33 = 51, 66 = 102, CC = 204 ដូច្នេះពណ៌នោះគឺ rgb(51, 102, 204)។ ឧបករណ៍នេះធ្វើការបម្លែងភ្លាមៗពេលអ្នកកំពុងវាយបញ្ចូល។
តើ HSL និង HSV ខុសគ្នាយ៉ាងដូចម្តេច?
ទម្រង់ទាំងពីរប្រើ hue និង saturation ដូចគ្នា ប៉ុន្តែ HSL ប្រើ lightness (100% គឺពណ៌សជានិច្ច) ចំណែក HSV ប្រើ value ឬ brightness (100% គឺជាពណ៌សុទ្ធដែលភ្លឺបំផុត)។ ពណ៌ដូចគ្នាមានលេខ S ខុសគ្នាក្នុងម៉ូដែលនីមួយៗ។
តើខ្ញុំអាចបញ្ចូលពណ៌ដែលមានកម្រិតថ្លា (transparency) បានទេ?
បាន។ កូដ HEX 8 ខ្ទង់ដូចជា #3366CC80 នឹងត្រូវអានជាមួយ alpha channel របស់វា ហើយបង្ហាញជា RGBA។ ចំណែក Contrast ត្រូវបានគណនាសម្រាប់ពណ៌ដិត (solid color)។
តើខ្ញុំគួរប្រើអត្ថបទពណ៌ស ឬខ្មៅលើពណ៌របស់ខ្ញុំ?
សូមប្រើពណ៌ណាដែលមានសមាមាត្រ contrast ខ្ពស់ជាង។ ប្រសិនបើវាបង្ហាញផ្លាកសញ្ញា AA ពណ៌បៃតង មានន័យថាវាអាចអានបានស្រួលសម្រាប់អត្ថបទធម្មតា។