เครื่องมือสร้างและเลือกสี

สร้างรหัสสี ความหลากหลาย ความกลมกลืน และตรวจสอบอัตราส่วนความคมชัด

การแปลงสี

HEX

#a68b5b

Barley Corn

HEX
#a68b5b
HSL
38, 30, 50
RGB
166, 139, 91
XYZ
27, 27, 14
CMYK
0, 16, 45, 35
LUV
59,30,37
LAB
59, 4, 29
HWB
38, 36, 35

การเปลี่ยนแปลง

วัตถุประสงค์ของส่วนนี้คือการสร้างสีอ่อน (เพิ่มสีขาวบริสุทธิ์) และสีเข้ม (เพิ่มสีดำบริสุทธิ์) ของสีที่คุณเลือกในอัตรา 10%

เคล็ดลับมือโปร: ใช้สีเข้มสำหรับสถานะโฮเวอร์และเงา สีอ่อนสำหรับไฮไลท์และพื้นหลัง

เฉดสี

การเปลี่ยนแปลงที่เข้มขึ้นสร้างขึ้นโดยการเพิ่มสีดำให้กับสีพื้นฐานของคุณ

สีอ่อน

การเปลี่ยนแปลงที่อ่อนลงสร้างขึ้นโดยการเพิ่มสีขาวให้กับสีพื้นฐานของคุณ

กรณีการใช้งานทั่วไป

  • สถานะของส่วนประกอบ UI (โฮเวอร์, แอคทีฟ, ปิดการใช้งาน)
  • สร้างความลึกด้วยเงาและไฮไลท์
  • สร้างระบบสีที่สอดคล้องกัน

เคล็ดลับระบบการออกแบบ

การเปลี่ยนแปลงเหล่านี้เป็นพื้นฐานของพาเลตต์สีที่สอดคล้องกัน ส่งออกเพื่อรักษาความสอดคล้องทั่วทั้งโครงการของคุณ

การผสมผสานสี

แต่ละความกลมกลืนมีอารมณ์ของตัวเอง ใช้ความกลมกลืนเพื่อระดมความคิดเกี่ยวกับการผสมสีที่ทำงานร่วมกันได้ดี

วิธีการใช้

คลิกที่สีใด ๆ เพื่อคัดลอกค่า hex ของมัน การผสมผสานเหล่านี้ได้รับการพิสูจน์ทางคณิตศาสตร์แล้วว่าสร้างความกลมกลืนทางสายตา

ทำไมมันถึงสำคัญ

ความกลมกลืนของสีสร้างความสมดุลและกระตุ้นอารมณ์เฉพาะในงานออกแบบของคุณ

สีเสริม

สีและสีตรงข้ามบนวงล้อสี, +180 องศาของเฉดสี ความคมชัดสูง

#a68b5b
เหมาะสำหรับ: การออกแบบที่มีผลกระทบสูง, 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

รูปแบบทางเทคนิค

รูปแบบที่ใช้งานได้จริง

การวิเคราะห์สี

เครื่องจำลองการตาบอดสี

แง่มุมเชิงสร้างสรรค์