แปลง HWB เป็น HSLA
วางค่า HWB แล้วได้ 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) |
ตัวอย่างการแปลง HWB เป็น HSLA
เกี่ยวกับ HWB และ HSLA
HWB อธิบายสีด้วยฮิว บวกปริมาณสีขาวและสีดำที่ผสมลงไป เป็นส่วนหนึ่งของ CSS Color 4 และสะดวกสำหรับทำสีอ่อนและสีเข้ม
HSLA คือ HSL ที่เพิ่มช่องอัลฟาสำหรับความทึบ เขียนเป็น hsla(11, 100%, 60%, 0.5) อัลฟามีค่าตั้งแต่ 0 (โปร่งใสทั้งหมด) ถึง 1 (ทึบเต็มที่) และ CSS สมัยใหม่รับค่านี้ใน hsl() ได้ด้วย
การแปลงทำงานอย่างไร
เราอ่านค่า HWB แปลงเป็น CIE XYZ ด้วยเมทริกซ์จากข้อกำหนด CSS Color 4 แล้วแปลงต่อเป็น HSLA ค่าที่อยู่นอกขอบเขตสีปลายทางจะถูกปรับด้วยอัลกอริทึมของ CSS Color 4 ซึ่งคงความสว่างและฮิวไว้ แล้วลดความสดลง
คำถามที่พบบ่อย
แปลง HWB เป็น HSLA อย่างไร
วางหรือพิมพ์ค่า HWB ลงในช่องด้านบน PickShade จะแปลงด้วยสูตร CSS Color 4 ทันทีที่พิมพ์ และคลิกเดียวก็คัดลอกค่า HSLA ได้
การแปลง HWB เป็น HSLA แม่นยำหรือไม่
การคำนวณแม่นยำ ผลลัพธ์ถูกปัดเศษเฉพาะตอนแสดงผล โดยเหลือทศนิยมพอที่จะแปลงกลับเป็นสีเดิมได้ หากสีไม่อยู่ในขอบเขตสีปลายทาง PickShade จะเตือนและแสดงสีที่ใกล้ที่สุดที่อยู่ในขอบเขต
ได้รูปแบบอื่นพร้อมกันด้วยไหม
ได้ รูปแบบอื่นทั้งหมด รวมถึง OKLCH, Display P3, Tailwind, SwiftUI, Flutter และ Android แสดงอยู่ใต้ผลลัพธ์ และคัดลอกได้ในคลิกเดียว
ตัวแปลงนี้ใช้ฟรีไหม
ฟรี ไม่ต้องสมัคร และทำงานในเบราว์เซอร์ของคุณทั้งหมด