เครื่องมือฟรี ไม่ต้องสมัครสมาชิก

ดึงพาเลตต์สีจากเว็บไซต์ใดก็ได้

วาง URL เพื่อรับสีแบรนด์ สีข้อความ สีพื้นหลัง และสีเน้นของเว็บไซต์ พร้อมโค้ด hex เรียงตามการใช้งาน ฟรี ไม่ต้องสมัครสมาชิก ดูตัวอย่างฉบับเต็มของDESIGN.md ของ StripeและDESIGN.md ของ Linear หรือดูว่า DESIGN.md ให้อะไรเพิ่มเติม

ลอง

ใช้พาเลตต์นี้ในโค้ดของคุณ

เครื่องมือจัดกลุ่มสีตามบทบาท (พื้นหลัง พื้นผิว ข้อความ แบรนด์ สีเน้น และเส้นขอบ) และเรียงตามพื้นที่ที่แต่ละสีครอบคลุมบนหน้าเว็บ หากต้องการนำไปใช้ ให้ตั้งชื่อให้แต่ละบทบาทแทนการวางโค้ด hex กระจายไปทั่วสไตล์ เพื่อให้แก้ครั้งเดียวแล้วอัปเดตทุกจุดที่ใช้สีนั้น

1. ตั้งชื่อสีตามบทบาท ไม่ใช่ตามเฉดสี --color-text-muted ยังเข้าใจได้แม้หลังรีดีไซน์ แต่ --gray-600 ไม่ได้บอกว่าควรใช้ที่ไหน ใส่โค้ด hex ที่คุณคัดลอกมาแทน

:root {
  --color-brand: #635bff;
  --color-text: #0a2540;
  --color-text-muted: #425466;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f9fc;
  --color-border: #e3e8ee;
}

body { background: var(--color-surface); color: var(--color-text); }
a, .button-primary { color: var(--color-brand); }

2. ใช้ใน Tailwind ตัวแปรแต่ละตัวจะกลายเป็นชุด utility เช่น bg-surface, text-ink-muted และ border-line

/* app.css, Tailwind CSS v4 */
@theme {
  --color-brand: #635bff;
  --color-ink: #0a2540;
  --color-ink-muted: #425466;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f9fc;
  --color-line: #e3e8ee;
}

3. ตรวจสอบคู่สีที่ใช้ ข้อความเนื้อหาต้องมีอัตราส่วนคอนทราสต์กับพื้นหลังอย่างน้อย 4.5:1 และข้อความขนาดใหญ่ 3:1 เครื่องมือแสดงอัตราส่วนของสีข้อความหลักบนพื้นหลังของหน้า ตรวจสอบคู่สีอื่นที่คุณวางแผนจะใช้ก่อนเผยแพร่

สีเป็นเพียงชั้นหนึ่งของระบบดีไซน์ DESIGN.md เก็บสีไว้คู่กับสเกลตัวอักษร ระยะห่าง และกฎของคอมโพเนนต์ เพื่อให้เอเจนต์เขียนโค้ดของคุณใช้สีที่ถูกต้องในตำแหน่งที่ถูกต้อง

FAQ

คำถามเกี่ยวกับพาเลตต์สี

คำตอบสั้น ๆ เกี่ยวกับเครื่องมือดึงพาเลตต์สีจากเว็บไซต์ฟรี

หน้าเว็บจะถูกโหลดในเบราว์เซอร์จริง และวัดสีที่แสดงผลตามพื้นที่ที่แต่ละสีครอบคลุมบนหน้า แต่ละสีจะได้บทบาทที่คาดว่าน่าจะเป็นมากที่สุด ได้แก่ พื้นหลัง แผง ข้อความ แบรนด์ สีเน้น หรือเส้นขอบ

พาเลตต์แสดงเฉพาะสีที่หน้าเว็บใช้จริง เรียงตามพื้นที่ครอบคลุม และจำกัดไว้ที่สิบสองสี สีในภาพหรือวิดีโอ สีที่ปรากฏเฉพาะเมื่อ hover และสีที่ใช้ในหน้าอื่นของเว็บไซต์จะไม่ถูกนับ

ไม่ได้ เครื่องมืออ่านหน้าเว็บในธีมที่ผู้เข้าชมใหม่เห็นเป็นค่าเริ่มต้น ซึ่งมักเป็นธีมสว่าง เว็บไซต์ที่เป็นธีมมืดโดยค่าเริ่มต้นจะได้ผลเป็นสีมืด DESIGN.md ฉบับเต็มครอบคลุมโหมดมืดเมื่อเว็บไซต์มีโหมดนี้

ส่งออกเป็นไฟล์ไม่ได้ แต่คุณคัดลอกโค้ด hex ได้ เลือกแถบสีเพื่อคัดลอกทีละสี หรือคัดลอกทั้งหมดในครั้งเดียว บรรทัดละหนึ่งสี

ได้ ทีละพิกเซล ใน Chrome หรือ Edge ให้คลิกขวาที่องค์ประกอบ เลือก Inspect แล้วคลิกสี่เหลี่ยมสีข้างสีใดก็ได้ในแผง Styles ตัวเลือกสีมีเครื่องมือดูดสีที่อ่านสีจากจุดใดก็ได้บนหน้า Firefox มีเครื่องมือดูดสีแบบเดียวกันในแถบเครื่องมือ Inspector

เครื่องมือนี้แสดงเฉพาะสี ส่วน DESIGN.md ครอบคลุมสีพร้อมบทบาท สเกลตัวอักษร ระยะห่าง และกฎของคอมโพเนนต์ของเว็บไซต์ ในไฟล์เดียวที่เอเจนต์เขียนโค้ดของคุณทำตามได้

เครื่องมือฟรีอื่น ๆ

ดูเครื่องมือฟรีทั้งหมด

ต้องการระบบดีไซน์ทั้งหมดใช่ไหม

รับ DESIGN.md ที่มีสี สเกลตัวอักษร ระยะห่าง และคอมโพเนนต์ของเว็บไซต์ใดก็ได้ พร้อมใช้กับเอเจนต์เขียนโค้ดของคุณ

รับ DESIGN.md