ตัวผสมสี

เครื่องมือนี้ทำอะไร

ตัวผสมสีทำงานกับรูปแบบสี HEX มาตรฐานเท่านั้น รองรับ HEX แบบสั้น เช่น #F60 และ HEX แบบเต็ม เช่น #FF6B35 จากนั้นจะปรับค่าให้เป็นมาตรฐานภายในและแสดงผลทุกสีเป็นโค้ด HEX 6 หลักตัวพิมพ์ใหญ่

การผสมเป็นการอินเทอร์โพเลตแบบเส้นตรงอย่างง่ายในช่อง RGB/sRGB:

1. แปลงสี HEX แต่ละสีเป็นค่า R, G และ B ตั้งแต่ 0 ถึง 255
2. สำหรับแต่ละขั้น คำนวณ t จาก 0 ถึง 1
3. สำหรับแต่ละช่อง ใช้ เริ่มต้น + (ปลายทาง - เริ่มต้น) * t
4. ปัดแต่ละช่องเป็นจำนวนเต็มที่ใกล้ที่สุด แล้วแปลงผลลัพธ์กลับเป็น HEX

เพราะรวมสีต้นทางและปลายทางไว้ด้วย 2 ขั้นจึงหมายถึง “มีเฉพาะจุดเริ่มต้นและจุดปลายทาง” หากตั้ง 7 ขั้นจาก #FF6B35 ไปยัง #1E3A8A ผลลัพธ์คือ:

เหมาะกับการใช้งานแบบไหน

• สเกลสีสถานะ UI: สร้างสีระหว่างทางสำหรับ hover, active, selected หรือ disabled
• วางแผน gradient: กำหนดจุด HEX ที่แน่นอนก่อนเขียน CSS gradient ในเครื่องมืออื่น
• รูปแบบไอคอนและภาพประกอบ: รักษาชุดสีที่เกี่ยวข้องกันให้สม่ำเสมอ
• QA งานออกแบบ: เปรียบเทียบจุดกึ่งกลางที่คำนวณตามช่องสี แทนการกะด้วยสายตา

ข้อจำกัดที่ควรรู้

ตัวผสมนี้ไม่รับ rgb(), hsl(), ชื่อสี, ค่า alpha หรือ HEX 8 หลัก และไม่ส่งออก RGB, HSL, LAB, LCH, snippet CSS, การตรวจคอนทราสต์ หรือคะแนนการเข้าถึง หากต้องการสิ่งเหล่านั้น ให้ใช้ตัวแปลง เครื่องมือตรวจคอนทราสต์ หรือเครื่องมือสร้าง gradient หลังจากได้จุด HEX แล้ว