ดู Tailwind color palette ทั้งหมด คลิกเพื่อคัดลอก
ดีไซน์คลิกสีใดก็ได้เพื่อคัดลอก
เรียกดูตระกูลสีที่แสดงในหน้า (แดง, น้ำเงิน, emerald เป็นต้น)
คลิก swatch สีใดๆ เพื่อคัดลอกค่า
สลับรูปแบบการคัดลอกระหว่าง HEX, RGB และชื่อ class Tailwind
ใช้กล่องค้นหาเพื่อหาตระกูลสีเฉพาะได้อย่างรวดเร็ว
อ้างอิง Tailwind color token และชื่อ class ใดๆ ได้อย่างรวดเร็วโดยไม่ต้องสลับไปที่เอกสารระหว่างการพัฒนา
แชร์ชื่อ class Tailwind ที่แน่นอนกับนักพัฒนาเมื่อส่งมอบงาน Figma design เพื่อให้สีถูก implement อย่างสม่ำเสมอ
เปรียบเทียบทุกโทนในตระกูลเคียงข้างกันเพื่อเลือกโทนที่ถูกต้องสำหรับพื้นหลัง ข้อความ เส้นขอบ และ hover state
คัดลอกค่า HEX หรือ RGB เพื่อใช้ใน design token file, Styled Components หรือ CSS-in-JS solution ใดๆ นอก Tailwind
Tailwind Colors ให้คุณเรียกดูชุดสี Tailwind CSS ทั้งหมด — ทุกโทนสีตั้งแต่ 50 ถึง 950 — และคัดลอกสีใดๆ เป็น HEX, RGB หรือชื่อ class Tailwind ในคลิกเดียว
ค้นหาและแปลงรหัสสี HEX, RGB, HSL สำหรับงานดีไซน์
สร้าง CSS gradient แบบ linear หรือ radial เลือก 2-5 สี พร้อมคัดลอกโค้ด
ออกแบบ CSS box-shadow พร้อม preview แบบสด รองรับหลาย layer
ออกแบบมุมโค้งแต่ละด้านของกล่อง พร้อมแสดงผลและโค้ด
สร้างชุดสีที่เข้ากันจากสีหลัก 1 สี
ตรวจสอบ safe zone สำหรับ TikTok, Reels และ Shorts เพื่อให้คอนเทนต์ไม่โดนบัง