ตัวแปลงรหัสสี
วางสีในรูปแบบ HEX (#ff6600 หรือ #f60), rgb(255, 102, 0), คั่นด้วยเครื่องหมายจุลภาค 255, 102, 0 หรือ hsl(24, 100%, 50%) แล้วตัวแปลงจะแสดงผลในอีกสองรูปแบบทันที พร้อมตัวอย่างสีแบบสดและปุ่มคัดลอกหนึ่งคลิกในแต่ละรูปแบบ
การแปลงรหัสสีทำงานอย่างไร
-
1
ป้อนสีในรูปแบบที่รองรับ
HEX (#abc, #abcdef), rgb(r, g, b), คั่นด้วยจุลภาค r, g, b หรือ hsl(h, s%, l%)
-
2
แปลงเป็นค่าภายใน
เครื่องมือแปลงค่าเป็น RGB ภายใน จากนั้นจึงหาค่าเทียบเท่าในรูปแบบ HEX และ HSL จากค่านั้น
-
3
แสดงผลทุกรูปแบบ
สตริง HEX, RGB และ HSL ที่ตรงกันแสดงเคียงข้างกัน
-
4
ตัวอย่างสีแบบสด
แสดงสีผลลัพธ์ให้เห็นในทันที เพื่อให้คุณยืนยันการแปลงก่อนคัดลอก
รูปแบบที่รองรับ
| รูปแบบ | ตัวอย่าง | การใช้งาน |
|---|---|---|
| HEX 3 หลัก | #F66 |
รูปแบบย่อ ใช้เฉพาะสีที่มีตัวเลขซ้ำกัน |
| HEX 6 หลัก | #FF6B6B |
ค่าเริ่มต้นสำหรับ CSS และการออกแบบกราฟิก |
| RGB | rgb(255, 107, 107) |
CSS, JS, ซอฟต์แวร์ออกแบบ |
| คั่นด้วยจุลภาค | 255, 107, 107 |
เหมือน RGB แต่ไม่ใช้รูปแบบฟังก์ชัน |
| HSL | hsl(0, 100%, 71%) |
เข้าใจเรื่องสี/ความอิ่มตัว/ความสว่างได้ง่ายกว่า |
ควรใช้รูปแบบใดเมื่อใด
- HEX สำหรับ CSS แบบคงที่และการส่งมอบงานออกแบบ
- RGB เมื่อส่งค่าสีไปยัง JavaScript หรือซอฟต์แวร์ออกแบบ
- HSL เมื่อปรับความสว่างหรือความอิ่มตัว เพราะเข้าใจได้ง่ายกว่า RGB
รูปแบบอื่น เช่น HSV, CMYK, LAB, LCH และ OKLCH มีอยู่ในเครื่องมือออกแบบ รูปแบบเหล่านี้แสดงสีเดียวกันด้วยวิธีที่ต่างกัน แต่ตัวแปลงนี้มุ่งเน้นสามรูปแบบเว็บพื้นฐานข้างต้น
ความแม่นยำ
- การแปลงระหว่าง HEX, RGB และ HSL มีความแม่นยำ: HEX กับ RGB เป็นโมเดลสีเดียวกัน และ HSL คำนวณจาก RGB ด้วยสูตรมาตรฐาน
- ค่า HSL ถูกปัดเป็นจำนวนเต็ม จึงอาจมีการเลื่อนของหลักสุดท้ายเมื่อแปลงไปกลับ สีที่มองเห็นยังคงเหมือนเดิม ใช้ HEX เมื่อต้องการค่าที่ตรงกันทุกบิต
คำถามที่พบบ่อย
ใช้ HEX หรือ rgb() เพื่อความเข้ากันได้กว้าง ใช้ hsl() เมื่อต้องการอ่านง่าย เบราว์เซอร์สมัยใหม่รองรับ oklch() และรูปแบบอื่นด้วย แต่ HEX ยังคงเป็นค่าเริ่มต้นที่ปลอดภัยที่สุด
ไม่ได้ ตัวแปลงรับเฉพาะสีทึบ: HEX 3 หรือ 6 หลัก และ rgb() กับ hsl() ที่ไม่มีช่องอัลฟา ให้ใช้ rgba() หรือ HEX 8 หลักใน CSS ของคุณโดยตรง
ไม่ได้ ตัวแปลงรับเฉพาะสามรูปแบบตัวเลขเท่านั้น ให้แปลงชื่อสีเป็น HEX ก่อนด้วยเครื่องมือเลือกสีหรือค้นหาออนไลน์
HSL แสดงค่าสี ความอิ่มตัว และความสว่างเป็นจำนวนเต็ม การแปลงไปกลับจึงอาจคลาดเคลื่อนไปหนึ่งหน่วย สีที่มองเห็นเหมือนเดิม ใช้ HEX เมื่อต้องการค่าที่ตรงกันเป๊ะ
เครื่องมือที่เกี่ยวข้อง
ตารางอ้างอิง ASCII
ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL
อ้างอิงตัวอักษร HTML
รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ
ตารางอ้างอิงแป้นพิมพ์ลัด
ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux
ตัวลดรูปพีชคณิตบูลีน
ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^
เครื่องสร้างตัวอักษรสุ่ม
สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน
เครื่องมือตรวจสอบหมายเลขโทรศัพท์
ตรวจสอบโครงสร้างหมายเลขตามประเทศ พร้อมดูภูมิภาค ประเภท และรูปแบบ E.164 ระหว่างประเทศ ในประเทศ และ RFC 3966