เครื่องมือ เลือกสี (Color Picker) ออนไลน์ฟรี เลือกสีแล้วดูค่า HEX, RGB และ HSL พร้อมกัน คัดลอกไปใช้ได้ทันที พร้อมแสดงเฉดสีอ่อน-เข้ม (palette) สำหรับงานออกแบบเว็บ กราฟิก และ CSS ทำงานในเบราว์เซอร์
HEX
RGB
HSL
เฉดสีอ่อน-เข้ม (กดเพื่อเลือก)
เครื่องมือเลือกสีสำหรับงานออกแบบเว็บและกราฟิก ทำงานในเบราว์เซอร์
วิธีใช้เครื่องมือเลือกสี
- กดที่ช่องเลือกสีเพื่อเลือกสีที่ต้องการ หรือพิมพ์รหัส HEX เอง
- ดูค่าสีทั้ง HEX, RGB, HSL แล้วกดคัดลอกค่าที่ต้องการ
- เลือกเฉดสีอ่อน-เข้มจากแถบ palette เพื่อหาโทนที่เข้าชุดกัน
HEX, RGB, HSL ต่างกันยังไง
- HEX เช่น #2563EB ใช้บ่อยใน CSS และเครื่องมือออกแบบ
- RGB เช่น rgb(37, 99, 235) บอกค่าแดง-เขียว-น้ำเงิน
- HSL เช่น hsl(221, 83%, 53%) บอกเฉดสี ความอิ่มสี และความสว่าง ปรับโทนง่าย
คำถามที่พบบ่อย
เอาค่าสีไปใช้ใน CSS ยังไง
คัดลอกค่า HEX หรือ RGB แล้ววางใน CSS เช่น color: #2563EB; หรือ background: rgb(37,99,235);
palette เฉดสีเอาไว้ทำอะไร
ใช้หาโทนสีอ่อน-เข้มของสีเดียวกัน เหมาะกับการทำปุ่ม hover, เงา, หรือชุดสีที่กลมกลืนกัน