تدعم جميع المحركات الرئيسية الآن مساحات ألوان CSS ودوالها الجديدة. اكتشف كيف يمكنها إضفاء الحيوية على تصميماتك.
توفِّر خدمة مقارنة الأسعار (CSS) الآن مساحات الألوان التي تتيح لنا الوصول إلى الألوان خارج سلسلة sRGB. وهذا يعني أنه يمكنك دعم الشاشات عالية الدقة (HD)، وذلك باستخدام ألوان من التدرجات اللونية العالية الدقة. يأتي هذا الدعم مع دوال جديدة للاستفادة بشكل أفضل من الألوان على الويب.
الوصول إلى مساحات الألوان من CSS
لدينا حاليًا عدد من الدوال التي تتيح لنا الوصول إلى الألوان في السلسلة sRGB - rgb() وhsl() وhwb(). وتتوفّر الآن وظيفة color() في المتصفّحات، وهي طريقة تمت تسويتها للوصول إلى الألوان داخل أي مساحة ألوان بنموذج أحمر أخضر أزرق. ويشمل ذلك sRGB وDisplay P3 وRec2020. يمكنك الاطّلاع على بعض الأمثلة في لغة CSS التالية:
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
وتتوفّر أيضًا عدة دوال تسمح بالوصول إلى مساحات الألوان بخلاف sRGB باستخدام lch() وlab() وoklch() وoklab().
يمكنك التعرف على كل مساحات الألوان المختلفة هذه في دليل ألوان CSS عالية الدقة.
الدالة color-mix()
بالإضافة إلى مساحات الألوان الجديدة هذه، تتيح جميع المحرّكات الآن استخدام الدالة color-mix(). تتيح هذه الدالة مزج لون في آخر، في أي من مساحات اللون. في لغة CSS التالية، يتم مزج 25% من اللون الأزرق إلى اللون الأبيض، في مساحة لون srgb.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
مزيد من المعلومات حول color-mix()
تتيح لك هذه الدوال ومساحات الألوان الجديدة الاستمتاع بلون عالي الدقة بألوان زاهية على الويب. للحصول على أفكار جديدة، يمكنك البدء بإنشاء بعض التدرجات الجميلة باستخدام أداة إنشاء التدرجات العالية الدقة في gradient.style.