สร้างสีพาเลต Tailwind

สร้างพาเลตระดับสี 50–950 จำนวน 11 ระดับของ Tailwind CSS และโค้ดการตั้งค่าจากรหัส Hex สีเดียว

ข้อมูลอัปเดตเพิ่มเครื่องสร้างสี Tailwind สร้างสี 11 ระดับและโค้ดการตั้งค่าจาก 1 สีดูข้อมูลการอัปเดต

คุณสมบัติ

สร้างระดับสี 11 ระดับจากสี 1 สีโดยอัตโนมัติ

วางสีที่ป้อนไว้ที่ 500 และคำนวณความเข้มเบาของสี 50–950

รองรับทั้งรูปแบบ v3 และ v4

เปลี่ยนระหว่างรูปแบบการเขียน config และ @theme ผ่านแท็บ

คัดลอกรหัส Hex ตามระดับสี

คัดลอกโค้ดสีทีละสีด้วยปุ่มสำหรับตัวอย่างสีแต่ละรายการ

อัปเดตพาเลตพร้อมกับการป้อนข้อมูล

ไม่จำเป็นต้องใช้ปุ่มรัน คุณสามารถลองสีและเปรียบเทียบได้ขณะกำลังทำ

วิธีใช้

ป้อนรหัส Hex ของสีพื้นฐาน

ป้อนรหัส Hex หรือคลิกตัวอย่างสีที่ด้านซ้ายเพื่อเลือกสีจากตัวเลือกสี

ป้อนชื่อสีตามต้องการ

ป้อนชื่อสีในภาษาอังกฤษตัวเล็ก ถ้าปล่อยว่างจะใช้ primary

ตรวจสอบตัวอย่างสีระดับสี 11 ระดับ

ตรวจสอบตัวอย่างสี 50–950 และรหัส Hex จากนั้นคัดลอกทีละสีด้วยปุ่มคัดลอกตัวอย่าง

เลือกรูปแบบผลลัพธ์และคัดลอก

เลือก v3 หรือ v4 แล้วคัดลอกโค้ดไปวาง tailwind.config.js หรือไฟล์ CSS ของคุณ

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

สร้างความเข้มเบาของสีแบรนด์

รวมความเข้มเบาที่ใช้สำหรับโฮเวอร์ปุ่มและพื้นหลังจากสีแบรนด์เพียงสีเดียว

เพิ่มสีที่ไม่อยู่ในพาเลตมาตรฐาน

เพิ่มสีเฉพาะของโครงการที่ไม่มีในสีมาตรฐาน Tailwind เป็นระดับสี 11 ระดับในไฟล์การตั้งค่า

สร้างการตั้งค่า @theme ของ v4

จดตัวแปร CSS ของ Tailwind v4 ทั้งหมดจากสีหลักของเว็บไซต์

เตรียมการนำเสนอสำหรับการพัฒนา

เตรียมโค้ดระดับสี 11 ระดับสำหรับการนำเสนอและโอนไปยังเครื่องมือออกแบบด้วย

ความรู้พื้นฐาน

สิ่งที่แสดงโดย 50–950 ของ Tailwind

สีของ Tailwind CSS แสดงความสว่างด้วยตัวเลข 11 ขั้นตอน โดยที่ 50 เป็นสีที่อ่อนที่สุด 950 เป็นสีที่เข้มที่สุด และ 500 เป็นสีอ้างอิง ตัวเลขใช้ต่อท้ายชื่อคลาส เช่น 「bg-primary-500」 หรือ 「text-primary-700」

ขั้นตอน 50–300：ขั้นตอน 50–300 เป็นสีที่สว่างซึ่งมักใช้สำหรับสีพื้นหลังและการเติมสีเบา เป็นสีที่อ่านได้ง่ายแม้เมื่อวางข้อความเข้มไว้ด้านบน
ขั้นตอน 600–950：ขั้นตอน 600–950 เป็นสีที่มืดซึ่งมักใช้สำหรับสถานะโฮเวอร์ของปุ่มและสีตัวอักษรของหัวข้อ เป็นสีที่มองเห็นได้ชัดแม้บนพื้นหลังสีขาว

ความแตกต่างในวิธีการกำหนดสีระหว่าง v3 และ v4

ใน Tailwind CSS v3 สีจะถูกกำหนดในJavaScriptของ tailwind.config.js ใน v4 สีจะถูกกำหนดเป็นตัวแปร CSS ภายใน @theme ของไฟล์ CSS ไม่ว่าคุณจะใช้วิธีการเขียนแบบใด สีที่กำหนดสามารถใช้ได้ด้วยชื่อคลาส เช่น 「bg-primary-500」

วิธีการของ v3：วิธีการของ v3 คือการเขียน 「primary: { 500: '#3B82F6' }」 ภายใน theme.extend.colors โดยสร้างชื่อสีและขั้นตอนเป็นโครงสร้างหลายระดับ
วิธีการของ v4：วิธีการของ v4 คือการเขียน 「--color-primary-500: #3B82F6;」 ภายใน @theme โดยเชื่อมชื่อสีและขั้นตอนด้วยเครื่องหมายยัติภังค์เป็นชื่อตัวแปร