สร้างโทนสีอ่อนและเข้ม

เกี่ยวกับเครื่องมือนี้

เครื่องมือสร้างทินต์และเชดสร้างรูปแบบที่สว่างกว่าและมืดกว่าจากสีพื้นฐานใดก็ได้ ทินต์ทำโดยผสมสีพื้นฐานกับสีขาว (เพิ่มความสว่าง) ในขณะที่เชดทำโดยผสมกับสีดำ (ลดความสว่าง)

เครื่องมือสร้างทินต์ได้ถึง 5 ระดับและเชด 5 ระดับ บวกกับสีพื้นฐานดั้งเดิม ให้ชุดสีพาเลตต์ 11 ขั้นตอนที่มีสีที่เลือกเป็นศูนย์กลาง คลิกที่ตัวอย่างสีใดก็ได้เพื่อคัดลอกรหัส hex

วิธีใช้งาน

1. เลือกสีพื้นฐานโดยใช้เครื่องมือเลือกสี หรือพิมพ์รหัส hex
2. ใช้ปุ่มตัวอย่างเพื่อลองสีที่ตั้งไว้ล่วงหน้าอย่างรวดเร็ว
3. ปรับจำนวนระดับ (3-5) เพื่อควบคุมความกว้างของพาเลตต์
4. คลิกที่ตัวอย่างสีใดก็ได้เพื่อคัดลอกรหัส hex หรือใช้คัดลอกทั้งหมดสำหรับสเกลเต็ม

กรณีการใช้งาน

ระบบดีไซน์ต้องการสเกลสีที่เป็นระบบสำหรับแต่ละสีของแบรนด์ นักออกแบบ UI สร้างสถานะ hover, active และ disabled จากสีการทำงานเดียว นักพัฒนา frontend สร้างรูปแบบสีที่สอดคล้องกัน

คำถามที่พบบ่อย

• ความแตกต่างระหว่างทินต์และเชดคืออะไร? — ทินต์ผสมสีกับสีขาว (สว่างขึ้น); เชดผสมกับสีดำ (มืดลง) โทนผสมกับสีเทาและไม่ได้สร้างที่นี่
• ระดับถูกคำนวณอย่างไร? — แต่ละระดับผสมสีพื้นฐานกับสีขาวหรือสีดำในสัดส่วน 10%, 30%, 50%, 70% และ 90% ให้ขั้นตอนภาพที่สอดคล้องกัน
• ฉันสามารถรับตัวแปร CSS จากนี้ได้ไหม? — ผลลัพธ์เป็นรหัส hex คุณสามารถวางลงใน CSS เป็น --color-500, --color-400 เป็นต้น