ตัวแปลง HEX เป็น HSL สำหรับสี CSS | My-DevTools
ใช้ตัวแปลง HEX เป็น HSL นี้เพื่อดูค่า HSL ของสีขณะพิมพ์ หรือแก้ไขฝั่งใดฝั่งหนึ่งแล้วดูอีกฝั่งอัปเดตสด นอกจากนี้ยังรับอินพุตสีแบบยืดหยุ่นอย่าง #abc, rgb(1 2 3 / 50%) และชื่อสี ตรวจสอบตัวอย่าง คัดลอกบรรทัด CSS พร้อมใช้ และดูคำเตือนสีนอกขอบเขตสำหรับสีที่นอก sRGB
HEX เป็น HSL คือตัวแปลงสีในเบราว์เซอร์สำหรับนักพัฒนาที่ต้องสลับระหว่างค่าเลขฐานสิบหกและ HSL ป้อนสี HEX เพื่อดูค่า HSL ที่เทียบเท่า หรือแก้ไขฝั่งใดฝั่งหนึ่งแล้วอีกฝั่งอัปเดตสด เครื่องมือยังรับอินพุตแบบยืดหยุ่นอย่าง #abc, rgb(1 2 3 / 50%) และชื่อสี และแสดงตัวอย่างสี บรรทัด CSS พร้อมใช้ และคำเตือนสีนอกขอบเขตเมื่อสีอยู่นอก sRGB
การแปลงนำเสนอสีเดียวกันโดยใช้สองรูปแบบ HEX แทนสีด้วยคอมโพเนนต์เลขฐานสิบหก ส่วน HSL อธิบายด้วย hue, saturation และ lightness ด้วยการแก้ไขสองทางสด คุณสามารถเปลี่ยนการแทนใดแล้วตรวจสอบค่าที่อัปเดตในอีกฝั่ง ตัวอย่างช่วยคุณตรวจสอบสีด้วยตา และบรรทัด CSS พร้อมคัดลอกลงโค้ด
การแปลงระหว่าง HEX และ HSL มีประโยชน์เมื่อโปรเจกต์ ระบบ หรือเอกสารคาดหวังรูปแบบหนึ่งมากกว่าอีกรูปแบบ ตัวอย่างเช่น คุณสามารถเปลี่ยนค่าเลขฐานสิบหกเป็น HSL สำหรับเวิร์กโฟลว์ที่รับ HSL หรือเปรียบเทียบค่า HSL กับคู่เลขฐานสิบหก เครื่องมือยังช่วยคุณเตรียมค่าสีสำหรับเอกสาร ตั๋วงาน และรีวิวโค้ด
HEX เป็น HSL ทำงานในเบราว์เซอร์ของคุณทั้งหมด: ข้อมูลที่คุณป้อนจะประมวลผลบนอุปกรณ์ของคุณ และไม่อัปโหลด ไม่จัดเก็บ หรือส่งไปยังเซิร์ฟเวอร์ ไม่ต้องสมัครสมาชิก และเมื่อโหลดหน้าแล้วการแปลงจะทำงานออฟไลน์ ทำให้มีประโยชน์สำหรับนักพัฒนาและวิศวกร DevOps ที่ต้องการวิธีด่วนและเป็นส่วนตัวในการตรวจสอบหรือแปลงสีโดยไม่พึ่งการเชื่อมต่อเซิร์ฟเวอร์
ขั้นตอนที่ 1: ป้อนหรือวางสีในอินพุต รูปแบบที่คาดหวังคือเลขฐานสิบหก และการพาร์สยังจำตัวอย่างอย่าง #abc, rgb(1 2 3 / 50%) และชื่อสี
ขั้นตอนที่ 2: แก้ไขค่า HEX หรือ HSL ฝั่งใดฝั่งหนึ่ง อีกฝั่งอัปเดตสด คุณจึงเปรียบเทียบสองการแทนได้ขณะทำงาน
ขั้นตอนที่ 3: ตรวจสอบตัวอย่างสีเพื่อดูสีด้วยตา หากอยู่นอก sRGB เครื่องมือแสดงคำเตือนสีนอกขอบเขต
ขั้นตอนที่ 4: คัดลอกบรรทัด CSS พร้อมใช้เมื่อต้องการใช้สีที่แปลงแล้วในโค้ด
ขั้นตอนที่ 5: ปรับตัวเลือกที่มีหากจำเป็น แล้วตรวจสอบผลลัพธ์ที่แสดงก่อนคัดลอก
กรณีการใช้งาน: ย้ายสีเลขฐานสิบหกเข้าระบบที่รับเฉพาะ HSL การแปลงสดให้ค่าที่คุณคัดลอกได้โดยไม่ต้องคำนวณเอง
กรณีการใช้งาน: ตรวจสอบว่าค่า HSL ตรงกับต้นฉบับเลขฐานสิบหกที่ได้รับหรือไม่ การแก้ไขฝั่งใดฝั่งหนึ่งอัปเดตอีกฝั่ง ทำให้เปรียบเทียบง่าย
กรณีการใช้งาน: เตรียมข้อมูลย่อยสีเลขฐานสิบหกหรือ HSL สำหรับเอกสาร ตั๋วงาน หรือข้อความคอมมิต บรรทัด CSS พร้อมใช้ช่วยให้ค่าใช้ในโค้ดได้
กรณีการใช้งาน: ตรวจสอบการแปลงสีก่อนวางผลลัพธ์ลงในสไตล์ชีต ตัวอย่างให้การตรวจสอบด้วยตาควบคู่กับค่าสี
กรณีการใช้งาน: ตรวจสอบสีที่อาจอยู่นอก sRGB ก่อนใช้ค่าที่แปลงแล้ว คำเตือนสีนอกขอบเขตดึงความสนใจมาที่สภาพนั้น
กรณีการใช้งาน: ทำงานกับอินพุตสีที่คัดลอกในรูปแบบที่รองรับอื่นอย่างค่า rgb() หรือชื่อสี การพาร์สแบบยืดหยุ่นประหยัดเวลาเมื่ออินพุตไม่ได้เขียนเป็นค่าเลขฐานสิบหก