ตัวสร้างจานสี

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

3b82f6

e24956

3ba01b

วิธีใช้ ตัวสร้างจานสี

สร้างจานสีสามแบบ: กฎความกลมกลืนจากสีฐาน จานสีสุ่มที่ล็อกแล้วสุ่มใหม่ได้ หรือสเกลเฉด 11 ขั้นจาก 50 ถึง 950 แบบ Tailwind สีถูกคำนวณใน OKLCH และทุกจานสีส่งออกเป็น CSS, Tailwind v3 หรือ v4, JSON, .gpl หรือ .ase

  1. 1

    เลือกโหมด: ความกลมกลืน สุ่ม หรือเฉด

  2. 2

    สำหรับความกลมกลืนหรือเฉด ตั้งสีฐาน แล้วเลือกกฎ หรือชื่อสีและขั้นที่จะเก็บสีฐานไว้

  3. 3

    สำหรับสุ่ม คลิกสร้างหรือกด Space แล้วล็อกสีที่ต้องการเก็บก่อนสร้างอีกครั้ง

  4. 4

    ชี้สีแล้วคลิกไอคอนคัดลอก ในความกลมกลืนคุณทำให้มันเป็นสีฐานใหม่ได้ด้วย

  5. 5

    ใต้ส่งออก เลือก HEX, CSS, Tailwind v3, Tailwind v4 หรือ JSON แล้วคัดลอกโค้ด หรือดาวน์โหลด .gpl หรือ .ase

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

ทำไมความกลมกลืนถึงคำนวณใน OKLCH?

ฮิวถูกหมุนใน OKLCH ดังนั้นทุกสีคงความสว่างและความสดที่รับรู้ของสีฐาน การหมุนใน HSL จะทำให้สีเหลืองดูสว่างกว่าสีน้ำเงินมาก

เฉดจาก 50 ถึง 950 ถูกสร้างอย่างไร?

ความสว่างตามเส้นโค้งที่ใกล้จานสีของ Tailwind เอง และโครมาสูงสุดราว 500–600 สีฐานของคุณถูกเก็บตรงที่ขั้นของมัน อัตโนมัติเลือกขั้นที่ใกล้ความสว่างที่สุด

กลับไปจานสีสุ่มก่อนหน้าได้หรือไม่?

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

จานสีมีสีได้กี่สี?

จานสีสุ่มมี 2 ถึง 10 สี (ใช้ปุ่ม − และ +) กฎความกลมกลืนให้จำนวนคงที่ เช่น 2 สำหรับสีคู่ตรงข้าม และ 5 สำหรับสีข้างเคียงหรือสีเดียว และเฉดให้ 11 เสมอ

การส่งออก Tailwind v4 มีหน้าตาอย่างไร?

บล็อก @theme ของตัวแปร --color-* พร้อมวางใน CSS ของคุณ เฉดถูกเขียนเป็นค่า oklch() ชื่อเช่น --color-brand-500 โหมดอื่นใช้ HEX