ตัวแปลงสี (HEX, RGB, HSL)
แปลงสีระหว่าง HEX (#RRGGBB), RGB (0–255) และ HSL (ฮิว ความอิ่มตัว ความสว่าง) แบบเรียลไทม์ ปรับตัวเลือกหรือพิมพ์ค่าเพื่อดูทุกรูปแบบอัปเดตร่วมกัน — เหมาะกับ CSS การส่งมอบ Figma และแนวทางแบรนด์
วิธีแปลงสี
1. เลือกสีด้วยภาพหรือใส่ค่า HEX, RGB หรือ HSL
2. ดูค่าเทียบเท่าในทุกรูปแบบที่รองรับทันที
3. ปรับความสว่าง HSL สำหรับสถานะโฮเวอร์โดยคงฮิวแบรนด์
4. คัดลอกรูปแบบที่สแตกต้องการ (#hex สำหรับ CSS, rgb() สำหรับเบราว์เซอร์สมัยใหม่)
ตัวอย่างการแปลงสี
น้ำเงินแบรนด์ #2563EB
RGB rgb(37, 99, 235); HSL hsl(217, 84%, 53%) ทำให้โฮเวอร์มืด: hsl(217, 84%, 45%) โดยไม่เดา hex
CSS rgb เป็น HEX สำหรับ SVG
rgb(255, 87, 51) → #FF5733 สำหรับ fill ของ SVG และทรัพยากรสี Android XML
เทาเป็นกลางสำหรับขอบ
hsl(220, 10%, 90%) → เทาเย็นอ่อนมาก เพิ่มความอิ่มตัวเล็กน้อยสำหรับพื้นหลัง UI ที่มีทินท์
เมื่อไหร่ควรใช้เครื่องมือนี้
• เมื่อแปลโทเค็นดีไซน์ระหว่าง HEX ใน Figma กับ HSL ในตัวแปร CSS
• เมื่อสร้างธีมสว่าง/มืดที่สม่ำเสมอโดยเลื่อนความสว่าง HSL
• เมื่อบันทึกพาเลตต์แบรนด์สำหรับนักพัฒนาและนักการตลาด
ทฤษฎีสีสำหรับงาน UI
สีเสริมอยู่ตรงข้ามบนวงล้อฮิว (ห่าง 180°) — คอนทราสต์สูง ใช้เท่าที่จำเป็นสำหรับ CTA ฮิว analogous (±30°) รู้สึกกลมกลืนสำหรับแดชบอร์ด โครม UI เป็นกลางมักใช้น้ำเงินหรือเทาความอิ่มตัวต่ำ (hsl 220, 10%, 96%) แทน #EEE ล้วน ซึ่งอาจดูอุ่น/เย็นบนจอต่างกัน จำกัดพาเลตต์แบรนด์เป็นฮิวหลักหนึ่ง สีเป็นกลาง 2–3 และเขียว/แดงเชิงความหมายสำหรับสถานะ
คำถามที่พบบ่อย
HSL ดีอย่างไร?
ปรับความสว่างและความอิ่มตัวโดยคงฮิว — เช่น primary, primary-hover, primary-muted จากค่าฮิวเดียว
HEX ย่อ #RGB?
#F53 ขยายเป็น #FF5533 เรารับ hex 3 หรือ 6 หลัก (# ไม่บังคับ)
sRGB กับ display-P3?
เครื่องมือนี้ใช้ sRGB มาตรฐานของ CSS บนเว็บ จอ wide-gamut อาจเรนเดอร์ต่างเล็กน้อย
อัลฟา / ความโปร่งใส?
HEX 8 หลัก (#RRGGBBAA) และ rgba() อาจรองรับเมื่อเครื่องมือเปิดอัลฟา — ตรวจช่อง UI
ทำไมผลรวม RGB ดูผิดใน hex?
แต่ละช่องเป็น 0–255 → สองหลัก hex 255 = FF ไม่ใช่ “255” ต่อกัน