tool hub ชุดเครื่องมือ

Color Palette

Color Palette — ทำงานในเบราว์เซอร์ ไม่บันทึกข้อมูล

ทำงานในเบราว์เซอร์ ไม่ต้องสมัคร ใช้ฟรี


พาเลตสีที่เข้ากัน

กรอกค่า แล้วกดคำนวณ

วิธีใช้

  1. ใส่สีหกหลักที่ขึ้นต้นด้วย # ในHEX ฐาน ค่าเริ่มต้นคือ #3b82f6
  2. ในฮาร์โมนี เลือกโทนใกล้เคียง สีตรงข้าม ไตรแอด หรือโทนสีเดียว
  3. กดสร้าง เพื่อแสดงตารางสวอตช์ 5 สี
  4. คัดลอกรายการ HEX เพื่อวางรหัสในเครื่องมือออกแบบ
  5. จอนี้ไม่รับประกันคอนทราสต์ข้อความ ให้ตรวจแยกด้วยตัวตรวจคอนทราสต์ WCAG รีเซ็ต คืนสีเริ่มต้น

แนวคิดหลัก

การสร้างจานสีดึง 5 สีจาก HEX แบรนด์หนึ่งสำหรับสีเน้น UI และธีมสไลด์ บนวงล้อ HSL ใกล้เคียงใช้ฮิวใกล้ สีตรงข้ามคือด้านตรงข้าม ไตรแอดก้าวทีละ 120° และโทนสีเดียวฮิวเดียวกันเปลี่ยนความสว่าง ไม่ครอบคลุม CMYK และอัลฟา (ความโปร่งใส) ทดลองจาน 5 สีแบบใกล้เคียง สีตรงข้าม ไตรแอด และโทนสีเดียวจาก HEX หลักหนึ่ง

การเข้าถึง (คอนทราสต์ความสว่าง) ไม่ถูกปรับ จับคู่พื้นหลังกับเนื้อหาด้วยเครื่องมือคอนทราสต์ WCAG สำหรับ AA/AAA ผลเป็นข้อมูลอ้างอิงออกแบบ ค่าสีไม่ถูกส่งไปเซิร์ฟเวอร์ หมุนเฉพาะมุมฮิว HSL จึงไม่คำนวณอัตราส่วนคอนทราสต์ ยืนยันสีเนื้อหาด้วยการตรวจคอนทราสต์ WCAG ลำดับที่ปลอดภัยคือตรวจ AA ด้วยคอนทราสต์ WCAG ก่อนใช้สีบนข้อความเนื้อหาหรือปุ่ม

ตัวอย่าง

ฐาน #3b82f6 และฮาร์โมนีใกล้เคียงให้ห้าช่องน้ำเงินติดกันที่คัดลอกเป็นรายการ HEX ได้ สีตรงข้ามผสมสีคอนทราสต์ฝั่งส้ม โทนสีเดียวคือห้าขั้นสว่าง–มืดของน้ำเงินเดียวกัน เสมอห้าสี สีตรงข้าม #ef4444 ผสมสีฝั่งทีล โทนสีเดียวคือขั้นความสว่างของแดงเดียวกัน คัดลอกรายการ HEX ใส่เครื่องมือออกแบบ ไตรแอด #22c55e วางสามทิศ 120° ทั่วห้าช่อง คัดลอกรายการ HEX ใส่เครื่องมือออกแบบ

ที่เกี่ยวข้อง: คอนทราสต์ WCAG · ตัวแปลงสี

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

จานสีรับประกันคอนทราสต์ WCAG หรือไม่?

ไม่ ตรวจคอนทราสต์แยกด้วยเครื่องมือคอนทราสต์ WCAG คู่ปุ่มกับเนื้อหามักไม่ผ่าน—อย่าเชื่อจานอย่างเดียว ข้อความสว่างบนพื้นสว่างมักไม่ผ่าน

มีจานพิมพ์ CMYK หรือไม่?

อิง HEX/RGB การแปลงพิมพ์เป็นกระบวนการแยก พิมพ์ CMYK ต้องแปลงแยก

ใช้ HEX โปร่งใส (อัลฟา) หรือไม่?

ไม่ เฉพาะ #RRGGBB HEX อัลฟา 8 หลักอาจถูกตัดหรือผิดพลาด อย่าใช้ HEX ที่มีอัลฟา

จานมีกี่สี?

เสมอ 5 สี เสมอห้าช่อง ไม่มีตัวเลือกเปลี่ยนจำนวน

สีฐานถูกส่งไปเซิร์ฟเวอร์หรือไม่?

ไม่ การคำนวณทำงานเฉพาะในเบราว์เซอร์ HEX ฐานไม่ถูกเก็บ

ใกล้เคียง สีตรงข้าม และไตรแอดต่างกันอย่างไร?

ใกล้เคียงคือฮิวใกล้ สีตรงข้ามคือด้านตรงข้าม ไตรแอดคือสามชิ้นวงล้อเท่ากัน โทนสีเดียวเปลี่ยนเฉพาะความสว่าง ใกล้เคียงคือฮิวติด ไตรแอดคือ 120° โทนสีเดียวคงฮิวและเปลี่ยนความสว่าง

Color Palette ภาพปก
ข้อมูลไม่ถูกส่งไปยังเซิร์ฟเวอร์ และจะหายเมื่อปิดหน้า

ตรวจทานล่าสุด: 2026-09-04