ตัวเลือกสี (HEX, RGB, HSL, OKLCH)
เลือกสีบนสี่เหลี่ยมความอิ่มตัว–ความสว่าง หรือพิมพ์ HEX, RGB, HSL หรือ OKLCH ทุกรูปแบบซิงค์กัน พร้อมสเกลทินท์/เฉด eyedropper (Chromium) และพาเลตต์ที่ส่งออกได้สำหรับ CSS และ JSON
วิธีเลือกและส่งออกสี
1. ลากบนสี่เหลี่ยมสีและสไลเดอร์ฮิว หรือวางค่า HEX/RGB/HSL/OKLCH
2. อ่าน HEX, RGB, HSL และ OKLCH ที่ซิงค์ในแถบสรุป
3. คลิกเฉดหรือสวอตช์ฮาร์โมนีเพื่อสำรวจสีที่เกี่ยวข้อง
4. คัดลอกค่า คัดลอกลิงก์ ?hex= ที่แชร์ได้ หรือส่งออกตัวแปร CSS / JSON
ตัวอย่างตัวเลือกสี
สีแบรนด์ terracotta #8F665E
ตัวเลือก HSV คงฮิวขณะที่คุณทำให้มืดสำหรับโฮเวอร์ ส่งออก --color และ --shade-* เป็นตัวแปร CSS สำหรับไฟล์โทเค็นดีไซน์
พาเลตต์แดชบอร์ดแบบ analogous
เลือก Analogous เพื่อได้ฮิว ±30° และ ±60° คัดลอกแถบเป็น custom properties ของ CSS สำหรับชาร์ตและการ์ดที่รู้สึกเกี่ยวข้อง ไม่เหมือนกันหมด
OKLCH สำหรับขั้นที่สม่ำเสมอ
แร่มเงาแปรความสว่าง OKLCH ให้ขั้นดูสม่ำเสมอกว่าการผสม HEX กับขาว ใช้ oklch() ใน CSS สมัยใหม่เมื่อต้องการแรมเพอร์เซ็ปชวล
เมื่อไหร่ควรใช้เครื่องมือนี้
• เมื่อเลือกสี UI และต้องการ HEX, RGB, HSL และ OKLCH พร้อมกัน
• เมื่อสร้างเฉดโฮเวอร์/จางจากฮิวแบรนด์เดียว
• เมื่อส่งออกพาเลตต์เล็ก (ฮาร์โมนี + แรม) เป็นตัวแปร CSS
ฮาร์โมนีสำหรับพาเลตต์ UI
ฮิวเสริมอยู่ห่าง 180° — คอนทราสต์สูง ใช้เท่าที่จำเป็นสำหรับ CTA ฮิว analogous (±30–60°) รู้สึกกลมกลืนสำหรับแดชบอร์ด ชุด triadic และ tetradic ให้ความหลากหลายมากกว่า ลดความอิ่มตัวของสีเสริมเพื่อให้สีหลักยังนำ จับคู่สคีมหาใดกับตัวตรวจคอนทราสต์ WCAG ก่อนปล่อยสีข้อความ
คำถามที่พบบ่อย
HEX กับ RGB กับ HSL กับ OKLCH?
HEX และ RGB คือสี sRGB เดียวกัน HSL สะดวกสำหรับปรับฮิว/ความสว่าง OKLCH เป็นปริภูมิเพอร์เซ็ปชวล: ขั้น L ที่ใกล้กันดูสม่ำเสมอกับตา และใช้ได้ใน CSS สมัยใหม่เป็น oklch()
eyedropper ใช้ได้ทุกเบราว์เซอร์หรือไม่?
EyeDropper API มีในเบราว์เซอร์ตระกูล Chromium (Chrome, Edge) ที่อื่น พิมพ์ค่าหรือใช้ตัวเลือกภาพ
แชร์สีได้หรือไม่?
ได้ URL อัปเดตด้วย ?hex=RRGGBB คัดลอกลิงก์เพื่อเปิดสีเดิม
สีถูกประมวลผลบนเซิร์ฟเวอร์หรือไม่?
ไม่ การแปลง ฮาร์โมนี และการส่งออกทำงานในเบราว์เซอร์