เลือกสี
เลือกสีและรับรหัส HEX, RGB, HSL
ทำงานบนเบราว์เซอร์ของคุณ
HEX
#3B82F6RGB
rgb(59, 130, 246)HSL
hsl(217, 91%, 60%)สีด่วน
เครื่องมือเลือกสีคืออะไร?
เครื่องมือเลือกสีเป็นยูทิลิตีออนไลน์ที่ช่วยเลือกสีและรับรหัสสีในรูปแบบต่างๆ (HEX, RGB, HSL) มีประโยชน์สำหรับนักออกแบบ นักพัฒนา และผู้ที่ต้องทำงานกับสีในโปรเจกต์
กรณีการใช้งาน
- เลือกสีสำหรับออกแบบเว็บหรือแอป
- รับรหัสสี HEX, RGB, HSL สำหรับใช้ใน CSS
- ค้นหาสีที่เข้ากับแบรนด์หรือโปรเจกต์
- แปลงระหว่างรูปแบบสีต่างๆ
เมื่อไหร่ควรใช้?
ใช้เครื่องมือนี้เมื่อต้องเลือกสี รับรหัสสี หรือแปลงระหว่างรูปแบบสี มีประโยชน์สำหรับนักออกแบบเว็บ UI/UX และนักพัฒนา frontend
ตัวอย่าง
สีน้ำเงินประจำแบรนด์
ข้อมูลเข้า
#1A6CF5
ผลลัพธ์
- HEX
- #1A6CF5
- RGB
- rgb(26, 108, 245)
- HSL
- hsl(218, 92%, 53%)
สีเน้นโทนอุ่น
ข้อมูลเข้า
#F4A261
ผลลัพธ์
- HEX
- #F4A261
- RGB
- rgb(244, 162, 97)
- HSL
- hsl(27, 87%, 67%)
คำถามและคำตอบ
HEX, RGB และ HSL ต่างกันอย่างไร?
ทั้งสามแบบอธิบายสีเดียวกันในรูปแบบที่ต่างกัน HEX เป็นรูปแบบกะทัดรัดที่ใช้ใน CSS ส่วน RGB ระบุค่าสีแดง เขียว และน้ำเงินตั้งแต่ 0 ถึง 255 และ HSL ใช้ค่าเฉดสี ความอิ่มตัว และความสว่าง ทำให้สร้างเฉดที่อ่อนลงหรือเข้มขึ้นได้ง่าย
คัดลอกรหัสสีได้อย่างไร?
เลือกสี แล้วกดปุ่มคัดลอกข้างค่า HEX, RGB หรือ HSL ที่คุณต้องการ
ทำไมการแปลงกลับจาก HSL อาจได้สีที่ต่างไปเล็กน้อย?
ค่า HSL ถูกปัดเป็นจำนวนเต็ม การแปลงกลับเป็น HEX จึงอาจคลาดเคลื่อนได้หนึ่งระดับ