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

Q: كيف أغيّر لون الخط في HTML؟

استخدم خاصية CSS المسماة color، في ملف أنماط أو في السمة style: Blue text . الوسم القديم ملغى.

Q: كيف أغيّر لون كلمة واحدة؟

أحط الكلمة بـ وأعطها لونًا: This is red . واستخدم أو بدل إن كانت الكلمة مهمة أو مؤكدة أيضًا.

Q: هل هي font-color أم color في CSS؟

هي color. لا توجد خاصية font-color ولا text-color؛ والمتصفح يتجاهلهما.

لون النص في HTML: كيف تغيّر لون الخط باستخدام CSS

الوسم ملغى؛ لون النص في HTML يُضبط بخاصية CSS المسماة color. تعلّم كيف تلوّن صفحة كاملة، أو كلمة واحدة، أو رابطًا، أو عنوانًا، بالألوان المسماة وhex وrgb، وكيف تبقي النص مقروءًا.

تحتوي هذه الصفحة على محررات قابلة للتشغيل - حرّر، شغّل، وشاهد النتيجة فوراً.

بقلم Kevin Spektor, Co-founder & CTO

نُشر في Sep 24, 2026

كيف تغيّر لون النص في HTML

استخدم خاصية CSS المسماة color. تضبط لون نص العنصر، ويرث كل عنصر بداخله اللون نفسه ما لم يضبط لونه الخاص.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text color</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .blue { color: #2563eb; }
    .green { color: rgb(22 163 74); }
  </style>
</head>
<body>
  <p class="blue">Blue text from a class in a stylesheet.</p>
  <p class="green">Green text written as rgb().</p>
  <p style="color: darkorange;">Orange text from a style attribute.</p>
  <p>Default text, then <span style="color: #dc2626;">one red word</span> in it.</p>
</body>
</html>

اسم الخاصية color، لا font-color ولا text-color. هذان الاسمان غير موجودين في CSS ويُتجاهلان بصمت.

لماذا لا تستخدم الوسم font

تعرض الدروس القديمة . أُزيل هذا الوسم من HTML منذ سنوات: تعدّه أدوات التحقق خطأ، ويخلط التنسيق بالوسوم، فتغيير اللون يعني تعديل كل وسم يدويًا. ما زالت المتصفحات ترسمه للتوافق، وهذا السبب الوحيد لأنه يبدو كأنه يعمل.

<!-- obsolete -->
<font color="red">Warning</font>

<!-- use this -->
<span style="color: red;">Warning</span>

<!-- or better, a class you can change in one place -->
<span class="warning">Warning</span>

طرق كتابة اللون

تقبل color كل صيغ الألوان في CSS. الأربع الأكثر شيوعًا:

الصيغة	مثال	ملاحظات
مسمى	`color: tomato;`	148 لونًا مسمى، مفيدة للتجارب السريعة
Hex	`color: #2563eb;`	الأكثر شيوعًا في ملفات التصميم
rgb()	`color: rgb(37 99 235);`	الأحمر والأخضر والأزرق من 0 إلى 255
hsl()	`color: hsl(221 83% 53%);`	درجة اللون والتشبع والإضاءة: سهل جعله أفتح أو أغمق

يمكن أن تأخذ Hex وrgb() وhsl() قناة ألفا لنص شبه شفاف، مثل #2563eb80 أو rgb(37 99 235 / 50%). تشرح صفحة الألوان في CSS كل صيغة.

تلوين صفحة كاملة أو عنوان أو قسم

اضبط اللون مرة واحدة على body ودع الوراثة تتولى الباقي، ثم تجاوزه حيث تحتاج:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inherited color</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #374151; }
    h1 { color: #111827; font-size: 24px; }
    .note { color: #92400e; background: #fef3c7; padding: 8px 12px; }
  </style>
</head>
<body>
  <h1>Heading in near black</h1>
  <p>Body text inherits dark gray from body.</p>
  <div class="note">
    <p>This box sets amber text, and the paragraph inside inherits it.</p>
  </div>
</body>
</html>

الأسود الناعم القريب من الأسود مثل #111827 أو #374151 على الأبيض أريح للعين من #000000 الخالص، وما زال يُقرأ كأسود.

ألوان الروابط

الروابط استثناء من الوراثة: يعطيها المتصفح أزرقها الخاص (وبنفسجيًا بعد زيارتها)، فلا يصل إليها اللون المضبوط على الأب. اضبطه على الرابط، أو أخبر الرابط أن يرث:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link color</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dark { color: #16a34a; }
    .brand a { color: #7c3aed; }
    .brand a:hover { color: #5b21b6; }
    .inherit a { color: inherit; }
  </style>
</head>
<body>
  <p class="dark">Green paragraph, but <a href="#x" id="l1">this link</a> keeps the browser color.</p>
  <p class="dark brand">Green paragraph, <a href="#x" id="l2">this link</a> is set to purple.</p>
  <p class="dark inherit">Green paragraph, <a href="#x" id="l3">this link</a> inherits green.</p>
</body>
</html>

تتيح لك :hover و:visited و:focus-visible تغيير اللون لكل حالة؛ وتشرحها صفحة hover. حين يكون لون الرابط مثل لون النص المحيط به، أبقِ الخط الذي تحته كي يبقى معروفًا أنه رابط.

اجعل النص مقروءًا: التباين

لون النص نصف الزوج فقط؛ والخلفية هي النصف الآخر. يطلب WCAG نسبة تباين 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير (نحو 24px، أو 19px عريض).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contrast</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { padding: 8px 12px; margin: 6px 0; }
    .fail { color: #9ca3af; background: #ffffff; }
    .pass { color: #4b5563; background: #ffffff; border: 1px solid #e5e7eb; }
    .dark { color: #f9fafb; background: #1f2937; }
  </style>
</head>
<body>
  <p class="fail">#9ca3af on white: about 2.5:1, too light</p>
  <p class="pass">#4b5563 on white: about 7.6:1, passes</p>
  <p class="dark">#f9fafb on #1f2937: about 14:1, passes</p>
</body>
</html>

النص الرمادي الفاتح بأسلوب النص التوضيحي هو الإخفاق الأكثر شيوعًا. تعرض أدوات المطور في Chrome وFirefox نسبة التباين حين تفحص لون نص.

currentColor: إعادة استخدام لون النص

currentColor كلمة مفتاحية تساوي قيمة color للعنصر. يمكن للحدود والإطارات الخارجية وأيقونات SVG المضمّنة استخدامها، فيعيد تغيير واحد لـ color تلوين النص وزخرفته معًا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>currentColor</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tag {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border: 2px solid currentColor; border-radius: 999px;
    }
    .ok { color: #16a34a; }
    .warn { color: #d97706; }
  </style>
</head>
<body>
  <span class="tag ok">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Online
  </span>
  <span class="tag warn" id="warn">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Away
  </span>
</body>
</html>

أخطاء شائعة

كتابة font-color أو text-color. الخاصية هي color.
استخدام الوسم . إنه ملغى؛ استخدم CSS.
توقع أن ترث الروابط. اضبط a { color: ... } أو color: inherit.
اللون كإشارة وحيدة. عبارة «الحقول باللون الأحمر مطلوبة» تفشل مع القراء الذين لا يميزون الأحمر. أضف نصًا أو أيقونة.
نص رمادي منخفض التباين. تحقق من النسبة: 4.5:1 أو أكثر لنص الجسم.
استخدام opacity لتفتيح النص. يبهت العنصر كله، بخلفيته وأبنائه. استخدم لونًا أفتح أو لونًا بقناة ألفا بدلًا من ذلك.

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

كيف أغيّر لون الخط في HTML؟

استخدم خاصية CSS المسماة color، في ملف أنماط أو في السمة style: Blue text. الوسم القديم  ملغى.

هل ما زال الوسم مدعومًا؟

ما زالت المتصفحات ترسمه كي تستمر الصفحات القديمة جدًا في العمل، لكنه ملغى في HTML وتعدّه أدوات التحقق خطأ. استخدم color في CSS بدلًا منه.

كيف أغيّر لون كلمة واحدة؟

أحط الكلمة بـ  وأعطها لونًا: This is red. واستخدم  أو  بدل  إن كانت الكلمة مهمة أو مؤكدة أيضًا.

لماذا لا يتغير لون الرابط حين أضبط اللون على الأب؟

للروابط لونها الخاص من ملف أنماط المتصفح، فلا ترث لون الأب. اضبطه على الرابط نفسه (a { color: #2563eb; }) أو استخدم a { color: inherit; } ليتبع الأب.

هل هي font-color أم color في CSS؟

هي color. لا توجد خاصية font-color ولا text-color؛ والمتصفح يتجاهلهما.

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