ตัวสร้างระดับสี (Tints & Shades)
ตัวสร้างระดับสีออนไลน์ฟรี กรอก hex color ใด ๆ เพื่อสร้าง tints (โทนอ่อน) และ shades (โทนเข้ม) ที่มีระยะห่างเท่ากัน พร้อมค่า HEX, RGB และ HSL ส่งออกเป็น CSS variables, SCSS หรือ JSON ทำงานฝั่ง client 100%
Loading tool...
ตัวสร้างระดับสี (Tints & Shades) คืออะไร?
ตัวสร้างระดับสี (Color Shades Generator) เป็นเครื่องมือออนไลน์ฟรีที่รับ hex color พื้นฐานใด ๆ แล้วสร้างระดับสี tints และ shades ที่มีระยะห่างเท่ากัน โดยผสมสีของคุณไปทางสีขาว (tints) และไปทางสีดำ (shades) ด้วยการ interpolate แบบเชิงเส้นในพื้นที่ RGB สร้างได้ตั้งแต่ scale 3 ขั้น ไปจนถึง ramp 21 จุดตามจำนวนขั้นที่เลือก ทุกตัวอย่างสีจะแสดงน้ำหนัก ค่า HEX, RGB และ HSL ที่คัดลอกได้คลิกเดียว เครื่องมือสามารถส่งออกพาเลตทั้งหมดเป็น CSS custom properties, SCSS variables หรือ JSON token พร้อมนำไปใช้ใน Tailwind theme, พาเลต Material Design หรือ design-token pipeline ใดก็ได้ ตัวเลือกสีแบบโต้ตอบ ช่องกรอก hex พร้อมตรวจสอบ และสีตัวอย่าง preset ทำให้ปรับแต่งได้รวดเร็ว และข้อความปรับ contrast อัตโนมัติบนแต่ละตัวอย่างช่วยในการตรวจสอบ accessibility การประมวลผลทั้งหมดทำงานใน browser โดยไม่ส่งข้อมูลออกไป
ประโยชน์หลัก
- สร้าง color scale ที่สม่ำเสมอและมีระยะห่างเท่ากันสำหรับ design system ในไม่กี่วินาที
- ปรับจำนวนขั้นได้ตั้งแต่ 1 ถึง 10 ขั้นต่อด้านเพื่อควบคุมอย่างละเอียด
- คัดลอก HEX, RGB หรือ HSL ของตัวอย่างสีใดก็ได้คลิกเดียว
- ส่งออกเป็น CSS variables, SCSS variables หรือ JSON สำหรับ framework ใดก็ได้
- ข้อความปรับ contrast อัตโนมัติและตารางค่าที่เข้าถึงได้รองรับการตรวจสอบ WCAG
กรณีการใช้งาน
- •Design system: สร้าง color scale สไตล์ Tailwind (50-950) จากสีแบรนด์เดียว
- •Web development: สร้าง CSS custom properties หรือ SCSS variables สำหรับพาเลต light/dark theme
- •UI design: สำรวจ tints และ shades ของสีแบรนด์สำหรับสถานะ hover, active และ disabled
- •Accessibility: ตรวจสอบอัตราส่วน contrast ของสีทั่วทั้ง scale เพื่อให้เป็นไปตาม WCAG
- •Prototyping: สร้างพาเลตที่กลมกลืนจาก hex value ที่หยิบมาจากโลโก้หรือ screenshot ได้อย่างรวดเร็ว
วิธีใช้ตัวสร้างระดับสี
- กรอกสีพื้นฐาน: พิมพ์ hex color code (เช่น #3b82f6) ลงในช่องกรอก หรือเลือกสีจากตัวเลือกสีด้านข้าง คุณยังสามารถคลิกสีตัวอย่างด้านล่างได้
- ตั้งค่าจำนวนขั้น: ใช้ slider จำนวนขั้นเพื่อเลือกว่าจะสร้าง tints และ shades กี่ขั้นในแต่ละด้านของสีหลัก ตั้งแต่ 1 ถึง 10 ขั้นต่อด้าน
- ดูระดับสีที่สร้างขึ้น: ระดับสีที่สร้างขึ้นจะปรากฏเป็นตัวอย่างสีตั้งแต่ tint ที่อ่อนที่สุดไปจนถึง shade ที่เข้มที่สุด คลิกตัวอย่างใดก็ได้เพื่อคัดลอกค่า hex
- ตรวจทานและส่งออก: เลื่อนไปยังตารางค่ารายละเอียดเพื่อคัดลอก HEX, RGB หรือ HSL จากนั้นใช้ปุ่มส่งออกเพื่อคัดลอกพาเลตทั้งหมดเป็น CSS variables, SCSS หรือ JSON
คุณสมบัติหลัก
- สร้าง tints (โทนอ่อน) และ shades (โทนเข้ม) ที่มีระยะห่างเท่ากันจาก hex color พื้นฐานใด ๆ
- ปรับจำนวนขั้นได้ตั้งแต่ 1 ถึง 10 ขั้นต่อด้าน สร้างได้ 3 ถึง 21 ตัวอย่างสีในมุมมองเดียว
- แสดงค่า HEX, RGB และ HSL ของทุกตัวอย่างสีพร้อมคัดลอกคลิกเดียวและ feedback การยืนยัน
- ส่งออกพาเลตทั้งหมดเป็น CSS custom properties, SCSS variables หรือ JSON token
- ข้อความปรับ contrast อัตโนมัติและตารางค่ารายละเอียดที่เข้าถึงได้ดี
- ทำงาน 100% ฝั่ง client — ใช้งานออฟไลน์ได้ ไม่ต้องสมัครสมาชิก ค่าสีไม่ออกจากอุปกรณ์