وثائق CSS قابلة للتشغيل: الألوان في CSS

Q: ما صيغ الألوان التي تدعمها CSS؟

الألوان المسماة (red)، وhex (#ff0000)، وrgb() وhsl() وhwb() وlab() وlch() وoklab() وoklch() وcolor()، إضافةً إلى الكلمتين المفتاحيتين transparent وcurrentColor. تغطي hex وrgb وhsl معظم العمل اليومي.

Q: ما الفرق بين rgb وrgba؟

لا فرق الآن. rgba() اسم بديل أقدم: تسمح CSS الحالية لـ rgb() بقبول قيمة ألفا (rgb(37 99 235 / 50%))، والدالتان تقبلان الوسائط نفسها في كل المتصفحات الحالية.

Q: كيف أجعل لونًا شفافًا في CSS؟

أضف قناة ألفا: rgb(0 0 0 / 50%)، أو hsl(221 83% 53% / 0.5)، أو hex من 8 خانات مثل #2563eb80. على عكس opacity، يبهت هذا اللون وحده لا العنصر كله.

Q: ماذا تعني currentColor؟

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

طرق كتابة اللون في CSS

كل خاصية تقبل لونًا (color وbackground-color وborder-color والظلال وfill في SVG) تقبل الصيغ نفسها. العينات الأربع الأولى هي الأزرق نفسه مكتوبًا بأربع طرق، والخامسة لون مسمى قريب منه:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One blue, four formats</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .swatch { padding: 10px 14px; margin: 6px 0; color: white; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="swatch" style="background: #2563eb;">#2563eb (hex)</div>
  <div class="swatch" style="background: rgb(37 99 235);">rgb(37 99 235)</div>
  <div class="swatch" style="background: rgb(37, 99, 235);">rgb(37, 99, 235) (comma syntax)</div>
  <div class="swatch" style="background: hsl(221.2 83.2% 53.3%);">hsl(221.2 83.2% 53.3%)</div>
  <div class="swatch" style="background: royalblue;">royalblue (a named color, close but not equal)</div>
</body>
</html>

الصيغة	مثال	الأنسب لـ
مسمى	`tomato`، `rebeccapurple`	التجارب السريعة والنماذج الأولية
Hex	`#2563eb`، `#25e`	النسخ من أدوات التصميم
`rgb()`	`rgb(37 99 235)`	إضافة الشفافية، والعمل بقيم RGB
`hsl()`	`hsl(221 83% 53%)`	صنع درجات أفتح وأغمق من لون واحد
`oklch()`	`oklch(55% 0.2 262)`	لوحات ألوان بإضاءة مُدرَكة متساوية
كلمات مفتاحية	`transparent`، `currentColor`	راجع الأقسام أدناه

ألوان Hex

لون hex هو # يليه الأحمر والأخضر والأزرق، كل منها بخانتين ست عشريتين، من 00 إلى ff. ثلاثة أشكال هي اختصارات أو امتدادات:

#rgb: تتضاعف كل خانة، فـ #25e هو #2255ee.
#rrggbbaa: الزوج الأخير هو ألفا، فـ #2563eb80 معتم بنحو 50%.
#rgba: الشكل المختصر مع ألفا.

لا تتأثر hex بحالة الأحرف: #2563EB و#2563eb اللون نفسه.

rgb() وrgba()

تقبل rgb() الأحمر والأخضر والأزرق من 0 إلى 255 (أو من 0% إلى 100%). القيمة الرابعة الاختيارية بعد الشرطة المائلة هي ألفا، من 0 (غير مرئي) إلى 1، أو من 0% إلى 100%.

color: rgb(37 99 235);          /* modern space syntax */
color: rgb(37 99 235 / 50%);    /* half transparent */
color: rgba(37, 99, 235, 0.5);  /* older comma syntax, same result */

أصبحت rgba() وrgb() الدالة نفسها: كلتاهما تقبل الصيغتين وألفا اختيارية. الشيفرة القديمة تستخدم rgba() حين تحتاج إلى الشفافية، وتبقى تعمل.

hsl(): أسهل صيغة للتعديل

تصف hsl() اللون كما يفكر فيه الناس: درجة لون من عجلة الألوان، وتشبع، وإضاءة. ثبّت درجة اللون وغيّر الإضاءة لتحصل على مقياس كامل:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HSL scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 4px; margin-bottom: 8px; }
    .row div { flex: 1; padding: 20px 4px; text-align: center; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="row">
    <div style="background: hsl(221 83% 90%);">90%</div>
    <div style="background: hsl(221 83% 75%);">75%</div>
    <div style="background: hsl(221 83% 53%); color: white;">53%</div>
    <div style="background: hsl(221 83% 35%); color: white;">35%</div>
    <div style="background: hsl(221 83% 20%); color: white;">20%</div>
  </div>
  <div class="row">
    <div style="background: hsl(0 70% 55%);">0 red</div>
    <div style="background: hsl(60 70% 55%);">60 yellow</div>
    <div style="background: hsl(120 70% 55%);">120 green</div>
    <div style="background: hsl(240 70% 55%); color: white;">240 blue</div>
    <div style="background: hsl(300 70% 55%);">300 magenta</div>
  </div>
</body>
</html>

الصف الأول يثبّت درجة اللون 221 والتشبع 83% ويغيّر الإضاءة فقط. والصف الثاني يدور حول عجلة الألوان بالتشبع والإضاءة نفسيهما.

الشفافية: ألفا مقابل opacity

قناة ألفا تجعل لونًا واحدًا شفافًا. أما opacity فتجعل العنصر كله شفافًا، بنصه وأبنائه:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alpha vs opacity</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600;
      background: repeating-linear-gradient(90deg, #fde68a 0 16px, #ffffff 16px 32px);
      padding: 12px;
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .alpha { background: rgb(37 99 235 / 40%); }
    .opacity { background: rgb(37 99 235); opacity: 0.4; }
  </style>
</head>
<body>
  <div class="box alpha" id="a">Alpha background: the text stays solid</div>
  <div class="box opacity" id="o">opacity 0.4: the text fades too</div>
</body>
</html>

transparent كلمة مفتاحية للأسود الشفاف تمامًا، rgb(0 0 0 / 0). وهي الخلفية الافتراضية لمعظم العناصر.

currentColor

تساوي currentColor قيمة color الخاصة بالعنصر. الزر الذي يستخدمها لحده وأيقونته ونصه يغيّر كل شيء بتصريح واحد:

.button {
  color: #16a34a;
  border: 2px solid currentColor;
}
.button svg { fill: currentColor; }

الحدود تأخذ currentColor افتراضيًا أصلًا، ولهذا يطابق border: 2px solid من دون لون لونَ النص.

جرّب أي لون

اكتب لونًا بأي صيغة. يحلله المتصفح ويعرض ما حسبه؛ واللون غير الصالح يترك العينة كما هي.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #swatch { height: 60px; margin: 12px 0; border: 1px solid #d1d5db; border-radius: 6px; background: white; }
  </style>
</head>
<body>
  <label>Color: <input id="val" value="hsl(38 92% 50%)" size="28"></label>
  <div id="swatch"></div>
  <code id="out"></code>
  <script>
    const swatch = document.getElementById('swatch');
    const input = document.getElementById('val');
    const show = () => {
      if (!CSS.supports('color', input.value)) {
        document.getElementById('out').textContent = 'not a valid color';
        return;
      }
      swatch.style.background = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(swatch).backgroundColor;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

جرّب tomato و#0f0 و#2563eb80 وrgb(0 0 0 / 25%) وoklch(70% 0.15 150) وcolor-mix(in srgb, #2563eb, white 50%).

دوال الألوان الأحدث

oklch(L C H): الإضاءة والكروما ودرجة اللون في فضاء مصمم بحيث تبدو الإضاءة المتساوية متساوية فعلًا. اللوحات المبنية فيه فيها خطوات وسطى باهتة أقل من لوحات HSL.
color-mix(in srgb, A, B 30%): تمزج لونين. مع white أو black تصنع درجات أفتح وأغمق من لون علامة تجارية واحد، وتعمل مع متغيرات CSS: color-mix(in srgb, var(--brand), white 80%).

كلتاهما تعمل في الإصدارات الحالية من Chrome وFirefox وSafari. احفظ ألوان العلامة التجارية في متغيرات CSS كي تبقى الصيغ التي تختارها في مكان واحد.

أخطاء شائعة

نسيان # في لون hex. color: 2563eb غير صالحة وتُتجاهل.
استخدام opacity لجعل الخلفية شفافة. تبهت النص أيضًا. استخدم لونًا بقناة ألفا.
خلط الفواصل في الصيغة الحديثة. rgb(37 99, 235) غير صالحة: استخدم مسافات فقط أو فواصل فقط.
افتراض أن اللون المسمى يطابق تصميمك. royalblue ليس #2563eb. انسخ الرمز الدقيق.
الحكم على التباين بالعين. افحص ألوان النص مقابل خلفيتها بأداة فحص التباين؛ 4.5:1 هو الحد الأدنى لنص الجسم.

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

ما صيغ الألوان التي تدعمها CSS؟

الألوان المسماة (red)، وhex (#ff0000)، وrgb() وhsl() وhwb() وlab() وlch() وoklab() وoklch() وcolor()، إضافةً إلى الكلمتين المفتاحيتين transparent وcurrentColor. تغطي hex وrgb وhsl معظم العمل اليومي.

ما الفرق بين rgb وrgba؟

لا فرق الآن. rgba() اسم بديل أقدم: تسمح CSS الحالية لـ rgb() بقبول قيمة ألفا (rgb(37 99 235 / 50%))، والدالتان تقبلان الوسائط نفسها في كل المتصفحات الحالية.

كيف أجعل لونًا شفافًا في CSS؟

أضف قناة ألفا: rgb(0 0 0 / 50%)، أو hsl(221 83% 53% / 0.5)، أو hex من 8 خانات مثل #2563eb80. على عكس opacity، يبهت هذا اللون وحده لا العنصر كله.

ما هو HSL في CSS؟

درجة اللون والتشبع والإضاءة. درجة اللون زاوية على عجلة الألوان (0 أحمر، 120 أخضر، 240 أزرق)، والتشبع مدى حيوية اللون، والإضاءة من 0% أسود إلى 100% أبيض. يسهّل صنع درجات أفتح وأغمق: غيّر الرقم الأخير فقط.

ماذا تعني currentColor؟

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

مفاهيم ذات صلة