/impeccable colorize
Colorize
เพิ่มสีอย่างมีกลยุทธ์ให้อินเทอร์เฟซขาวดำโดยไม่ดูจัดจ้าน
เมื่อไรควรใช้
/impeccable colorize คือตัวถ่วงน้ำหนักของ “ทุกอย่างเป็นสีเทา” แดชบอร์ดที่อ่านเหมือนกำแพงสีเบจ ฟอร์มที่ไม่มีสีเน้น หน้าเนื้อหาที่เป็นผลิตภัณฑ์ SaaS ใดก็ได้ ใช้เมื่ออินเทอร์เฟซทำงานได้แต่ราบเรียบทางอารมณ์ และคุณต้องการความอบอุ่นโดยไม่ตกลงไปสู่พาเลตสี AI (ม่วงถึงชมพู นีออนฟ้า โหมดมืดเรืองแสง)
วิธีการทำงาน
สกิลเริ่มจากการอ่านสีแบรนด์ของคุณหากมี แล้วตัดสินใจว่าสีหาเหตุผลได้ที่ไหน:
- แอคชันหลัก ได้การแสดงออกที่แรงที่สุดของเฉดสีแบรนด์
- สีเน้นรอง ได้ตัวแปรที่ปรับโทนหรือจาง ไม่ใช่สีเต็มอีกสี
- กลางๆ ได้การปรับโทนไปทางเฉดสีแบรนด์ที่ chroma ต่ำ (ประมาณ 0.005 ถึง 0.01) ซึ่งมองไม่เห็นเกือบทุกพิกเซลแต่สร้างความสอดคล้องในจิตใต้
- หมวดหมู่เนื้อหา ได้ระบบสีเน้นจำกัดและตั้งใจ ไม่ใช่รุ้ง
สำคัญ: มันใช้ OKLCH แทน HSL เพื่อให้ขั้นความสว่างเท่ากันดูเท่ากัน เมื่อความสว่างเคลื่อนไปทางขอบ chroma ลดลงอัตโนมัติ นี่คือวิธีที่คุณได้สีที่รู้สึกว่าตั้งใจแทนที่จะคำนวณ
ลองใช้งาน
/impeccable colorize the dashboard
ผลลัพธ์ที่คาดหวัง:
- สีแบรนด์ย้ายจาก hex ที่ฮาร์ดโค้ดเป็น
--color-accent: oklch(62% 0.18 240) - กลางๆ ปรับโทนด้วย chroma 0.007 ไปทางเฉดสีแบรนด์
- ปุ่มหลักได้สีเน้นเต็ม ปุ่มรองได้ ink/mist
- ชุดกราฟิกใช้ 3 เฉดสีที่แตกต่าง ทั้งหมดที่ความสว่างเท่ากันจึงไม่มีชุดใดครองทางสายตา
- ภาพสเตทว่างใช้สีเน้นอ่อน
ข้อควรระวัง
- รันโดยไม่มีเฉดสีแบรนด์ Colorize ต้องการจุดเริ่มต้น หาก
PRODUCT.mdไม่ระบุ มันจะถาม อย่าปล่อยให้มันเลือกจากดีฟอลต์พาเลตสี AI - คาดหวังให้มันแก้ปัญหาพาเลตสี AI หากการออกแบบของคุณมีไล่สีม่วงและนีออนฟ้าอยู่แล้ว คุณต้องการ
/impeccable quieterก่อน แล้ว colorize ถึงจะสร้างใหม่ได้ - ใช้บนอินเทอร์เฟซที่มีสีเยอะอยู่แล้ว นั่นคืองานของ
/impeccable quieterColorize เพิ่ม ไม่ได้ลด