قيم CSS اللون القانونية

CSS الألوان

الألوان في CSS يمكن تحديد الطرق التالية:

الألوان الست عشرية
ألوان RGB
الألوان رغبا
الألوان هسل
الألوان HSLA
أسماء الألوان المعرفة مسبقا / عبر المتصفح

الألوان الست عشرية

ويدعم قيم الألوان الست عشرية في جميع المتصفحات الرئيسية.

يتم تحديد اللون عشري مع: #RRGGBB، حيث RR (red) ، GG (green) وBB (blue) الأعداد الصحيحة عشري تحديد مكونات اللون. يجب أن تكون جميع القيم بين 00 و FF.

على سبيل المثال، يتم تقديم قيمة 0000FF # كما الأزرق، بسبب تعيين عنصر الأزرق إلى أعلى قيمة له (ff) ويتم تعيين آخرين إلى 00.

مثال

تعريف HEX ألوان مختلفة:

#p1 {background-color: #ff0000;}   /* red */
#p2 {background-color: #00ff00;}   /* green */
#p3 {background-color: #0000ff;}   /* blue */

انها محاولة لنفسك »

ألوان RGB

ويدعم قيم الألوان RGB في جميع المتصفحات الرئيسية.

تم تحديد قيمة لون RGB مع: rgb(red, green, blue) . كل معلمة (الأحمر والأخضر والأزرق) تحدد كثافة اللون ويمكن أن يكون عدد صحيح بين 0 و 255 أو قيمة النسبة المئوية (from 0% to 100%) .

على سبيل المثال، rgb(0,0,255) يتم تقديم القيمة مثل الأزرق، بسبب تعيين المعلمة الزرقاء إلى أعلى قيمة له (255) ، ومن المقرر أن البعض الآخر إلى 0.

أيضا، القيم التالية تعرف على قدم المساواة اللون: rgb(0,0,255) و rgb(0%,0%,100%) .

مثال

تحديد RGB ألوان مختلفة:

#p1 {background-color: rgb(255, 0, 0);}   /* red */
#p2 {background-color: rgb(0, 255, 0);}   /* green */
#p3 {background-color: rgb(0, 0, 255);}   /* blue */

انها محاولة لنفسك »

رغبا الألوان

ويدعم قيم الألوان رغبا في IE9 +، فايرفوكس 3+، كروم، سفاري، وأوبرا 10+.

قيم الألوان رغبا هي امتداد لقيم الألوان RGB مع قناة ألفا - الذي يحدد عتامة كائن.

تم تحديد قيمة اللون رغبا مع: rgba(red, green, blue, alpha) . المعلمة ألفا هو عدد يتراوح بين 0.0 (fully transparent) و 1.0 (fully opaque) .

مثال

تحديد RGB ألوان مختلفة مع التعتيم:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* blue with opacity */

انها محاولة لنفسك »

هسل الألوان

ويدعم القيم اللون الأعرج في IE9 +، فايرفوكس، كروم، سفاري، وأوبرا 10+.

هسل لتقف على هوى، والتشبع، وخفة - ويمثل التمثيل أسطواني-تنسيق الألوان.

تم تحديد قيمة اللون هسل مع: hsl(hue, saturation, lightness) .

هوى هو درجة على عجلة الألوان (from 0 to 360) - 0 (or 360) هو أحمر، 120 باللون الأخضر، 240 زرقاء. التشبع هو قيمة النسبة المئوية. 0٪ تعني الظل الرمادي و 100٪ هو لون الكامل. خفة هي أيضا مئوية؛ 0٪ سوداء، و 100٪ بيضاء.

مثال

تحديد الأعرج ألوان مختلفة:

#p1 {background-color: hsl(120, 100%, 50%);}   /* green */
#p2 {background-color: hsl(120, 100%, 75%);}   /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}   /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}    /* pastel green */

انها محاولة لنفسك »

HSLA الألوان

ويدعم القيم اللون HSLA في IE9 +، فايرفوكس 3+، كروم، سفاري، وأوبرا 10+.

قيم اللون HSLA هي امتداد لقيم الألوان هسل مع قناة ألفا - الذي يحدد عتامة كائن.

تم تحديد قيمة اللون HSLA مع: hsla(hue, saturation, lightness, alpha) ، حيث تحدد المعلمة ألفا من الابهام. المعلمة ألفا هو عدد يتراوح بين 0.0 (fully transparent) و 1.0 (fully opaque) .

مثال

تحديد الأعرج ألوان مختلفة مع التعتيم:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* pastel green with opacity */

انها محاولة لنفسك »