แปลง LCH เป็น HSLA
วางค่า LCH แล้วได้ HSLA ทันที ใช้รูปแบบอื่นก็ได้เช่นกัน
ตารางความทึบ: ค่าอัลฟาใน HEX และ HSLA
ใน HEX แบบ 8 หลัก สองหลักสุดท้ายกำหนดความทึบ: FF คือทึบเต็มที่ 80 ประมาณ 50% และ 00 คือโปร่งใสทั้งหมด ตารางแสดงสีตัวอย่างทุก 5%
| ความทึบ | อัลฟา HEX | HEX | HSLA |
|---|---|---|---|
| 100% | ff | #ff5733 | hsla(10.59, 100%, 60%, 1) |
| 95% | f2 | #ff5733f2 | hsla(10.59, 100%, 60%, 0.95) |
| 90% | e6 | #ff5733e6 | hsla(10.59, 100%, 60%, 0.9) |
| 85% | d9 | #ff5733d9 | hsla(10.59, 100%, 60%, 0.85) |
| 80% | cc | #ff5733cc | hsla(10.59, 100%, 60%, 0.8) |
| 75% | bf | #ff5733bf | hsla(10.59, 100%, 60%, 0.75) |
| 70% | b3 | #ff5733b3 | hsla(10.59, 100%, 60%, 0.7) |
| 65% | a6 | #ff5733a6 | hsla(10.59, 100%, 60%, 0.65) |
| 60% | 99 | #ff573399 | hsla(10.59, 100%, 60%, 0.6) |
| 55% | 8c | #ff57338c | hsla(10.59, 100%, 60%, 0.55) |
| 50% | 80 | #ff573380 | hsla(10.59, 100%, 60%, 0.5) |
| 45% | 73 | #ff573373 | hsla(10.59, 100%, 60%, 0.45) |
| 40% | 66 | #ff573366 | hsla(10.59, 100%, 60%, 0.4) |
| 35% | 59 | #ff573359 | hsla(10.59, 100%, 60%, 0.35) |
| 30% | 4d | #ff57334d | hsla(10.59, 100%, 60%, 0.3) |
| 25% | 40 | #ff573340 | hsla(10.59, 100%, 60%, 0.25) |
| 20% | 33 | #ff573333 | hsla(10.59, 100%, 60%, 0.2) |
| 15% | 26 | #ff573326 | hsla(10.59, 100%, 60%, 0.15) |
| 10% | 1a | #ff57331a | hsla(10.59, 100%, 60%, 0.1) |
| 5% | 0d | #ff57330d | hsla(10.59, 100%, 60%, 0.05) |
| 0% | 00 | #ff573300 | hsla(10.59, 100%, 60%, 0) |
ตัวอย่างการแปลง LCH เป็น HSLA
เกี่ยวกับ LCH และ HSLA
CIE LCH คือ Lab ในรูปพิกัดเชิงขั้ว: ความสว่าง ความสด และฮิว เข้าใจง่ายกว่า Lab และใช้ใน CSS ได้ในรูป lch()
HSLA คือ HSL ที่เพิ่มช่องอัลฟาสำหรับความทึบ เขียนเป็น hsla(11, 100%, 60%, 0.5) อัลฟามีค่าตั้งแต่ 0 (โปร่งใสทั้งหมด) ถึง 1 (ทึบเต็มที่) และ CSS สมัยใหม่รับค่านี้ใน hsl() ได้ด้วย
การแปลงทำงานอย่างไร
เราอ่านค่า LCH แปลงเป็น CIE XYZ ด้วยเมทริกซ์จากข้อกำหนด CSS Color 4 แล้วแปลงต่อเป็น HSLA ค่าที่อยู่นอกขอบเขตสีปลายทางจะถูกปรับด้วยอัลกอริทึมของ CSS Color 4 ซึ่งคงความสว่างและฮิวไว้ แล้วลดความสดลง
คำถามที่พบบ่อย
แปลง LCH เป็น HSLA อย่างไร
วางหรือพิมพ์ค่า LCH ลงในช่องด้านบน PickShade จะแปลงด้วยสูตร CSS Color 4 ทันทีที่พิมพ์ และคลิกเดียวก็คัดลอกค่า HSLA ได้
การแปลง LCH เป็น HSLA แม่นยำหรือไม่
การคำนวณแม่นยำ ผลลัพธ์ถูกปัดเศษเฉพาะตอนแสดงผล โดยเหลือทศนิยมพอที่จะแปลงกลับเป็นสีเดิมได้ หากสีไม่อยู่ในขอบเขตสีปลายทาง PickShade จะเตือนและแสดงสีที่ใกล้ที่สุดที่อยู่ในขอบเขต
ได้รูปแบบอื่นพร้อมกันด้วยไหม
ได้ รูปแบบอื่นทั้งหมด รวมถึง OKLCH, Display P3, Tailwind, SwiftUI, Flutter และ Android แสดงอยู่ใต้ผลลัพธ์ และคัดลอกได้ในคลิกเดียว
ตัวแปลงนี้ใช้ฟรีไหม
ฟรี ไม่ต้องสมัคร และทำงานในเบราว์เซอร์ของคุณทั้งหมด