محول HSB / HSV إلى HSLA
الصق قيمة HSB / HSV واحصل على 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) |
أمثلة تحويل HSB / HSV إلى HSLA
عن HSB / HSV وHSLA
تستخدم صيغة HSV، وتُسمى أيضًا HSB، الصبغة والتشبع والقيمة. يعتمد عليها Photoshop وFigma ومعظم منتقيات الألوان في المربع اللوني.
HSLA هو HSL مع قناة ألفا للعتامة، ويُكتب هكذا hsla(11, 100%, 60%, 0.5). تتراوح ألفا من 0 (شفاف بالكامل) إلى 1 (معتم بالكامل)، وتقبلها CSS الحديثة داخل hsl() أيضًا.
كيف يعمل التحويل
نقرأ قيمة HSB / HSV ونحوّلها إلى CIE XYZ بالمصفوفات الواردة في مواصفة CSS Color 4، ثم إلى HSLA. القيم الخارجة عن النطاق اللوني الهدف تُعالَج بخوارزمية CSS Color 4 التي تحافظ على الإضاءة والصبغة وتخفّض الكروما.
أسئلة وأجوبة
كيف أحوّل HSB / HSV إلى HSLA؟
الصق قيمة HSB / HSV أو اكتبها في الحقل أعلاه. يحوّلها PickShade بمعادلات CSS Color 4 أثناء الكتابة، ونقرة واحدة تنسخ قيمة HSLA.
هل تحويل HSB / HSV إلى HSLA دقيق؟
الحسابات دقيقة، والنتيجة تُقرَّب للعرض فقط، مع عدد كافٍ من الأرقام للعودة إلى اللون نفسه. وإذا لم يقع اللون ضمن النطاق الهدف، ينبّهك PickShade ويعرض أقرب لون يقع ضمنه.
هل يمكنني الحصول على صيغ أخرى في الوقت نفسه؟
نعم. كل الصيغ الأخرى، ومنها OKLCH وDisplay P3 وTailwind وSwiftUI وFlutter وAndroid، مدرجة أسفل النتيجة وتُنسخ بنقرة واحدة.
هل هذا المحول مجاني؟
نعم. مجاني، ولا يحتاج إلى تسجيل، ويعمل بالكامل في متصفحك.