Go Toolstack

ตัวแปลงและสร้างเฉดสี Tailwind CSS

สร้างจานสีและเฉดสี 50 ถึง 950 สำหรับการกำหนดค่า Tailwind CSS จากรหัสสี HEX ใดๆ

ตัวแปลงและสร้างเฉดสี Tailwind CSS

สร้างจานสีและเฉดสี 50 ถึง 950 สำหรับการกำหนดค่า Tailwind CSS จากรหัสสี HEX ใดๆ

วิธีการทำงาน

1
Set Criteria & Options
Select length, format, or generation parameters for your output.
2
Generate Instantly
Generate secure, random, or custom data entirely in your browser.
3
Copy or Export
Copy the generated output to your clipboard or download the file.

Discover more client side utilities in this category

ศูนย์รูปภาพ & การออกแบบ • เวิร์กโฟลว์และคู่มือเปรียบเทียบ

สำรวจเครื่องมือรูปภาพ & การออกแบบทั้งหมด ขีดจำกัดของเบราว์เซอร์ และคู่มือการเลือกเครื่องมือ

สำรวจศูนย์ →
จัดรูปแบบ ตรวจสอบ และทำความสะอาด JSON

จัดรูปแบบ บีบอัด และตรวจสอบข้อมูล JSON ด้วยความแม่นยำ 64-bit และกฎ JSON Schema (Draft-07 / 2020-12)
เข้ารหัสและถอดรหัส Base64

แปลงข้อความและข้อมูลระหว่างข้อความธรรมดากับ Base64 รองรับ UTF-8 ภาษาไทย และรูปแบบ URL-Safe
จัดรูปแบบ SQL

จัดรูปแบบแบบสอบถาม SQL ปรับเยื้องและจัดระเบียบคำสั่ง รองรับหลายไดอะเลกต์

คู่มือบล็อกที่เกี่ยวข้อง

คู่มือทางเทคนิค การแก้ไขปัญหา และขั้นตอนการปฏิบัติที่ดีที่สุด

รูปภาพ & การออกแบบ • ~4 นาทีในการอ่าน

เปรียบเทียบการบีบอัดรูปภาพ WebP, AVIF, JPEG และ PNG: คุณภาพ ขนาดไฟล์ และการประมวลผลจริง | GoToolstack

วิเคราะห์เชิงเปรียบเทียบรูปแบบการบีบอัดรูปภาพ WebP, AVIF, JPEG และ PNG ทำความเข้าใจความแตกต่างระหว่าง Lossy และ Lossless การประมวลผลด้วย HTML5 Canvas และ WebAssembly ในเบราว์เซอร์

อ่านคู่มือ →
รูปภาพ & การออกแบบ • ~4 นาทีในการอ่าน

วิธีตรวจดูและลบข้อมูล EXIF ในภาพถ่าย: ปกป้องตำแหน่ง GPS และข้อมูลส่วนบุคคลก่อนแชร์ออนไลน์ | GoToolstack

วิธีตรวจสอบและลบข้อมูลเมทาดาตา EXIF ที่ฝังอยู่ในรูปภาพ รวมถึงพิกัดดาวเทียม GPS รุ่นกล้อง และวันเวลาถ่ายภาพ ด้วยการเรนเดอร์ใหม่บน Canvas ในเบราว์เซอร์เพื่อความปลอดภัย

อ่านคู่มือ →
ศูนย์ความรู้และแนวคิด

เครื่องมือสร้างชุดสี Tailwind CSS คำนวณพาเลตต์ 50-950 และส่งออกไฟล์คอนฟิก

ระบบชุดสีของ Tailwind CSS ใช้ระดับเฉดสี 11 ขั้นตั้งแต่ 50 (สว่างที่สุด) ไปจนถึง 950 (เข้มที่สุด) เพื่อให้การปรับแต่งสีในธีม สวิตช์ปุ่ม และตัวอักษรมีความสอดคล้องกันทั่วทั้งระบบ การสร้างเฉดสีที่ถูกต้องและดูเป็นธรรมชาติด้วยตนเองเป็นเรื่องที่ใช้เวลา

