เครื่องมือเลือกสี Color Picker ออนไลน์

เลือกสี

HEX

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

ตัวอย่างสี

ตัวอย่างข้อความ

ตัวอย่างพื้นหลัง

Ad Space

Color Picker คืออะไร?

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

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

รูปแบบโค้ดสี

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

Ad Space

เคล็ดลับการเลือกสี

ใช้ Contrast Checker ตรวจสอบว่าสีตัวอักษรกับพื้นหลังอ่านง่ายหรือไม่
เลือกชุดสีที่สอดคล้องกัน (Color Harmony) เช่น Complementary, Analogous
ทดสอบสีทั้งในโหมดสว่างและมืด (Light/Dark Mode)
ใช้ HSL ในการปรับสี เพราะควบคุมความสว่างและความอิ่มได้ง่าย
บันทึกโค้ดสีที่ใช้บ่อยเป็น Design Token เพื่อความสม่ำเสมอ

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

คลิกที่ช่องเลือกสี หรือพิมพ์โค้ด HEX/RGB/HSL โดยตรง เครื่องมือจะแปลงค่าสีทุกรูปแบบให้อัตโนมัติ พร้อมแสดงตัวอย่างสีสด

HEX ใช้เลขฐาน 16 (เช่น #FF5733), RGB ใช้ค่าแดง-เขียว-น้ำเงิน (0-255), HSL ใช้เฉดสี-ความอิ่ม-ความสว่าง ทั้ง 3 แบบแทนสีเดียวกันได้

ไม่ ทุกอย่างทำงานบนเบราว์เซอร์ของคุณ ไม่มีข้อมูลถูกส่งออกไปที่ใด

ได้ เครื่องมือรองรับการใช้งานบนทุกอุปกรณ์ ทั้ง Desktop, Tablet และ Mobile

เวอร์ชันปัจจุบันรองรับสีแบบ Solid (ทึบ) HEX 6 หลัก, RGB, HSL หากต้องการ Alpha ให้เพิ่ม opacity ใน CSS เอง

อ้างอิง

MDN Web Docs — CSS Color Values (developer.mozilla.org)
W3Schools — CSS Colors (w3schools.com)
Adobe Color — Color Wheel (color.adobe.com)

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

เครื่องมือที่เกี่ยวข้อง

คำนวณ BMI

คำนวณค่าดัชนีมวลกาย (BMI) เพื่อประเมินรูปร่างและความเสี่ยงด้านสุขภาพ

คำนวณภาษี

คำนวณภาษีเงินได้บุคคลธรรมดา พร้อมค่าลดหย่อนภาษี อัตราก้าวหน้า

คำนวณสินเชื่อ/ผ่อนบ้าน

คำนวณค่าผ่อนบ้าน ดอกเบี้ยรวม พร้อมตารางผ่อนชำระรายเดือน