โทนอ่อนและโทนเข้ม
เครื่องมือสร้าง Tints และ Shades ช่วยสร้างเฉดสีอ่อน (ผสมกับสีขาว) และเฉดสีเข้ม (ผสมกับสีดำ) จากสีหลักที่คุณเลือก ได้ 5, 10 หรือ 20 ระดับ พร้อมผลลัพธ์เป็นตัวแปร CSS
เกี่ยวกับเครื่องมือนี้
เครื่องมือสร้าง Tints และ Shades ช่วยสร้างเฉดสีอ่อน (ผสมกับสีขาว) และเฉดสีเข้ม (ผสมกับสีดำ) จากสีหลักที่คุณเลือก ได้ 5, 10 หรือ 20 ระดับ พร้อมผลลัพธ์เป็นตัวแปร CSS
วิธีใช้
- เลือกสีหลัก
- เลือกจำนวนระดับ 5, 10 หรือ 20
- คลิกช่องสีใดก็ได้เพื่อคัดลอกค่า hex
- คลิก Copy as CSS Variables เพื่อส่งออกชุดสีทั้งหมด
ข้อควรรู้
- Tint คือสีที่ผสมกับสีขาว ส่วน Shade คือสีที่ผสมกับสีดำ
- เครื่องมือนี้ผสมสีทีละขั้นเท่า ๆ กันในระบบ RGB แต่ละระดับจึงเปลี่ยนสีไปในปริมาณเท่ากัน
- Design system อย่าง Tailwind ใช้สเกล 50–900 ที่สร้างจาก tint และ shade ของสีแบรนด์แต่ละสี
- ควรตรวจสอบคอนทราสต์ของสีตัวอักษรที่เลือกจากสเกล เพราะระดับกลาง ๆ มักไม่ผ่านเกณฑ์ WCAG AA บนพื้นขาว
ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดหรือจัดเก็บ
คำถามที่พบบ่อย
Tint กับ Shade ต่างกันอย่างไร?
Tint ทำให้สีอ่อนลงด้วยการเติมสีขาว ส่วน Shade ทำให้สีเข้มขึ้นด้วยการเติมสีดำ และ Tone คือการเติมสีเทา
สีหนึ่งสีใน design system ควรมีกี่เฉด?
โดยทั่วไปประมาณ 10 ระดับ เช่น 50, 100 … 900 ใน Tailwind ซึ่งครอบคลุมพอสำหรับพื้นหลัง เส้นขอบ ตัวอักษร และสถานะ hover
จะนำสเกลสีไปใช้ใน CSS ได้อย่างไร?
คัดลอกสเกลเป็น custom properties แล้วอ้างอิงด้วย var(--color-name) เช่น ใช้กับพื้นหลัง เส้นขอบ หรือสถานะ hover
ทำไม tint บางสีดูซีดจาง?
การผสมกับสีขาวไม่ได้แค่เพิ่มความสว่าง แต่ยังลดความอิ่มตัวของสีด้วย หากต้องการสีอ่อนที่สดขึ้น ให้ปรับ saturation แยกต่างหากใน HSL