วิธาใช้ Input Type Color (Color Picker) ใน HTML

บทนำ

ใช้ <input type="color"> สำหรับ Color Picker เปิด UI เลือกสี พร้อมค่าเริ่มต้นผ่าน value

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Input Color</title>
  </head>
  <body>
    <form action="" method="get">
      เลือกสีสำหรับเว็บไซต์:<br><br>
      <input type="color" name="favcolor" value="#ffffff"><br>
      <input type="submit" value="submit">
    </form>
  </body>
</html>

รูปแบบค่า

• ค่าที่ส่ง: #RRGGBB (Hex 7 ตัวอักษร)
• ค่าเริ่มต้น: #000000 (ดำ)
• ไม่รองรับ Alpha/Transparency

แอตทริบิวต์เสริม

• value - สีเริ่มต้น (ต้องเป็น Hex)
• list - เชื่อมกับ datalist สำหรับสีแนะนำ

การรองรับเบราว์เซอร์

รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด (Chrome, Firefox, Safari, Edge) ไม่รองรับ IE

ตัวอย่าง Datalist สำหรับสีแนะนำ

<input type="color" list="presetColors">
<datalist id="presetColors">
  <option value="#ff0000" label="Red">
  <option value="#00ff00" label="Green">
  <option value="#0000ff" label="Blue">
</datalist>