เครื่องมือเลือกสี
เลือกสี แยกสีจากภาพ สร้างพาเลทสี และตรวจสอบความคมชัด รองรับ HEX, RGB, HSL, HSV และ CMYK
แยกสีจากภาพ
วางภาพหรือคลิกเพื่ออัปโหลด
สีหลัก
เพิ่มสีในพาเลทของคุณ
ข้อความตัวอย่างขนาดปกติ (14px)
ข้อความตัวอย่างขนาดใหญ่
อัตราส่วนความคมชัด
21:1
AA ปกติ
ผ่าน
AA ใหญ่
ผ่าน
AAA ปกติ
ผ่าน
AAA ใหญ่
ผ่าน
90°
เมื่อใดควรใช้เครื่องมือเลือกสีนี้
เครื่องมือเลือกสีฟรีของเราช่วยนักออกแบบและนักพัฒนาทำงานกับสี:
-
ออกแบบเว็บ
เลือกสีที่สมบูรณ์แบบสำหรับเว็บไซต์และตรวจสอบอัตราส่วนความคมชัดเพื่อให้แน่ใจว่าเป็นไปตามมาตรฐานการเข้าถึง
-
เอกลักษณ์แบรนด์
สร้างพาเลทสีที่กลมกลืนสำหรับโลโก้ สื่อการตลาด และแนวทางแบรนด์
-
จับคู่สีภาพ
แยกสีจากภาพถ่ายเพื่อจับคู่องค์ประกอบการออกแบบกับภาพที่มีอยู่
-
พัฒนา CSS
สร้างไล่ระดับสี CSS และส่งออกพาเลทสีเป็นคุณสมบัติ CSS ที่กำหนดเอง
-
ทดสอบการเข้าถึง
ตรวจสอบว่าการผสมสีข้อความและพื้นหลังเป็นไปตามมาตรฐาน WCAG AA และ AAA
วิธีใช้เครื่องมือเลือกสี
เริ่มต้นใช้งาน
- คลิกและลากในสี่เหลี่ยมสีเพื่อเลือกความอิ่มตัวและความสว่าง
- ใช้แถบเลื่อนเฉดสีเพื่อเปลี่ยนสีพื้นฐาน
- ปรับความทึบด้วยแถบเลื่อนอัลฟาหากจำเป็น
- คัดลอกรูปแบบสีใดก็ได้โดยคลิกปุ่มคัดลอกข้างๆ
คุณสมบัติ
- เครื่องมือเลือกสีแบบโต้ตอบพร้อมตัวอย่างเรียลไทม์
- แยกสีจากภาพใดก็ได้ด้วยเครื่องมือดูดสี
- สร้างการผสมสีที่กลมกลืนอัตโนมัติ
- สร้างพาเลทที่กำหนดเองและส่งออกเป็น CSS หรือ JSON
- ตรวจสอบความคมชัดสี WCAG เพื่อการเข้าถึง
- สร้างไล่ระดับสี CSS ด้วยตัวแก้ไขภาพ
ปุ่มลัด
- Ctrl+C: คัดลอกสี HEX ปัจจุบัน
- Ctrl+V: วางและใช้สีจากคลิปบอร์ด
- 1-4: สลับระหว่างแท็บคุณสมบัติ
เคล็ดลับ
- อัปโหลดภาพเพื่อแยกสีหลักอัตโนมัติ
- ใช้ตัวตรวจสอบความคมชัดเพื่อให้แน่ใจว่าข้อความอ่านได้
- ส่งออกพาเลทเป็นตัวแปร CSS เพื่อใช้งานง่ายในโปรเจกต์