THAI.DEV / COLOR / TAILWIND

สร้างชุดสีและทดลอง UI

เริ่มจากสีหนึ่งสี เห็นภาพทั้งระบบ แล้วนำโค้ดไปใช้ต่อ

เปิด Tailwind Colors →

ตัวอย่าง: ออกแบบแดชบอร์ดให้ทีม

คุณกำลังทำเว็บจัดการงานสำหรับทีมเล็ก ๆ และอยากให้ปุ่มหลักอ่านง่ายทั้งบนพื้นขาวและโหมดมืด เริ่มจากสีน้ำเงินของแบรนด์เป็น Primary เพิ่มสีรองสำหรับข้อมูลสำคัญ แล้วเปิด Dashboard, Forms และ Components เพื่อลองดูปุ่ม ช่องกรอก และข้อความในบริบทเดียวกัน ก่อนคัดลอกโค้ดไปใส่โปรเจกต์

เลือกสีหลักและสร้างเฉด

1. ใส่ HEX เช่น #0066FF หรือใช้ตัวเลือกสี รองรับ HEX 3 และ 6 หลัก
2. ระบบสร้างเฉด 50–950 โดยเก็บสีที่เลือกไว้ที่ 500 คลิกเฉดใดก็ได้เพื่อคัดลอก HEX
3. เปลี่ยนชื่อชุดสีเป็นชื่อที่ต้องการใช้ในโค้ด เช่น primary หรือ brand โดยใช้ a-z, 0-9 และ -
4. เพิ่มได้สูงสุด 3 ชุดสี ใช้ปรับสีหลัก สีรอง และสีเน้นในตัวอย่าง

สุ่มสีและปรับแต่ง

เลือก Random, Analogous, Complementary หรือ Triadic แล้วกดสร้างชุดสี ตัวเลือก harmony เห็นความสัมพันธ์ชัดขึ้นเมื่อมีหลายชุดสี ปุ่มล็อกสีช่วยเก็บสีเดิมขณะสุ่ม ส่วนชุดสีสำเร็จรูปจะแทนที่ชุดสีทั้งหมด ใช้ย้อนกลับหรือทำซ้ำเพื่อเปรียบเทียบได้สูงสุด 60 สถานะ

เปิดการปรับ Hue, Saturation และ Temperature ใต้แต่ละชุด การปรับเป็นค่าจากสีต้นทางจึงไม่สะสมความคลาดเคลื่อนเมื่อเลื่อนกลับ รีเซ็ตจะล้างเฉพาะการปรับแต่งนั้น

ทดลองบน UI mockups

ตัวอย่าง Dashboard, Forms และ Components เปลี่ยนตามสีทันที ทดลองโหมด Light / Dark, Style, Base color, Font, Heading, Radius, Chart color และ Menu accent ตัวเลือกเหล่านี้มีผลเฉพาะ mockups ฟอนต์และขนาดตัวอักษรของ ThaiDev ยังคงเดิม

กดวงกลมข้างตัวเลือกเพื่อล็อกก่อนสุ่มดีไซน์ ทดสอบ checkbox, เมนู ปฏิทิน หรือฟอร์มได้ ข้อมูลเป็นข้อมูลสาธิต ไม่มีการสมัครสมาชิก ซื้อสินค้า หรือส่งข้อมูลไปเซิร์ฟเวอร์

นำโค้ดไปใช้

• Tailwind v4: คัดลอก @theme ไปไว้หลัง @import "tailwindcss"; ใน CSS หลัก
• Tailwind v3: รวม theme.extend.colors ใน tailwind.config.js เดิม โดยเก็บ content และ plugins ไว้
• shadcn/ui theme: ส่งออก semantic tokens ทั้ง :root และ .dark สำหรับโปรเจกต์ shadcn/ui ที่ใช้ Tailwind v4 พร้อม radius และ font stack ต้องโหลดฟอนต์ที่เลือกในโปรเจกต์ปลายทางเอง
• JSON: ส่งออกชุดสี 50–950
• Design preset JSON: เก็บสีและตัวเลือก UI ทั้งหมด นำกลับด้วย Import preset

เลือก HEX, OKLCH, RGB หรือ HSL ได้ การส่งออกชุดสีและ semantic tokens ไม่ได้ส่งออก HTML ของ mockups หรือ component library ส่วน Style, Chart color และ Menu accent ของตัวอย่างจะเก็บใน Design preset JSON

บันทึกและแชร์

การเปลี่ยนแปลงบันทึกในเบราว์เซอร์เมื่อ localStorage พร้อมใช้งาน กดคัดลอกลิงก์เพื่อแชร์สีและตัวเลือก UI หรือดาวน์โหลด preset สำรอง ลิงก์ที่แชร์ไม่รวมข้อความที่กรอกในฟอร์มสาธิต

เฉดสีและความอ่านง่าย

เฉดสีของ ThaiDev สร้างด้วยการผสมสีหลักกับขาวและดำ ไม่ใช่ชุดสีมาตรฐาน Tailwind หรือการรับรองว่าเหมือนอัลกอริทึมของ Coolors ทุกสี ตัวตรวจ contrast ใต้ตัวเลือก UI แสดงอัตราส่วนสีข้อความและพื้นหลังของปุ่ม Primary เท่านั้น ควรตรวจข้อความและองค์ประกอบอื่นแยกก่อนนำไปใช้งานจริง

เริ่มฟรี แล้วแบ่งปันสิ่งที่ได้

เครื่องมือนี้เปิดให้ลองและส่งออกชุดสีได้ฟรีโดยไม่ต้องสมัครสมาชิก หากช่วยให้งานของคุณเร็วขึ้น ส่งลิงก์ Tailwind Colors ให้เพื่อนร่วมทีมลองปรับธีมด้วยกัน และดูเครื่องมืออื่นของชุมชนที่ เกี่ยวกับ ThaiDev

แหล่งแรงบันดาลใจ

Coolors Tailwind Colors สำหรับการสำรวจชุดสี และ shadcn/ui Create สำหรับการทดลองธีม UI เครื่องมือนี้เป็นการพัฒนาของ ThaiDev เอง ไม่มีการเชื่อมต่อบัญชีหรือใช้บริการสร้างโปรเจกต์ของทั้งสองเว็บ