เครื่องมือนี้ช่วยให้คุณใส่สีหลักของแบรนด์ (Base Color) เพียงสีเดียว แล้วคำนวณสเกลเฉดสี 50 ถึง 950 ให้โดยอัตโนมัติผ่านการแปลงปริภูมิสีแบบรับรู้ (Perceptual Color Space) ให้ความอิ่มตัวและความสว่างที่สมดุล พร้อมส่งออกโค้ดสำหรับไฟล์ tailwind.config.js หรือ CSS Variables ได้ทันที

สูตรและหลักการทางเทคนิค

การประมาณค่าเฉดสี: รหัสสี Hex ➔ ปริภูมิสีรับรู้ (HSL/OKLCH) ➔ การปรับส่วนโค้งความสว่าง [50: สว่าง 97% ➔ 500: สีหลัก ➔ 950: สว่าง 12%] ➔ Hex

แปลงสีหลักของแบรนด์เข้าสู่เส้นโค้งความสว่างที่มีความสอดคล้องทางการมองเห็น สร้าง 11 ลำดับขั้นสีที่คงความสดและความอิ่มตัวของสีอย่างสม่ำเสมอ

ข้อแนะนำและวิธีปฏิบัติที่ถูกต้อง

  • กำหนดเฉดสี 500 ให้ตรงกับสีหลักของแบรนด์ (Brand Primary): สเกลมาตรฐานของ Tailwind มักใช้ระดับ 500 หรือ 600 เป็นสีหลักของปุ่มกดและลิงก์
  • ใช้เฉดสี 50 และ 100 สำหรับพื้นหลังและสถานะ Hover อ่อนๆ: เฉดสีสว่างเหมาะสำหรับพื้นหลังของการ์ด แถบไฮไลต์ หรือพื้นผิวของตาราง
  • ใช้เฉดสี 800, 900, 950 สำหรับตัวหนังสือและโหมดมืด (Dark Mode): เฉดสีเข้มให้ความเปรียบต่างสูงสำหรับเนื้อหาตัวหนังสือ และสามารถนำไปใช้เป็นพื้นผิวพื้นหลังในธีมมืดได้อย่างลงตัว
  • ผสานเข้ากับ tailwind.config.js อย่างเป็นระบบ: นำโค้ดอ็อบเจกต์สีที่ส่งออกไปวางใต้ส่วนขยาย theme.extend.colors ในไฟล์คอนฟิกเพื่อใช้งานผ่านคลาสยูทิลิตี้ เช่น bg-brand-500

คำถามที่พบบ่อย (FAQ)

เหตุใดจึงควรใช้สเกล 11 ขั้นของ Tailwind แทนที่จะสุ่มเฉดสีเอง?
เพราะสเกล 50-950 ได้รับการออกแบบให้มีความสัมพันธ์ของความเปรียบต่าง (Contrast) ที่เป็นระบบ ช่วยให้ดีไซเนอร์และนักพัฒนาเลือกใช้คู่สีสำหรับสถานะต่างๆ (Hover, Focus, Disabled) ได้อย่างคงเส้นคงวา
เหตุใดสีที่สว่างมากหรือเข้มมากจึงมักดูซีดหรือเพี้ยนในเครื่องมือทั่วไป?
เพราะการคำนวณเฉดสีในระบบ RGB ธรรมดาไม่ได้คำนึงถึงการรับรู้สายตามนุษย์ เครื่องมือนี้ใช้การปรับความสว่างแบบรับรู้ (Perceptual lightness) ช่วยรักษาโทนสีและเฉดเดิมไว้ได้ดีกว่า
สามารถนำโค้ดสีไปใช้กับ CSS Variables ปกติได้หรือไม่?
ได้ เครื่องมือมีตัวเลือกส่งออกเป็น CSS Custom Properties (--color-brand-500: ...) สำหรับโปรเจกต์ที่ไม่ได้ใช้ Tailwind CSS
เครื่องมือนี้ทำงานแบบออฟไลน์หรือไม่?
ทำงานแบบออฟไลน์ 100% การคำนวณและแปลงค่ารหัสสีทั้งหมดเกิดขึ้นบนเบราว์เซอร์ของคุณ