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