តើខ្ញុំបំប្លែងពណ៌ HEX ទៅ RGB និង HSL យ៉ាងដូចម្តេច?

វាយ ឬបិទភ្ជាប់ពណ៌ក្នុង ការបញ្ចូលពណ៌ ឧទាហរណ៍ #14b8a6 ឬប្រើឧបករណ៍ជ្រើសពណ៌។ ឧបករណ៍បង្ហាញតម្លៃ HEX, rgb(), hsl(), hsv() និង cmyk() បូក oklch(), lab() និង lch() ដែលនីមួយៗមានប៊ូតុង ចម្លង។

តើខ្ញុំអាចវាយទម្រង់ពណ៌អ្វីខ្លះ?

HEX ដែលមាន 3, 4, 6 ឬ 8 ខ្ទង់ rgb() ឬ rgba() hsl() ឬ hsla() ក្នុងវាក្យសម្ព័ន្ធក្បៀស ឬចន្លោះ និងបីលេខសាមញ្ញ។ ប្រសិនបើការបញ្ចូលមិនត្រូវបានស្គាល់ ឧបករណ៍បង្ហាញកំហុសក្នុងការញែក។

តើខ្ញុំអាចបំប្លែងពណ៌ដែលមានតម្លាភាពបានទេ?

បាន។ ប្រើការគ្រប់គ្រង ភាពស្រអាប់ ឬបញ្ចូលតម្លៃ alpha ក្នុងការបញ្ចូល។ បន្ទាប់មកលទ្ធផលរួមមានឆានែល alpha ដូចជា HEX 8 ខ្ទង់ rgba() ឬ alpha បន្ទាប់ពីសញ្ញាទ្រេតក្នុងវាក្យសម្ព័ន្ធទំនើប។

តើតម្លៃ CMYK ត្រឹមត្រូវសម្រាប់ការបោះពុម្ពដែរឬទេ?

ទេ វាជាការប៉ាន់ស្មានស្តង់ដារពី sRGB ទៅ CMYK បង្ហាញក្រោម សម្រាប់ការបោះពុម្ព។ សម្រាប់ពណ៌បោះពុម្ពត្រឹមត្រូវ សូមប្រើប្រវត្តិរូបពណ៌របស់ម៉ាស៊ីនបោះពុម្ពរបស់អ្នក ឬស្នើសុំភស្តុតាង ព្រោះពណ៌ភ្លឺនៅលើអេក្រង់ច្រើនតែបោះពុម្ពស្រអាប់ជាង។

តើខ្ញុំពិនិត្យថាតើពណ៌របស់ខ្ញុំមានភាពផ្ទុយគ្រប់គ្រាន់សម្រាប់អត្ថបទយ៉ាងដូចម្តេច?

មើលផ្នែក ភាពផ្ទុយ WCAG។ វាបង្ហាញសមាមាត្រភាពផ្ទុយនៃពណ៌របស់អ្នកលើពណ៌ស និងពណ៌ខ្មៅ ដែលដាក់ពិន្ទុ AAA, AA, AA Large ឬ Fail។ មាត្រដ្ឋានពន្លឺ ផ្តល់ស្រមោលស្រាលជាង ឬងងឹតជាងដើម្បីសាកល្បង។

តើវាឥតគិតថ្លៃពិតមែនទេ?

ពិតប្រាកដណាស់។ ឧបករណ៍ទាំងអស់គឺអាចប្រើបានដោយឥតគិតថ្លៃ ដោយមិនបាច់មានគណនី និងមិនបាច់ប្រើកាតឥណទានឡើយ។ ការងារទាំងអស់ដំណើរការនៅលើឧបករណ៍របស់អ្នកផ្ទាល់ ជាជាងនៅលើម៉ាស៊ីនបម្រើ (server) របស់យើង ដែលនេះហើយជាមូលហេតុធ្វើឱ្យវាដំណើរការដោយឥតគិតថ្លៃ។

វាដំណើរការនៅលើទូរស័ព្ទទេ?

បាទ/ចាស។ វាដំណើរការលើកម្មវិធីរុករកទូរសព្ទទំនើបលើ iOS និង Android ដោយមិនចាំបាច់ដំឡើងអ្វីទេ។

