وظيفة color() في CSS

التعريف والاستخدام

تعريف CSS color() الوظيفة تسمح بتحديد اللون في مساحة اللون المحددة.

مثال

مثال 1

تحديد لون الخلفية في مساحة اللون display-p3 (الشفافية 0.3):

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(display-p3 0.6 0.6 0 / .3);
}

جرب بنفسك

مثال 2

استخدام قواعد اللغة النسبية:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(from blue srgb r g b / 0.4);
}

جرب بنفسك

قواعد اللغة CSS

قواعد اللغة المطلقة

color(colorspace c1 c2 c3 / أ)
القيمة الوصف
colorspace

مطلوب. يحدد مساحة اللون المحددة مسبقًا واحدة من المحددة مسبقًا:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

مطلوب. يمثل قيمة مكونات مساحة اللون.

يمكن كتابة كل قيمة كرقم (بين 0 و1)، كنسبة مئوية (بين 0% و100%) أو ككلمة مفتاحية none.
/ أ

اختياري. يمثل قيمة قناة الشفافية لللون (0 يمثل الشفافية الكاملة، 100 يمثل عدم الشفافية).

يمكن أيضًا استخدام none (يعني عدم وجود قناة شفافية).

القيمة الافتراضية هي 100.

قواعد اللغة النسبية

color(from color colorspace c1 c2 c3 / أ)
القيمة الوصف
from color

تبدأ بكلمة المفتاح from، تتبعها قيمة اللون لللون الأصلي.

هذه هي اللون الأصلي التي تستند إليها الألوان النسبية.
colorspace

مطلوب. يحدد مساحة اللون المحددة مسبقًا واحدة من المحددة مسبقًا:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

مطلوب. يمثل قيمة مكونات مساحة اللون.

يمكن كتابة كل قيمة كرقم (بين 0 و1)، كنسبة مئوية (بين 0% و100%) أو ككلمة مفتاحية none.
/ أ

اختياري. يمثل قيمة قناة الشفافية لللون (0 يمثل الشفافية الكاملة، 100 يمثل عدم الشفافية).

يمكن أيضًا استخدام none (يعني عدم وجود قناة شفافية).

القيمة الافتراضية هي 100.

تفاصيل التقنية

الإصدار: مodule CSS Color Level 5

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذه الوظيفة بشكل كامل.

كروم إدج فايرفوكس Safari Opera
111 111 113 15 97

الصفحات ذات الصلة

المرجع:الألوان CSS