ألوان CSS

تعرف على كيفية التعامل مع الألوان في CSS

بشكل افتراضي ، يتم تقديم صفحة HTML بواسطة متصفحات الويب للأسف من حيث الألوان المستخدمة.

لدينا خلفية بيضاء ولون أسود وروابط زرقاء. هذا هو.

لحسن الحظ ، يمنحنا CSS القدرة على إضافة ألوان إلى تصميماتنا.

لدينا هذه الخصائص:

  • color
  • background-color
  • border-color

كل منهم يقبل أقيمة اللون، والتي يمكن أن تكون بأشكال مختلفة.

الألوان المسماة

أولاً ، لدينا كلمات رئيسية لـ CSS تحدد الألوان. بدأت CSS بـ 16 ، ولكن يوجد اليوم عدد كبير من أسماء الألوان:

  • aliceblue
  • antiquewhite
  • aqua
  • aquamarine
  • azure
  • beige
  • bisque
  • black
  • blanchedalmond
  • blue
  • blueviolet
  • brown
  • burlywood
  • cadetblue
  • chartreuse
  • chocolate
  • coral
  • cornflowerblue
  • cornsilk
  • crimson
  • cyan
  • darkblue
  • darkcyan
  • darkgoldenrod
  • darkgray
  • darkgreen
  • darkgrey
  • darkkhaki
  • darkmagenta
  • darkolivegreen
  • darkorange
  • darkorchid
  • darkred
  • darksalmon
  • darkseagreen
  • darkslateblue
  • darkslategray
  • darkslategrey
  • darkturquoise
  • darkviolet
  • deeppink
  • deepskyblue
  • dimgray
  • dimgrey
  • dodgerblue
  • firebrick
  • floralwhite
  • forestgreen
  • fuchsia
  • gainsboro
  • ghostwhite
  • gold
  • goldenrod
  • gray
  • green
  • greenyellow
  • grey
  • honeydew
  • hotpink
  • indianred
  • indigo
  • ivory
  • khaki
  • lavender
  • lavenderblush
  • lawngreen
  • lemonchiffon
  • lightblue
  • lightcoral
  • lightcyan
  • lightgoldenrodyellow
  • lightgray
  • lightgreen
  • lightgrey
  • lightpink
  • lightsalmon
  • lightseagreen
  • lightskyblue
  • lightslategray
  • lightslategrey
  • lightsteelblue
  • lightyellow
  • lime
  • limegreen
  • linen
  • magenta
  • maroon
  • mediumaquamarine
  • mediumblue
  • mediumorchid
  • mediumpurple
  • mediumseagreen
  • mediumslateblue
  • mediumspringgreen
  • mediumturquoise
  • mediumvioletred
  • midnightblue
  • mintcream
  • mistyrose
  • moccasin
  • navajowhite
  • navy
  • oldlace
  • olive
  • olivedrab
  • orange
  • orangered
  • orchid
  • palegoldenrod
  • palegreen
  • paleturquoise
  • palevioletred
  • papayawhip
  • peachpuff
  • peru
  • pink
  • plum
  • powderblue
  • purple
  • rebeccapurple
  • red
  • rosybrown
  • royalblue
  • saddlebrown
  • salmon
  • sandybrown
  • seagreen
  • seashell
  • sienna
  • silver
  • skyblue
  • slateblue
  • slategray
  • slategrey
  • snow
  • springgreen
  • steelblue
  • tan
  • teal
  • thistle
  • tomato
  • turquoise
  • violet
  • wheat
  • white
  • whitesmoke
  • yellow
  • yellowgreen

زائدtranparent، وcurrentColorمما يشير إلىcolorالخاصية ، على سبيل المثال مفيدة لجعلborder-colorترثها.

تم تعريفها فيCSS Color Module, Level 4. هم غير حساسين لحالة الأحرف.

ويكيبيديا لديها ملفطاولة جميلةالذي يتيح لك اختيار اللون المثالي من اسمه.

الألوان المسماة ليست هي الخيار الوحيد.

RGB و RGBa

يمكنك استعمال الrgb()وظيفة لحساب لون من تدوين RGB الخاص به ، والذي يضبط اللون بناءً على أجزائه الأحمر والأخضر والأزرق. من 0 الى 255:

p {
  color: rgb(255, 255, 255); /* white */
	background-color: rgb(0, 0, 0); /* black */
}

rgba()يتيح لك إضافة قناة ألفا لإدخال جزء شفاف. يمكن أن يكون رقمًا من 0 إلى 1:

p {
	background-color: rgba(0, 0, 0, 0.5);
}

تدوين سداسي عشري

خيار آخر هو التعبير عن أجزاء RGB من الألوان بالتدوين السداسي العشري ، والذي يتكون من 3 كتل.

الأسود ، وهوrgb(0,0,0)يتم التعبير عنها كـ#000000أو#000(يمكننا اختصار الرقمين إلى 1 إذا كانا متساويين).

أبيض،rgb(255,255,255)يمكن التعبير عنها كـ#ffffffأو#fff.

يسمح التدوين السداسي العشري بالتعبير عن رقم من 0 إلى 255 في رقمين فقط ، حيث يمكن أن ينتقلوا من 0 إلى "15" (f).

يمكننا إضافة قناة ألفا بإضافة رقم أو رقمين إضافيين في النهاية ، على سبيل المثال#00000033. لا تدعم جميع المتصفحات الترميز المختصر ، لذا استخدم جميع الأرقام الستة للتعبير عن جزء RGB.

HSL و HSLa

هذه إضافة أحدث إلى CSS.

HSL = خفة تشبع تدرج اللون.

في هذا الترميز ، الأسود هوhsl(0, 0%, 0%)والأبيضhsl(0, 0%, 100%).

إذا كنت معتادًا على HSL أكثر من RGB بسبب معرفتك السابقة ، فيمكنك بالتأكيد استخدام ذلك.

انت ايضا تملكhsla()الذي يضيف قناة ألفا إلى المزيج ، مرة أخرى رقم من 0 إلى 1:hsl(0, 0%, 0%, 0.5)

تحميل مجانيكتيب CSS


المزيد من دروس css: