Color Palette Generator
Generate a complete 10-shade color palette from any base color in Tailwind CSS style.
50#f0f6fergb(240, 246, 254)hsl(217, 91%, 97%)
100#dde9fdrgb(221, 233, 253)hsl(217, 91%, 93%)
200#b6d1fcrgb(182, 209, 252)hsl(217, 91%, 85%)
300#7bacf9rgb(123, 172, 249)hsl(217, 91%, 73%)
400#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
500#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
600#0b60eargb(11, 96, 234)hsl(217, 91%, 48%)
700#094cb9rgb(9, 76, 185)hsl(217, 91%, 38%)
800#063888rgb(6, 56, 136)hsl(217, 91%, 28%)
900#042458rgb(4, 36, 88)hsl(217, 91%, 18%)
เกี่ยวกับเครื่องมือนี้
ตัวแยกจานสีสร้างสเกล 10 ขั้นตอนสำหรับระบบการออกแบบจากสีพื้นฐานใดๆ ที่ตรงกับแบบแผน 50-900 ของ Tailwind CSS, Material Design และ framework ที่คล้ายกัน
แต่ละสวอตช์ในสเกลที่สร้างขึ้นแสดงค่า hex, RGB และ HSL สีข้อความบนแต่ละสวอตช์ปรับเป็นขาวหรือเข้มโดยอัตโนมัติตามความสว่าง
วิธีใช้งาน
- เลือกสีพื้นฐานด้วยตัวเลือกสีหรือพิมพ์ค่า hex
- สเกล 10 ขั้นตอน (50-900) ถูกสร้างทันที ครอบคลุมช่วงความสว่างทั้งหมด
- ใช้ค่า hex, RGB หรือ HSL ในระบบการออกแบบหรือตัวแปร CSS ของคุณ
กรณีการใช้งาน
ทีมระบบการออกแบบสร้างสเกลสีครบชุดเป็นส่วนขยายการตั้งค่า Tailwind หรือ CSS custom properties นักพัฒนา frontend สร้างส่วนประกอบ UI ที่เข้าถึงได้
คำถามที่พบบ่อย
- สเกลนี้แตกต่างจาก "เฉดสี" ในเครื่องมืออื่นอย่างไร? — เครื่องมือนี้สร้างสเกลคงที่ 10 ขั้นตอน (50, 100, 200, … 900) ที่ยึดที่ค่าความสว่างเฉพาะ ตรงกับแบบแผนระบบการออกแบบทั่วไป
- การเปลี่ยนความอิ่มตัวส่งผลต่อสเกลหรือไม่? — ความอิ่มตัวของสีพื้นฐานจะคงอยู่ในทุกขั้นตอน มีเพียงความสว่างเท่านั้นที่เปลี่ยน
- ฉันสามารถใช้สีเหล่านี้โดยตรงใน Tailwind CSS ได้ไหม? — ได้ คัดลอกค่า hex จากแต่ละระดับเฉดสีและเพิ่มลงใน tailwind.config.js ภายใต้ theme.extend.colors โดยใช้หมายเลขเฉดสีเป็นคีย์