การแปลงสี
#ca4e4e
≈ Chestnut Rose
รูปแบบต่างๆ
วัตถุประสงค์ของส่วนนี้คือการสร้างเฉดสี (เติมสีขาวบริสุทธิ์) และเฉดสี (เติมสีดำบริสุทธิ์) ของสีที่คุณเลือกอย่างแม่นยำ โดยเพิ่มทีละ 10%
เคล็ดลับจากมืออาชีพ: ใช้เฉดสีสำหรับสถานะโฮเวอร์และเงา และใช้สีอ่อนสำหรับไฮไลท์และพื้นหลัง
เฉดสี
สร้างรูปแบบที่เข้มขึ้นโดยการเติมสีดำลงในสีพื้นฐานของคุณ
โทนสี
การเปลี่ยนแปลงที่สดใสขึ้นโดยการเติมสีขาวลงในสีพื้นฐานของคุณ
กรณีการใช้งานทั่วไป
- • สถานะส่วนประกอบ UI (โฮเวอร์, ใช้งาน, ปิดใช้งาน)
- • สร้างความลึกด้วยเงาและไฮไลท์
- • การสร้างระบบสีที่สอดคล้องกัน
เคล็ดลับระบบการออกแบบ
ความหลากหลายเหล่านี้สร้างรากฐานของจานสีที่เชื่อมโยงกัน ส่งออกเพื่อรักษาความสอดคล้องกันตลอดทั้งโครงการของคุณ
การผสมสี
แต่ละสีมีอารมณ์ที่แตกต่างกัน ใช้สีที่กลมกลืนกันเพื่อระดมความคิดในการผสมสีที่เข้ากันได้ดี
วิธีการใช้งาน
คลิกที่สีใดก็ได้เพื่อคัดลอกค่าเลขฐานสิบหก การผสมสีเหล่านี้ได้รับการพิสูจน์ทางคณิตศาสตร์แล้วว่าสามารถสร้างความกลมกลืนทางสายตาได้
ทำไมมันจึงสำคัญ
ความกลมกลืนของสีช่วยสร้างความสมดุลและกระตุ้นอารมณ์เฉพาะตัวในงานออกแบบของคุณ
สีคู่ตรงข้าม
สีและสีตรงข้ามบนวงล้อสี (+180 องศาของเฉดสี) ให้คอนทราสต์สูง
สีคู่ตรงข้ามแบบแยก
สีหนึ่งและสองสีที่อยู่ติดกับสีคู่ตรงข้ามของมัน โดยมีค่าเฉดสี +/-30 องศาจากค่าตรงข้ามกับสีหลัก โดดเด่นเหมือนสีคู่ตรงข้าม แต่ใช้งานได้หลากหลายกว่า
สีสามเส้า
สามสีที่เว้นระยะห่างเท่าๆ กันบนวงล้อสี แต่ละสีมีระยะห่าง 120 องศา ควรให้สีหนึ่งโดดเด่นและใช้สีอื่นๆ เป็นสีเน้น
สีข้างเคียง
สามสีที่มีความสว่างและความอิ่มตัวเท่ากัน โดยมีเฉดสีที่อยู่ติดกันบนวงล้อสี ห่างกัน 30 องศา ทำให้เกิดการเปลี่ยนผ่านที่ราบรื่น
สีเดียว
สามสีในเฉดสีเดียวกัน โดยมีค่าความสว่าง +/-50% ทำให้ดูละเอียดอ่อนและประณีต
สีสี่เส้า
ชุดสีคู่ตรงข้ามสองชุด คั่นด้วยเฉดสี 60 องศa
หลักการทฤษฎีสี
สมดุล
ใช้สีหลักสีเดียว รองรับด้วยสีรอง และเน้นอย่างประหยัด
ตัดกัน
ให้แน่ใจว่ามีความคมชัดเพียงพอเพื่อให้สามารถอ่านและเข้าถึงได้
ความสามัคคี
สีควรทำงานร่วมกันเพื่อสร้างประสบการณ์ภาพที่เป็นหนึ่งเดียว
ตัวตรวจสอบความคมชัดของสี
ทดสอบการผสมสีเพื่อให้แน่ใจว่าตรงตามมาตรฐานการเข้าถึง WCAG สำหรับการอ่านข้อความ
สีข้อความ
สีพื้นหลัง
ตัดกัน
มาตรฐาน WCAG
ทุกคนเป็นอัจฉริยะ แต่ถ้าคุณตัดสินปลาด้วยความสามารถในการปีนต้นไม้ ปลาจะมีชีวิตอยู่ทั้งชีวิตโดยเชื่อว่ามันโง่