Color Palette Generator
เลือกสีพื้นฐานแล้วรับพาเลตสีไล่ระดับจากอ่อนไปเข้มได้ทันที พร้อมคัดลอกไปใช้ในดีไซน์ซิสเต็มของคุณ
🔒 ประมวลผลในเบราว์เซอร์ของคุณ
Loading…
วิธีใช้งาน
- พิมพ์รหัสสีฮ็กซ์ลงในช่อง "สีพื้นฐาน" หรือคลิกที่ตัวเลือกสีเพื่อเลือกสีด้วยสายตา
- ทันทีที่ระบบตรวจพบสีที่ถูกต้อง พาเลตสีแบบเต็มจะปรากฏขึ้นด้านล่างโดยอัตโนมัติ — ไม่ต้องกดปุ่มใดๆ
- พาเลตจะไล่ระดับตั้งแต่โทนสว่างมากไปจนถึงโทนเข้มมาก โดยทั้งหมดมีเฉดสี (hue) เดียวกับสีพื้นฐานของคุณ
- คลิกที่สวอตช์ใดก็ได้เพื่อคัดลอกรหัสฮ็กซ์ไปยังคลิปบอร์ดของคุณ — ข้อความยืนยัน "คัดลอกแล้ว!" สั้นๆ จะแจ้งให้ทราบว่าสำเร็จแล้ว
คุณสมบัติ
- สร้างสเกลสีไล่ระดับ 9 ขั้นตอนจากอ่อนไปเข้มได้อย่างราบรื่นจากสีพื้นฐานใดก็ได้
- คงเฉดสี (hue) และความอิ่มตัว (saturation) เดียวกันไว้ในทุกระดับ เหมือนกับสเกลสีของ Tailwind
- รวมสีพื้นฐานที่คุณเลือกไว้อย่างแม่นยำในพาเลต ไม่ใช่แค่ค่าประมาณ
- คัดลอกรหัสฮ็กซ์ของสวอตช์ใดก็ได้ในคลิกเดียว
- ทำงานฝั่งไคลเอนต์ทั้งหมด — สีของคุณไม่มีวันออกจากเบราว์เซอร์
คำถามที่พบบ่อย
เครื่องมือนี้ส่งสีของฉันไปที่ไหนหรือไม่?
ไม่ พาเลตทั้งหมดถูกสร้างขึ้นด้วยคณิตศาสตร์ JavaScript ธรรมดาโดยตรงในเบราว์เซอร์ของคุณ — ไม่มีการอัปโหลดหรือส่งข้อมูลไปยังเซิร์ฟเวอร์แต่อย่างใด
ระดับสีถูกคำนวณอย่างไร?
เครื่องมือแปลงสีพื้นฐานของคุณเป็น HSL จากนั้นคงค่าเฉดสีและความอิ่มตัวไว้คงที่ ในขณะที่ไล่ค่าความสว่าง (lightness) อย่างสม่ำเสมอจากสว่างมากไปจนถึงเข้มมาก สีพื้นฐานที่แน่นอนของคุณจะถูกวางไว้ตรงกลางสเกล
ฉันสามารถใช้พาเลตเหล่านี้ใน Tailwind หรือดีไซน์ซิสเต็มอื่นๆ ได้หรือไม่?
ได้ พาเลตนี้ใช้แนวคิดเดียวกับสเกลสี 50/100/.../900 ของ Tailwind — การไล่ระดับจากอ่อนไปเข้มของเฉดสีเดียว — ดังนั้นคุณสามารถคัดลอกรหัสฮ็กซ์ไปใช้ในธีมหรือตัวแปร CSS ของคุณได้โดยตรง
ฉันสามารถป้อนรูปแบบสีใดได้บ้าง?
รหัสฮ็กซ์เท่านั้น จะมีเครื่องหมาย # นำหน้าหรือไม่ก็ได้ แบบย่อ 3 หลัก (เช่น #abc) หรือ 6 หลัก (เช่น #3b82f6) ใช้ตัวเลือกสีหากคุณต้องการเลือกด้วยสายตาแทน
ทำไมฉันถึงเห็นข้อความแสดงข้อผิดพลาด?
ข้อความที่คุณพิมพ์ไม่ตรงกับรูปแบบสีฮ็กซ์ที่ระบบรู้จัก ตรวจสอบให้แน่ใจว่ามีลักษณะคล้ายกับ #3b82f6 (หรือ 3b82f6 หรือแบบย่อ #abc)