កម្មវិធីបង្កើតនិង Selector de color

បង្កើតកូដពណ៌, បម្រែបម្រួល, ភាពស្របគ្នា, និងពិនិត្យអត្រាផ្ទុយ។

ការបំលែងពណ៌

HEX

#e2725b

Terracotta

HEX
#e2725b
HSL
10, 70, 62
RGB
226, 114, 91
XYZ
39, 29, 13
CMYK
0, 50, 60, 11
LUV
61,98,32
LAB
61, 42, 33
HWB
10, 36, 11

បំរែបំរួល

គោលបំណងនៃផ្នែកនេះគឺដើម្បីផលិតពណ៌ស្រអាប់ (បន្ថែមពណ៌សសុទ្ធ) និងពណ៌ងងឹត (បន្ថែមពណ៌ខ្មៅសុទ្ធ) នៃពណ៌ដែលអ្នកបានជ្រើសរើសក្នុងកម្រិត 10%។

គន្លឹះជំនាញ៖ ប្រើពណ៌ងងឹតសម្រាប់ស្ថានភាពលើកឡើង និងស្រមោល ពណ៌ស្រអាប់សម្រាប់ពន្លឺ និងផ្ទៃខាងក្រោយ។

ពណ៌ងងឹត

បំរែបំរួលងងឹតបង្កើតឡើងដោយបន្ថែមពណ៌ខ្មៅទៅពណ៌មូលដ្ឋានរបស់អ្នក។

ពណ៌ស្រអាប់

បំរែបំរួលស្រអាប់បង្កើតឡើងដោយបន្ថែមពណ៌សទៅពណ៌មូលដ្ឋានរបស់អ្នក។

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

  • ស្ថានភាពផ្នែក UI (លើកឡើង សកម្ម មិនសកម្ម)
  • បង្កើតជម្រៅជាមួយស្រមោល និងពន្លឺ
  • បង្កើតប្រព័ន្ធពណ៌ដែលមានភាពជាប់លាប់

គន្លឹះប្រព័ន្ធរចនា

បំរែបំរួលទាំងនេះបង្កើតមូលដ្ឋាននៃផ្ទាំងពណ៌ដែលមានភាពជាប់លាប់។ នាំចេញពួកវាដើម្បីរក្សាការស្របគ្នាទូទាំងគម្រោងរបស់អ្នក។

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

ភាពស្របគ្នានីមួយៗមានអារម្មណ៍ផ្ទាល់ខ្លួន។ ប្រើភាពស្របគ្នាដើម្បីគិតពណ៌ដែលដំណើរការល្អជាមួយគ្នា។

របៀបប្រើប្រាស់

ចុចលើពណ៌ណាមួយដើម្បីចម្លងតម្លៃ hex របស់វា។ ការរួមបញ្ចូលទាំងនេះត្រូវបានគណនាម៉ាត្រិកដើម្បីបង្កើតភាពស្របគ្នាផ្នែកមើលឃើញ។

ហេតុអ្វីវាសំខាន់

ភាពស្របគ្នានៃពណ៌បង្កើតសមាមាត្រនិងបង្កើនអារម្មណ៍ជាក់លាក់នៅក្នុងការរចនារបស់អ្នក។

បំពេញ

ពណ៌មួយ និងពណ៌ផ្ទុយរបស់វានៅលើកង់ពណ៌, +180 ដឺក្រេនៃពណ៌។ មានការប្រៀបធៀបខ្ពស់។

#e2725b
ល្អបំផុតសម្រាប់: ការរចនាដែលមានឥទ្ធិពលខ្លាំង, CTA, រូបសញ្ញា

បំពេញបែបបំបែក

ពណ៌មួយ និងពីរដែលនៅជាប់នឹងពណ៌បំពេញរបស់វា, +/-30 ដឺក្រេនៃពណ៌ពីតម្លៃផ្ទុយនឹងពណ៌សំខាន់។ ដ៏ក្លាហានដូចជាការបំពេញត្រង់, ប៉ុន្តែមានភាពចម្រុះជាង។

ល្អបំផុតសម្រាប់: ប្លង់ដែលមានពណ៌ស្រស់ប៉ុន្តែមានតុល្យភាព

ត្រីកោណ

ពណ៌បីដែលមានចន្លោះស្មើគ្នានៅលើកង់ពណ៌, 120 ដឺក្រេនៃពណ៌ពីគ្នា។ ល្អបំផុតសម្រាប់អនុញ្ញាតឱ្យពណ៌មួយមានឥទ្ធិពល និងប្រើពណ៌ផ្សេងទៀតជាពណ៌បន្ថែម។

