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

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

การแปลงสี

HEX

#9c5758

Au Chico

HEX
#9c5758
HSL
359, 28, 48
RGB
156, 87, 88
XYZ
19, 15, 11
CMYK
0, 44, 44, 39
LUV
45,57,11,
LAB
45, 29, 12
HWB
359, 34, 39

รูปแบบต่างๆ

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

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

เฉดสี

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

โทนสี

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

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

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

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

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

การผสมสี

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

วิธีการใช้งาน

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

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

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

สีคู่ตรงข้าม

สีและสีตรงข้ามบนวงล้อสี (+180 องศาของเฉดสี) ให้คอนทราสต์สูง

#9c5758
ดีที่สุดสำหรับ: การออกแบบที่มีผลกระทบสูง, CTA, โลโก้

สีคู่ตรงข้ามแบบแยก

สีหนึ่งและสองสีที่อยู่ติดกับสีคู่ตรงข้ามของมัน โดยมีค่าเฉดสี +/-30 องศาจากค่าตรงข้ามกับสีหลัก โดดเด่นเหมือนสีคู่ตรงข้าม แต่ใช้งานได้หลากหลายกว่า

ดีที่สุดสำหรับ: เค้าโครงที่สดใสแต่สมดุล

สีสามเส้า

สามสีที่เว้นระยะห่างเท่าๆ กันบนวงล้อสี แต่ละสีมีระยะห่าง 120 องศา ควรให้สีหนึ่งโดดเด่นและใช้สีอื่นๆ เป็นสีเน้น

ดีที่สุดสำหรับ: การออกแบบที่สนุกสนานและมีพลัง

สีข้างเคียง

สามสีที่มีความสว่างและความอิ่มตัวเท่ากัน โดยมีเฉดสีที่อยู่ติดกันบนวงล้อสี ห่างกัน 30 องศา ทำให้เกิดการเปลี่ยนผ่านที่ราบรื่น

ดีที่สุดสำหรับ: อินเทอร์เฟซที่ได้รับแรงบันดาลใจจากธรรมชาติและผ่อนคลาย

สีเดียว

สามสีในเฉดสีเดียวกัน โดยมีค่าความสว่าง +/-50% ทำให้ดูละเอียดอ่อนและประณีต

ดีที่สุดสำหรับ: การออกแบบที่เรียบง่ายและซับซ้อน

สีสี่เส้า

ชุดสีคู่ตรงข้ามสองชุด คั่นด้วยเฉดสี 60 องศa

ดีที่สุดสำหรับ: โทนสีที่หลากหลายและเข้มข้น

หลักการทฤษฎีสี

สมดุล

ใช้สีหลักสีเดียว รองรับด้วยสีรอง และเน้นอย่างประหยัด

ตัดกัน

ให้แน่ใจว่ามีความคมชัดเพียงพอเพื่อให้สามารถอ่านและเข้าถึงได้

ความสามัคคี

สีควรทำงานร่วมกันเพื่อสร้างประสบการณ์ภาพที่เป็นหนึ่งเดียว

ตัวตรวจสอบความคมชัดของสี

ทดสอบการผสมสีเพื่อให้แน่ใจว่าตรงตามมาตรฐานการเข้าถึง WCAG สำหรับการอ่านข้อความ

สีข้อความ
สีพื้นหลัง
ตัดกัน
Fail
ข้อความขนาดเล็ก
✖︎
ข้อความขนาดใหญ่
✖︎
มาตรฐาน WCAG
AA:อัตราส่วนคอนทราสต์ขั้นต่ำ 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ จำเป็นสำหรับเว็บไซต์ส่วนใหญ่
AAA:อัตราส่วนคอนทราสต์ที่เพิ่มขึ้นเป็น 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่ แนะนำเพื่อการเข้าถึงที่ดีที่สุด

ทุกคนเป็นอัจฉริยะ แต่ถ้าคุณตัดสินปลาด้วยความสามารถในการปีนต้นไม้ ปลาจะมีชีวิตอยู่ทั้งชีวิตโดยเชื่อว่ามันโง่

- Albert Einstein

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

รูปแบบการปฏิบัติ

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

เกมจำลองอาการตาบอด

ด้านความคิดสร้างสรรค์