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