ល្អបំផុតសម្រាប់: ការរចនាដែលមានភាពរីករាយ និងមានថាមពល

ស្រដៀងគ្នា

ពណ៌បីដែលមានភាពភ្លឺនិងភាពច្បាស់ដូចគ្នា ជាមួយពណ៌ដែលនៅជាប់គ្នានៅលើកង់ពណ៌, 30 ដឺក្រេពីគ្នា។ ការផ្លាស់ប្តូរដែលរលូន។

ល្អបំផុតសម្រាប់: ចំណុចប្រទាក់ដែលបានបំផុសពីធម្មជាតិ និងមានភាពស្ងប់ស្ងាត់

ពណ៌តែមួយ

ពណ៌បីដែលមានពណ៌ដូចគ្នាជាមួយតម្លៃភ្លឺ +/-50%។ ស្រស់ស្អាត និងមានភាពឆើតឆាយ។

ល្អបំផុតសម្រាប់: ការរចនាដែលមានភាពទំនេរ និងមានភាពឆើតឆាយ

តេត្រាឌិក

ពណ៌បួនដែលមានពណ៌បំពេញពីរគូ បំបែកដោយ 60 ដឺក្រេនៃពណ៌។

ល្អបំផុតសម្រាប់: គំរូពណ៌ដែលមានភាពសម្បូរបែប និងមានភាពចម្រុះ

គោលការណ៍ទ្រឹស្តីពណ៌

តុល្យភាព

ប្រើពណ៌មួយជាពណ៌ដ៏សំខាន់, គាំទ្រដោយពណ៌រង និងពណ៌បន្ថែមតិចតួច។

ការប្រៀបធៀប

ធានាថាមានការប្រៀបធៀបគ្រប់គ្រាន់សម្រាប់ភាពអានបាន និងភាពងាយស្រួលក្នុងការចូលប្រើ។

ភាពស្របគ្នា

ពណ៌គួរតែធ្វើការជាមួយគ្នាដើម្បីបង្កើតបទពិសោធន៍រូបភាពដែលមានភាពស្របគ្នា។

ឧបករណ៍ពិនិត្យការផ្ទុយពណ៌

សាកល្បងបន្សំពណ៌ដើម្បីធានាថាវាអនុវត្តតាមស្តង់ដារ WCAG សម្រាប់អានអក្សរបាន។

ពណ៌អក្សរ
ពណ៌ផ្ទៃខាងក្រោយ
ការផ្ទុយ
1.00
Fail
អន់ខ្លាំង
អក្សរតូច
✖︎
អក្សរធំ
✖︎
ស្តង់ដារ WCAG
AA:អត្រាផ្ទុយអប្បបរមា 4.5:1 សម្រាប់អក្សរធម្មតានិង 3:1 សម្រាប់អក្សរធំ។ ត្រូវការសម្រាប់គេហទំព័រច្រើន។
AAA:អត្រាផ្ទុយកាន់តែប្រសើរ 7:1 សម្រាប់អក្សរធម្មតានិង 4.5:1 សម្រាប់អក្សរធំ។ សូមណែនាំសម្រាប់ការចូលប្រើបានល្អបំផុត។
ការប្រកួតគ្នាមិនគ្រប់គ្រាន់សម្រាប់ទំហំអក្សរទាំងអស់ - មិនអាចឆ្លើយតបតាមស្តង់ដារ WCAG។

ឧបករណ៍ពិនិត្យភាពខុសគ្នាកម្រិតខ្ពស់

កែសម្រួលដោយប្រើរបាររំកិល ពិនិត្យមើលច្រើន និងច្រើនទៀត

មនុស្សគ្រប់គ្នាគឺជាអ្នកឆ្លាតវៃ។ ប៉ុន្តែប្រសិនបើអ្នកវាយតម្លៃត្រីដោយសមត្ថភាពរបស់វាក្នុងការឡើងដើមឈើ វានឹងរស់នៅជីវិតទាំងមូលរបស់វាដោយជឿថាវាជាអ្នកល្ងង់។

- Albert Einstein

ទ្រង់ទ្រាយបច្ចេកទេស

ទ្រង់ទ្រាយជាក់ស្តែង

វិភាគពណ៌

ឧបករណ៍សម្របសម្រួលពណ៌

វិមាត្របង្កើតសិល្បៈ