CSS Academy · درس

قيم الألوان: المسماة وHex وRGB وHSL

تعلّم جميع تنسيقات الألوان في CSS: الألوان المسماة، ورموز hex، والدالتين rgb() وhsl().

الدرس 1 من 413 خطوة

قيم الألوان: المسماة وHex وRGB وHSL درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

تنسيقات الألوان في CSS

يدعم CSS تنسيقات متعددة للألوان. يعتمد اختيار التنسيق المناسب على طريقة عملكم وأدواتكم، وعلى ما إذا كنتم بحاجة إلى الشفافية أو المعالجة الديناميكية.

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

يعرّف CSS أكثر من 140 لونًا مُسمّى مثل red وtomato وcornflowerblue. وهي مناسبة جدًا لإنشاء النماذج الأولية بسرعة، لكنها توفر دقة محدودة.

<h1>Named Colors</h1>
  <button>cornflowerblue button</button>

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

تستخدم الألوان السداسية عشرية الرمز # متبوعًا بـ 6 أرقام سداسية عشرية (أو 3 أرقام في الصيغة المختصرة). يمثّل كل زوج من الأرقام اللون الأحمر والأخضر والأزرق (من 0 إلى 255).

<p class="full-hex">Full hex: #ff6347</p>
  <p class="shorthand-hex">Shorthand hex: #f64</p>

الألوان السداسية عشرية مع قناة ألفا

أضيفوا زوجًا رابعًا من الأرقام السداسية عشرية (أو رقمًا رابعًا في الصيغة المختصرة) لتمثيل شفافية ألفا:

<div class="hex-alpha-full">8-digit hex alpha</div>
  <div class="hex-alpha-short">4-digit shorthand alpha</div>

ألوان RGB

تأخذ rgb() ثلاثة أعداد صحيحة (من 0 إلى 255) لقنوات الأحمر والأخضر والأزرق. وهذه الصيغة سهلة القراءة والفهم عند التعامل معها برمجيًا.

<p class="rgb-tomato">rgb(255, 99, 71)</p>
  <p class="rgb-black">rgb(0, 0, 0)</p>
  <p class="rgb-white">rgb(255, 255, 255)</p>

ألوان RGBA

أضيفوا معاملًا رابعًا (من 0 إلى 1) إلى rgb() لتمثيل شفافية ألفا. وهذا يكافئ صيغة rgb() الأحدث التي تستخدم شرطة مائلة.

<p class="rgba-legacy">rgba(255, 99, 71, 0.5)</p>
  <p class="rgba-modern">rgb(255 99 71 / 0.5)</p>

ألوان HSL

تحدّد hsl() اللون من خلال درجة اللون (من 0 إلى 360°) والتشبّع (من 0 إلى 100%) والإضاءة (من 0 إلى 100%). وهذه الطريقة أكثر سهولة في فهمها عند إنشاء لوحات الألوان والتنويعات.

<p class="hsl-tomato">hsl(9, 100%, 64%)</p>
  <p class="hsl-steelblue">hsl(210, 70%, 50%)</p>

ألوان HSLA

مثل rgba()، تضيف hsla() قناة ألفا. يتيح CSS الحديث استخدام فاصل شرطة مائلة بدلًا من ذلك:

<p class="hsla-legacy">hsla(9, 100%, 64%, 0.5)</p>
  <p class="hsla-modern">hsl(9 100% 64% / 0.5)</p>

إنشاء تنويعات الألوان باستخدام HSL

تتألق HSL عند إنشاء درجات الألوان الفاتحة والداكنة. حافظوا على درجة اللون والتشبّع ثابتين، وغيّروا الإضاءة:

<button class="btn-light">Light</button>
  <button class="btn">Base</button>
  <button class="btn-dark">Dark</button>

الكلمة المفتاحية currentColor

إن currentColor قيمة ديناميكية تساوي قيمة خاصية color الحالية للعنصر. استخدموها لجعل الحدود والظلال أو تعبئات SVG ترث لون النص تلقائيًا.

<a href="#">Link with currentColor border</a>

الكلمة المفتاحية transparent

تعادل الكلمة المفتاحية transparent القيمة rgba(0,0,0,0)، أي شفافية كاملة. وهي مفيدة لتأثيرات التحويم التي تنتقل فيها القيمة من الشفافية إلى لون.

<button>Transparent background</button>

تحقق سريع

أي تنسيق ألوان يسهّل إنشاء درجات أفتح وأغمق من درجة اللون نفسها؟

أجب عليها في الدرس التفاعلي

مراجعة

يوفر CSS تنسيقات للألوان المسمّاة والسداسية عشرية وRGB وHSL. وتُعد HSL مثالية لمعالجة الألوان برمجيًا. تقبل جميع التنسيقات قناة ألفا للشفافية. كما تُعد currentColor وtransparent كلمتين مفتاحيتين خاصتين مفيدتين.

البدء مجانًا

تعلم CSS مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 40
الدروس: 159

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «قيم الألوان: المسماة وHex وRGB وHSL» مجاني؟

نعم — نص درس «قيم الألوان: المسماة وHex وRGB وHSL» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «قيم الألوان: المسماة وHex وRGB وHSL»؟

تعلّم جميع تنسيقات الألوان في CSS: الألوان المسماة، ورموز hex، والدالتين rgb() وhsl(). تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «قيم الألوان: المسماة وHex وRGB وHSL»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy