color

خاصية لون النص color

خاصية color تلوّن النص — وتورَّث لكل الأبناء، وقيمتها currentColor سر الأيقونات التي تتلون مع نصها تلقائيًا.

أبسط الخصائص وأعمقها أثرًا لخاصيتين فيها: **الوراثة** — لوّن body فيرث الموقع كله لونه الأساسي، و**currentColor** — كلمة سحرية تعني «لون النص الحالي» تجعل حدود وأيقونات SVG تتبع نص أبيها بلا تكرار.

صيغ الألوان الحديثة: hex المختصر، rgb مع شفافية بصيغة السلاش الجديدة rgb(0 0 0 / 0.5)، وأناقة oklch للتدرجات المتساوية إدراكيًا. ولا تنسَ التباين: 4.5:1 على الأقل للنص العادي (معيار WCAG الذي يفحصه Lighthouse).

الصياغة

body { color: #17151d; }
.muted { color: rgb(0 0 0 / 0.55); }
.icon { fill: currentColor; }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .parent { color: #6d28d9; font-size: 18px; }
  .chip { border: 2px solid currentColor; border-radius: 99px; padding: 2px 12px; font-size: 14px; }
</style>
<div class="parent">
  نص بنفسجي موروث،
  <span class="chip">وحدّي currentColor</span>
  — غيّر لون الأب وسنتبعه معًا.
</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
#7c5cff	hex — الصيغة اليومية المختصرة
rgb(0 0 0 / 0.5)	الصيغة الحديثة بشفافية — بلا rgba القديمة
currentColor	لون النص الحالي — للحدود وSVG التابعة
inherit	فرض وراثة اللون (الروابط لا ترث افتراضيًا)

💡 نصائح عملية

نظام ألوان = متغيرات: --foreground و--muted... ثم color: var(--muted) بكل مكان
أيقونات SVG داخل أزرار: fill="currentColor" وتنتهي قصة تلوينها للأبد

⚠️ أخطاء شائعة

رمادي فاتح جميل بالتصميم فاشل بالتباين — افحص 4.5:1 دائمًا
تلوين كل عنصر يدويًا وتجاهل الوراثة من الجذر

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs