เครื่องมือแปลงสี HSL เป็น HEX
แปลงสีจาก HSL เป็น HEX ทันทีที่คุณพิมพ์ — ฟรี รวดเร็ว พร้อมตัวอย่างการคำนวณและตารางเปรียบเทียบสีทั่วไปครับ
พิมพ์ค่าสี HSL เพื่อดูค่าสี HEX ที่ด้านล่าง หรือเลือกสีจากจานสีได้เลยครับ
ตัวอย่างการแปลงสี
HSL 11, 100%, 60% = HEX #ff5733
วิธีการแปลงสี
- รหัส HEX คือการเขียนช่องสัญญาณสี RGB สามช่องในรูปแบบเลขฐาน 16 โดยใช้ตัวเลขสองหลักต่อหนึ่งช่องสัญญาณ ตั้งแต่ 00 (0) ถึง ff (255)
- HSL อธิบายสีเดียวกันด้วยค่าโทนสี (Hue: 0–360° บนวงล้อสี), ความอิ่มตัวของสี (Saturation) และความสว่าง (Lightness) ซึ่งสะดวกมากในการปรับสีให้เข้มขึ้นหรือจางลงโดยเปลี่ยนค่าเพียงตัวเดียว
สีทั่วไปในรูปแบบ HSL และ HEX
| สี | HSL | HEX |
|---|---|---|
| สีแดง | 0, 100%, 50% | #ff0000 |
| สีส้ม | 39, 100%, 50% | #ffa500 |
| สีเหลือง | 60, 100%, 50% | #ffff00 |
| สีเขียว | 120, 100%, 25% | #008000 |
| สีฟ้าอมเขียว (Cyan) | 180, 100%, 50% | #00ffff |
| สีน้ำเงิน | 240, 100%, 50% | #0000ff |
| สีม่วง | 300, 100%, 25% | #800080 |
| สีชมพู | 350, 100%, 88% | #ffc0cb |
| สีน้ำตาล | 0, 59%, 41% | #a52a2a |
| สีขาว | 0, 0%, 100% | #ffffff |
| สีเทา | 0, 0%, 50% | #808080 |
| สีดำ | 0, 0%, 0% | #000000 |
ทุกการแปลงค่าจะทำงานในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดข้อมูลที่คุณกรอกไปยัง BroBroGo
คำถามที่พบบ่อย
จะแปลงสีจาก HSL เป็น HEX ได้อย่างไร?
พิมพ์หรือวางค่าสี HSL ของคุณที่ด้านบน — ค่าสี HEX จะอัปเดตทันทีที่คุณพิมพ์ นอกจากนี้คุณยังสามารถเลือกสีจากจานสีเพื่อดูค่าได้อีกด้วยครับ
การแปลงสีมีความแม่นยำหรือไม่?
ค่าต่างๆ จะถูกปัดเศษเป็นจำนวนเต็ม ซึ่งเป็นรูปแบบที่ CSS และเครื่องมือออกแบบทั่วไปต้องการ ความแตกต่างนั้นน้อยมากจนไม่สามารถมองเห็นได้ด้วยตาเปล่าครับ