เครื่องมือนักพัฒนา (Dev Tools)

เครื่องมือเลือกสี & Contrast

โปรแกรมเลือกสีและแปลงรหัสสี HEX, RGB, HSL สร้างชุดสีคู่ตรงข้าม (Complementary) ชุดสีกลมกลืน และตรวจสอบความคมชัด Contrast ตามมาตรฐาน WCAG ฟรี

ประมวลผลในเบราว์เซอร์ ข้อมูลที่กรอกไม่ถูกส่งไปยังเซิร์ฟเวอร์

แชร์เครื่องมือนี้

แชร์ผ่าน

ตัวเลือกและแปลงรหัสสี

สีปัจจุบันที่เลือก

#3B82F6

HEX Color

RGB Color

HSL Color

ชุดสีกลมกลืน & มาตรฐานความคมชัด (WCAG)

1. สีคู่ตรงข้าม (Complementary)

2. สีข้างเคียง (Analogous)

3. สีสามเส้า (Triadic)

ตรวจสอบความคมชัดข้อความ (WCAG Contrast)

ตัวอย่างข้อความContrast: 3.5:1--

ตัวอย่างข้อความContrast: 6.0:1--

ทฤษฎีคู่สีและการเลือกใช้สีในงานกราฟิกและเว็บไซต์

สีคู่ตรงข้าม (Complementary): เหมาะสำหรับจุดเด่น ปุ่ม Call-to-Action หรือการเน้นข้อความสำคัญ
สีข้างเคียง (Analogous): ให้ความรู้สึกกลมกลืน สบายตา เหมาะสำหรับพื้นหลังและธีมหลักของเว็บไซต์
สีสามเส้า (Triadic): ให้ความสดใส มีชีวิตชีวา มักใช้ในงานภาพประกอบ อินโฟกราฟิก และการออกแบบแบรนด์

วิธีใช้งาน

คลิกเลือกสีจาก Color Picker หรือพิมพ์รหัสสี HEX, RGB หรือ HSL ในช่องกรอก
ระบบจะแปลงค่ารหัสสีเป็นทุกรูปแบบพร้อมปุ่มคัดลอกในคลิกเดียว
ดูชุดสีกลมกลืน (Harmonies): สีคู่ตรงข้าม (Complementary), สีข้างเคียง (Analogous) และสีสามเส้า (Triadic)
ตรวจสอบระดับความคมชัด Contrast Ratio บนพื้นหลังสีขาวและสีดำตามเกณฑ์มาตรฐาน WCAG AA / AAA

แหล่งอ้างอิง

ความรับผิดชอบของเนื้อหา

เครื่องมือนี้ให้บริการฟรีโดย sabai.tools การประมวลผลทั้งหมดทำงานบนอุปกรณ์ของคุณ (Client-side) ข้อมูลที่คุณกรอก จะไม่ถูกส่งออกหรือบันทึกไว้บนเซิร์ฟเวอร์ของเราผลลัพธ์ใช้เพื่อประมาณการเบื้องต้น ควรตรวจสอบกับผู้เชี่ยวชาญหรือเอกสารทางการก่อนนำไปใช้ตัดสินใจ

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

อัตราส่วนความคมชัด (Contrast Ratio) สำคัญอย่างไร?

เป็นเกณฑ์มาตรฐานของ W3C (WCAG) เพื่อให้อ่านข้อความบนพื้นหลังได้ง่ายสำหรับทุกคน โดยข้อความทั่วไปควรมีอัตราส่วน Contrast อย่างน้อย 4.5:1 (ระดับ AA) และ 7.0:1 (ระดับ AAA)

HEX กับ RGB และ HSL ต่างกันอย่างไร?

HEX เป็นรหัสฐานสิบหก 6 หลักที่นิยมใช้ใน Web Design, RGB ระบุค่าความเข้มของแม่สีแสง แดง-เขียว-น้ำเงิน (0-255), ส่วน HSL ระบุเป็น องศาเฉดสี (Hue 0-360°), ความอิ่มตัวสี (Saturation %), และความสว่าง (Lightness %) ซึ่งปรับแต่งไล่เฉดสีได้เป็นธรรมชาติที่สุด