Color Picker — เลือกสี & แปลง HEX / RGB / HSL

Color Picker เป็นเครื่องมือเลือกสีออนไลน์ที่ช่วยให้คุณเลือกสีจากจานสี แล้วแปลงเป็นโค้ดสีในรูปแบบต่างๆ ได้แก่ HEX, RGB, HSL เพื่อนำไปใช้ในงานออกแบบเว็บไซต์ กราฟิก หรือแอปพลิเคชัน

เครื่องมือนี้ทำงานบนเบราว์เซอร์ ไม่ต้องติดตั้งโปรแกรม สามารถพิมพ์โค้ดสีโดยตรง หรือเลือกจาก Color Picker แล้วคัดลอกไปใช้ได้ทันที

• HEX — โค้ดสี 6 หลัก เช่น {'#'}FF5733 นิยมใช้ใน CSS
• RGB — ค่าสีแดง เขียว น้ำเงิน (0-255) เช่น rgb(255, 87, 51)
• HSL — เฉดสี ความอิ่ม ความสว่าง เช่น hsl(11, 100%, 60%)

• ดึงสีจากโลโก้ของลูกค้ามาสร้าง Design System ที่สอดคล้องกันทั้งเว็บและสิ่งพิมพ์
• แปลงโค้ดสี HEX จาก Figma ให้เป็น RGB เพื่อใช้ใน CSS Custom Properties ของโค้ดหน้าเว็บ
• จับคู่สีผ้าหรือสีทาจริงกับค่าสีดิจิทัลสำหรับแสดงสินค้าบน E-commerce ได้ตรงตามจริง
• สร้างชุดสีที่เข้าถึงได้ง่ายสำหรับ Mobile App ตามแบรนด์ไกด์ไลน์ขององค์กร
• สุ่มตัวอย่างสีจากรูปถ่ายอ้างอิงเพื่อทำ Mood Board สำหรับงานออกแบบตกแต่งภายใน

• กำหนดสีด้วย CSS Custom Properties เสมอ เพื่อให้อัปเดตสีทั้งเว็บได้จากจุดเดียว
• ใช้ HSL เมื่อต้องการสร้างเฉดสีอ่อนหรือเข้มจากสีเดียวกันแบบ Programmatic
• จำกัดจานสีหลักไว้ไม่เกิน 5-7 สี เพื่อรักษาความสม่ำเสมอของ Visual Design
• ทดสอบสีที่เลือกบนหลายหน้าจอ เพราะการปรับสีจอแต่ละเครื่องแตกต่างกันมาก
• จับคู่การเลือกสีกับ Contrast Check ทุกครั้ง เพื่อให้ข้อความอ่านง่ายสำหรับทุกคน

• ใช้สีดำสนิท (#000000) สำหรับเนื้อหา แทนที่จะใช้โทนเข้มอ่อนอย่าง #1a1a1a ที่ถนอมสายตากว่า
• คัดลอกโค้ดสีโดยไม่ตรวจสอบในบริบทจริง ทำให้สีขัดกันบนหน้าเว็บ
• ละเลยผู้ที่ตาบอดสี โดยใช้แค่สีแดงกับเขียวแยกสถานะสำเร็จและข้อผิดพลาด
• เลือกสีจากภาพสกรีนช็อตความละเอียดต่ำ ซึ่งการบีบอัดทำให้สีเพี้ยนจากต้นฉบับ

ต่างจาก Adobe Color หรือ Coolors ที่เน้นสร้างชุดสี Color Picker นี้เชี่ยวชาญการแปลงสีระหว่าง HEX, RGB, HSL อย่างรวดเร็ว พร้อมคัดลอกและดูตัวอย่างสด ไม่ต้องสมัครบัญชี

Chrome DevTools มี Color Picker แต่ใช้ได้เฉพาะใน Inspector เท่านั้น เครื่องมือนี้ให้คุณทดลองสีก่อนเขียนโค้ด ใช้ได้ทุกอุปกรณ์รวมถึงมือถือ