🎨

កម្មវិធីបំប្លែងពណ៌ ឥតគិតថ្លៃ

បំប្លែងពណ៌រវាង HEX, RGB, HSL, HSV, និង CMYK ភ្លាមៗ។ រួមបញ្ចូលជញ្ជីង lightness និង swatch ស្ដង់ដារ។

ដំណើរការក្នុងកម្មវិធីរុករករបស់អ្នកគ្មានការចុះឈ្មោះ គ្មានបង្អួចលេចឡើងមិនចាំបាច់ចូលគណនីឥតគិតថ្លៃជារៀងរហូត

ធ្វើការក្រៅបណ្តាញនៅពេលបានផ្ទុករួច

បង្វិលពណ៌រវាង HEX, RGB, HSL, HSV និង CMYK — ជាមួយនឹងការមើលឃើញដោយផ្ទាល់ និងការថតចម្លងមួយលាន។ អ្វីៗគ្រប់យ៉ាងរត់នៅក្នុងកម្មវិធីរុករករបស់អ្នក។

ការបញ្ចូលពណ៌

ទទួល: HEX (#fff ឬ #ffffff), RGB (255, 255, 255), ឬ HSL (360, 100%, 50%)

ភាពថ្លាា100%

លំនាំដើម:

HEX#14B8A6

rgb() · ចាស់rgb(20, 184, 166)

rgb() · ថ្មីrgb(20 184 166)

hsl() · ចាស់hsl(173, 80%, 40%)

hsl() · ថ្មីhsl(173 80% 40%)

oklch()oklch(70.4% 0.123 182.5)

lab()lab(67.1% -42.9 -2.3)

lch()lch(67.1% 43.0 183.1)

hsv()hsv(173, 89%, 72%)

cmyk()cmyk(89%, 0%, 10%, 28%)

តម្លៃ RGB20, 184, 166

ភាពផ្ទុយគ្នា WCAG

នៅលើផ្ទៃខាងលើពណ៌សឬ

2.49:1

ចាប់ផ្តើម

លើផ្ទៃខាងក្រោយខ្មៅ

8.44:1

AAA

🖨️ សម្រាប់ បោះពុម្ព: តម្លៃ CMYK ទាំងនេះ (89%, 0%, 10%, 28%) គឺជាការប៉ាន់ស្មាន sRGB→CMYK ស្តង់ដារសម្រាប់ជាឯកសារយោង។ សម្រាប់ពណ៌បោះពុម្ពត្រឹមត្រូវ សូមប្រើ ICC profile របស់ម៉ាស៊ីនបោះពុម្ព ឬការបោះពុម្ពសាកល្បង — CMYK លើអេក្រង់មិនអាចផ្គូផ្គងទឹកថ្នាំ/ក្រដាសគ្រប់ប្រភេទទេ។

មាត្រដ្ឋានភ្លឺ

ចុច swatch ណាមួយដើម្បីប្តូរទៅស្រមោលនោះ

ការប្រើប្រាស់ទូទៅ

ប្រែក្លាយ Colors សម្រាប់ Web Designទទួលបានតម្លៃ HEX, RGB និង HSL សម្រាប់ពណ៌ណាមួយ — ត្រៀមបិទភ្ជាប់ក្នុង CSS ឬ Tailwind។
ប្រែក្លាយ Colors សម្រាប់ Printing (CMYK)ប្រែក្លាយ រង្វាន ពណ៌ (HEX/RGB) ទៅ CMYK លម្អិត សម្រាប់ប្រើប្រាស់ក្នុង printing ឌីហ្សាញ និង វិជ្ជមាន។
សាងសង់ Color Palettes សម្រាប់ Design Systemsប្រែក្លាយ ពណ៌ ឥឡូវ វិមាត្រ ហើយ ផលិត ដែលតូច lightness scales សម្រាប់ ឌីហ្សាញ ប្រព័ន្ធ។
ពិនិត្យលម្អិតពណ៌ សម្រាប់ការលាច់បម្លែងពណ៌ដើម្បីទទួលលម្អិត RGB សម្រាប់ប្រើក្នុងកម្មវិធីលម្អិតលម្អិត WCAG លេង។
បម្លែងពណ៌ សម្រាប់ Figmaទទួលលម្អិត HEX និង RGB ដើម្បីដាក់ក្នុងលម្អិត Figma ពិនិត្យលម្អិត និងលម្អិតលេង។

វាដំណើរការដោយរបៀបណា

ឡូជីខលការបម្លែងទាំងអស់ជា JavaScript សរសេរដោយដៃដំណើរការទាំងស្រុងក្នុងកម្មវិធីរុករករបស់អ្នក — គ្មានបណ្ណាល័យ គ្មានការហៅម៉ាស៊ីនមេទេ។ ឧបករណ៍ញែកធាតុចូលរបស់អ្នក បញ្ជូនវាតាមខ្សែសង្វាក់អនុគមន៍គណិតវិទ្យាសុទ្ធ ហើយផលិតទម្រង់លទ្ធផលដប់មួយក្នុងពេលតែមួយ រួមទាំងលំហ CSS Color 4 ទំនើប oklch() និង lab()។

1
ការញែកធាតុចូលបត់បែន
កម្មវិធីញែកតាមបំណងទទួល hex (3, 4, 6 ឬ 8 ខ្ទង់), rgb()/rgba(), hsl()/hsla() ក្នុងវាក្យសម្ព័ន្ធក្បៀសបុរាណ និងវាក្យសម្ព័ន្ធចន្លោះទំនើប និង triple លេខទទេ។ តម្លៃ alpha ជាទសភាគ ឬភាគរយត្រូវបានធ្វើឱ្យស្តង់ដារទៅជួរ 0–1 មុននឹងការបម្លែងណាមួយចាប់ផ្តើម។
2
RGB ជាមជ្ឈមណ្ឌលបម្លែង
ទម្រង់ដែលទទួលបាននីមួយៗត្រូវបានដោះស្រាយដំបូងទៅ RGB triplet ជារឿងធម្មតា។ ពីតំណាងតែមួយនោះ ឧបករណ៍ពង្រីក៖ HSL និង HSV ប្រើរូបមន្ត min/max/chroma ស្តង់ដារ; CMYK ត្រូវបានទទួលដោយរកប៉ុស្តិ៍គន្លឹះ; ហើយ linearization sRGB (ខ្សែកោង gamma piecewise កំណត់ក្នុង IEC 61966-2-1) ត្រូវបានអនុវត្តមុននឹងការគណនាលំហ perceptual។
3
លំហពណ៌ perceptual គណនាពីដំបូង
oklch() ត្រូវបានគណនាដោយប្រើ matrices 3×3 យោង Björn Ottosson (លំហ LMS cube-root)។ lab() និង lch() ប្រើការសម្របខ្លួនតាមពណ៌ Bradford ដើម្បីបម្លែងពីចំណុចស D65 ទៅ D50 ដែលត្រូវនឹងរបៀបដែល CSS Color 4 កំណត់ lab()។ ទាំងនេះជារូបមន្តដូចគ្នាដែលប្រើនៅក្នុងម៉ាស៊ីនបង្ហាញកម្មវិធីរុករក — ត្រូវបានអនុវត្តនៅទីនេះដោយគ្មានការពឹងផ្អែកខាងក្រៅណាមួយទេ។
4
ភាពផ្ទុយគ្នា WCAG និងមាត្រដ្ឋានភាពភ្លឺ
Luminance ដែលទាក់ទងគ្នាត្រូវបានគណនាតាមរូបមន្ត WCAG 2.1 (R, G, B linearized ផ្តល់ទម្ងន់ 0.2126/0.7152/0.0722) ហើយសមាមាត្រភាពផ្ទុយគ្នានឹងស និងខ្មៅត្រូវបានផ្តល់ពិន្ទុ AA-large, AA, AAA ឬ Fail។ ខ្សែភាពភ្លឺប្រាំបួនជំហានត្រូវបានបង្កើតដោយធ្វើជំហានប៉ុស្តិ៍ភាពភ្លឺ HSL ពី 10% ទៅ 90% អនុញ្ញាតឱ្យអ្នកចុច swatch ណាមួយដើម្បីបម្លែងស្រមោលនោះ។