Color Picker

Pick colors and get HEX, RGB, HSL

R59

G130

B246

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217, 91%, 60%)

เกี่ยวกับเครื่องมือนี้

ตัวเลือกสีช่วยให้คุณเลือกสีได้อย่างเป็นภาพและดู HEX, RGB และ HSL ทันที ใช้ตัวเลือกสีแบบเนทีฟสำหรับการเลือกที่กว้างหรือแถบเลื่อน RGB สำหรับการควบคุมระดับช่องที่แม่นยำ

สีที่เลือกจะถูกบันทึกในประวัติสีล่าสุดโดยอัตโนมัติ เพื่อให้กลับไปยังสีได้อย่างรวดเร็วโดยไม่ต้องพิมพ์ใหม่ มีประโยชน์เมื่อเปรียบเทียบรูปแบบสีหรือสร้างจานสี

วิธีใช้งาน

คลิกสวอตช์สีขนาดใหญ่เพื่อเปิดตัวเลือกสีแบบเนทีฟของเบราว์เซอร์และเลือกสี
ลากแถบเลื่อน R, G และ B เพื่อปรับแต่งช่องสีแต่ละช่องอย่างละเอียด
คลิกคัดลอกถัดจาก HEX, RGB หรือ HSL เพื่อคัดลอกค่าไปยังคลิปบอร์ด
สีที่คัดลอกปรากฏในแถวสีล่าสุด — คลิกสวอตช์ใดก็ได้เพื่อกู้คืน

กรณีการใช้งาน

นักออกแบบเว็บเลือกสีที่แน่นอนจากคู่มือแบรนด์และคัดลอก hex ไปยัง CSS นักพัฒนาปรับ RGB สำหรับ canvas หรือ WebGL นักออกแบบ UI เปรียบเทียบรูปแบบที่ละเอียดอ่อนในโทนสีเดียวกัน

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

สีที่เลือกจะถูกบันทึกอย่างถาวรหรือไม่? — ไม่ สีล่าสุดจะถูกเก็บในสถานะ component และรีเซ็ตเมื่อออกจากหน้าหรือรีเฟรช สำหรับการเก็บถาวรให้คัดลอก hex ไปยังบันทึกของคุณ
ฉันสามารถพิมพ์รหัส hex โดยตรงได้ไหม? — ได้ ใช้ช่องป้อน hex ในตัวเลือกสีแบบเนทีฟ (มีในเบราว์เซอร์ส่วนใหญ่) เพื่อพิมพ์ค่า hex โดยตรง
HSL คืออะไรและมีประโยชน์อย่างไร? — HSL ย่อมาจาก Hue (สี) Saturation (ความอิ่มตัว) Lightness (ความสว่าง) การเปลี่ยนค่าความสว่างทำให้สีสว่างขึ้นหรือเข้มขึ้นในขณะที่รักษาโทนสีเดิม มีประโยชน์ในการสร้าง tints และ shades