โปรแกรมแก้ไข HCT

สามขั้นตอน: ป้อนสี, ปรับสามมิติ, อ่านบทบาท

พื้นที่สี Material 3 อย่างเป็นทางการของ Google — Hue / Chroma / Tone, มีความสอดคล้องทางการรับรู้และคอนทราสต์ที่คาดเดาได้

1. 01

   ป้อนสีฐาน

   วาง HCT และแถบเลื่อน HCT จะเข้าที่โดยอัตโนมัติ; คุณยังสามารถนำสีจากตัวแก้ไขบอร์ดหรือหน้าโปรไฟล์สีใดๆ มาใช้ได้อีกด้วย

2. 02

   ปรับ Hue / Chroma / Tone

   Hue H มีช่วง 0-360, Chroma C กำหนดความสดใส และ Tone T 0-100 ตรงกับมาตราส่วน Material theme โดยตรง; การรวมค่าที่เกินขอบเขตจะถูกแมปเป็นสีที่แสดงผลได้ใกล้ที่สุด

3. 03

   อ่านโทนพาเลตต์และบทบาท

   โทนพาเลตต์ 13 ระดับคือโครงสร้างของทุกธีม Material 3 และแผงบทบาทแสดงรายการคำแนะนำโทนสีหลัก / primaryContainer พร้อมคัดลอก

คำถามที่พบบ่อยเกี่ยวกับ HCT

คำถามที่พบบ่อยสามข้อเกี่ยวกับ HCT และพาเลตต์ Material 3

HCT แตกต่างจาก OKLCH อย่างไร

ทั้งสองมีเป้าหมายเพื่อความสอดคล้องทางการรับรู้ แต่ HCT สร้างขึ้นบนโมเดลการปรากฏสี CAM16 ซึ่งยังคำนึงถึงเงื่อนไขการมองและการปรับตัวทางโครมา สเปซสีอย่างเป็นทางการของระบบธีม Material 3 ของ Google — พาเลตต์จากเครื่องมือ Material ตรงกับ HCT อย่างแม่นยำ

ทำไมต้องใช้ Tone แทนที่จะเป็นเปอร์เซ็นต์ความสว่าง?

Tone 0-100 จะสอดคล้องกับ relative luminance (Y) โดยประมาณเชิงเส้น และ Material spec กำหนดบทบาทต่างๆ ด้วย Tone: primary=40, surface=98 และอื่นๆ การเลือกด้วย Tone ช่วยให้คุณคาดการณ์ความคอนทราสต์ของข้อความได้ล่วงหน้า

ทำไม Tonal Palette ถึงมี 13 ขั้นตอนพอดี?

0/10/20 ... 100 คือ scale ค่าอย่างเป็นทางการของ Material 3 ซึ่งครอบคลุมช่วงเต็มจากสีดำไปสีขาว scale คงที่ช่วยให้ธีมมีโครงสร้างเหมือนกันในทุกสีต้นฉบับ จึงสามารถสลับกันได้โดยตรง

หลังจากแก้ไข

นำสีไปใช้ใน board editor เพื่อสร้างจานสี หรือปรับแต่งละเอียดใน OKLCH editor ด้วยแนวคิดการรับรู้สีแบบเดียวกัน