الألوان: الأسماء، HEX، RGB، HSL والشفافية

مقدمة في ألوان CSS

اللون هو أحد أكثر الجوانب أساسية في تصميم الويب. فهو يحدد المزاج، ويوجه عين المستخدم، ويؤسس التسلسل الهرمي البصري، ويوصل هوية العلامة التجارية. يوفر CSS أنظمة ألوان متعددة، لكل منها نقاط قوتها وحالات استخدامها. فهم هذه الأنظمة بعمق سيتيح لك اختيار الألوان بدقة، وإنشاء تصاميم سهلة الوصول، وبناء أنظمة ألوان مرنة يسهل صيانتها. في هذا الدرس، سنستكشف كل تنسيق ألوان متاح في CSS -- من الألوان المسماة البسيطة إلى الدوال المتقدمة مثل color-mix() -- ونتعلم كيفية استخدامها بفعالية في المشاريع الحقيقية.

كل خاصية CSS تقبل قيمة لون -- color وbackground-color وborder-color وbox-shadow وtext-shadow وoutline-color وغيرها الكثير -- يمكنها استخدام أي من تنسيقات الألوان التي سنناقشها. هذا يعني أنه يمكنك مزج التنسيقات ومطابقتها بحرية عبر ورقة الأنماط، واختيار الأكثر ملاءمة أو قابلية للقراءة لكل حالة.

الألوان المسماة (الكلمات المفتاحية للألوان)

يحدد CSS 148 كلمة مفتاحية لأسماء ألوان يمكنك استخدامها مباشرة في أوراق الأنماط. هذه كلمات إنجليزية بسيطة يترجمها المتصفح إلى قيم ألوان محددة. الألوان المسماة هي أبسط طريقة لتحديد لون وهي رائعة للنماذج الأولية والتعلم والتنسيق السريع.

الألوان المسماة الشائعة

تشمل الألوان المسماة الأكثر استخداماً ألواناً أساسية يعرفها الجميع:

• الألوان الأساسية: red (أحمر)، green (أخضر)، blue (أزرق)، yellow (أصفر)، orange (برتقالي)، purple (بنفسجي)، pink (وردي)، cyan (سماوي)، magenta (أرجواني)، white (أبيض)، black (أسود)
• الرماديات: gray، darkgray، dimgray، lightgray، silver، gainsboro، whitesmoke
• الأزرقات: navy، darkblue، mediumblue، royalblue، cornflowerblue، dodgerblue، deepskyblue، skyblue، lightblue، steelblue، cadetblue، slateblue
• الخضراوات: darkgreen، forestgreen، seagreen، limegreen، springgreen، mediumseagreen، olivedrab، olive، teal
• الحمراوات: darkred، firebrick، crimson، indianred، tomato، orangered، coral، salmon، lightsalmon
• أخرى: gold، khaki، plum، orchid، violet، turquoise، sienna، peru، chocolate، tan، wheat، linen، ivory، lavender، honeydew، mintcream، aliceblue

/* الألوان المسماة في خصائص مختلفة */
body {
    background-color: whitesmoke;
    color: dimgray;
}

h1 {
    color: navy;
}

.alert-danger {
    background-color: mistyrose;
    border: 1px solid crimson;
    color: darkred;
}

.alert-success {
    background-color: honeydew;
    border: 1px solid mediumseagreen;
    color: darkgreen;
}

.btn-primary {
    background-color: dodgerblue;
    color: white;
    border: 2px solid royalblue;
}

a {
    color: steelblue;
}
a:hover {
    color: tomato;
}

الكلمات المفتاحية الخاصة للألوان

يحدد CSS أيضاً عدة كلمات مفتاحية خاصة للألوان تخدم أغراضاً محددة:

• transparent -- لون شفاف بالكامل (يعادل rgba(0, 0, 0, 0)). يُستخدم عادةً للحدود والخلفيات غير المرئية أو كنقطة توقف في التدرجات.
• currentColor -- كلمة مفتاحية ديناميكية ترث القيمة الحالية لخاصية color للعنصر. مفيدة للغاية لإنشاء مكونات حيث تتطابق العناصر الزخرفية تلقائياً مع لون النص.
• inherit -- ليست لوناً بحد ذاتها، لكنها تجبر الخاصية على وراثة قيمتها من العنصر الأب.

/* currentColor يجعل الحدود والظلال والزخارف
   تتطابق تلقائياً مع لون النص */
.icon-button {
    color: #3498db;
    border: 2px solid currentColor;     /* حد أزرق */
    box-shadow: 0 2px 4px currentColor; /* ظل أزرق */
}

.icon-button:hover {
    color: #e74c3c;
    /* الحد والظل يتغيران تلقائياً إلى الأحمر! */
}

/* أيقونات SVG ترث currentColor */
.icon-button svg {
    fill: currentColor; /* تعبئة SVG تطابق لون النص */
}

/* زخرفة الخط السفلي تستخدم currentColor افتراضياً */
.link {
    color: #2c3e50;
    text-decoration-color: currentColor;
}

/* استخدم currentColor لتنسيق مكونات متسق */
.badge {
    color: #8e44ad;
    background-color: transparent;
    border: 1px solid currentColor;
    /* غيّر خاصية اللون وكل شيء يتحدث */
}

الألوان الست عشرية (HEX)

ترميز الألوان الست عشري هو أكثر تنسيقات الألوان استخداماً في CSS. يستخدم رمز الهاش (#) متبوعاً بأرقام ست عشرية (0-9 وA-F) لتمثيل قنوات الأحمر والأخضر والأزرق للون. كل قناة لها قيمة من 00 (بدون كثافة) إلى FF (كثافة كاملة)، مما يتيح لك الوصول إلى أكثر من 16 مليون لون ممكن.

HEX بـ 6 أرقام (#RRGGBB)

تنسيق HEX القياسي يستخدم ستة أرقام -- اثنان لكل قناة لون. الرقمان الأولان يمثلان الأحمر، والوسطان يمثلان الأخضر، والأخيران يمثلان الأزرق.

/* الألوان النقية */
.pure-red    { color: #FF0000; } /* أحمر: FF، أخضر: 00، أزرق: 00 */
.pure-green  { color: #00FF00; } /* أحمر: 00، أخضر: FF، أزرق: 00 */
.pure-blue   { color: #0000FF; } /* أحمر: 00، أخضر: 00، أزرق: FF */

/* الألوان الممزوجة */
.yellow      { color: #FFFF00; } /* أحمر + أخضر = أصفر */
.cyan        { color: #00FFFF; } /* أخضر + أزرق = سماوي */
.magenta     { color: #FF00FF; } /* أحمر + أزرق = أرجواني */
.white       { color: #FFFFFF; } /* جميع القنوات بالحد الأقصى */
.black       { color: #000000; } /* جميع القنوات صفر */

/* ألوان ويب شائعة */
.brand-blue  { color: #3498db; }
.brand-red   { color: #e74c3c; }
.dark-text   { color: #2c3e50; }
.light-bg    { color: #ecf0f1; }
.muted-text  { color: #7f8c8d; }

/* HEX لا يتأثر بحالة الأحرف */
.same-color-1 { color: #FF6600; }
.same-color-2 { color: #ff6600; } /* مطابق لما سبق */

اختصار HEX بـ 3 أرقام (#RGB)

عندما يكون كلا الرقمين في كل قناة متماثلين (مثل #AABBCC)، يمكنك استخدام اختصار الـ 3 أرقام حيث يتم مضاعفة كل رقم. هذا اختصار مريح لكنه يعمل فقط لمجموعة فرعية محدودة من الألوان.

/* اختصار 3 أرقام ومعادلاتها بـ 6 أرقام */
.white   { color: #FFF; }  /* مثل #FFFFFF */
.black   { color: #000; }  /* مثل #000000 */
.red     { color: #F00; }  /* مثل #FF0000 */
.green   { color: #0F0; }  /* مثل #00FF00 */
.blue    { color: #00F; }  /* مثل #0000FF */
.yellow  { color: #FF0; }  /* مثل #FFFF00 */
.cyan    { color: #0FF; }  /* مثل #00FFFF */
.gray    { color: #999; }  /* مثل #999999 */
.light   { color: #EEE; }  /* مثل #EEEEEE */
.dark    { color: #333; }  /* مثل #333333 */

/* اختصارات شائعة مستخدمة في CSS اليومي */
body {
    color: #333;            /* نص رمادي داكن */
    background-color: #FFF; /* خلفية بيضاء */
}
.border {
    border: 1px solid #DDD; /* حد رمادي فاتح */
}
.muted {
    color: #999;            /* نص رمادي خافت */
}

HEX بـ 8 أرقام مع ألفا (#RRGGBBAA)

يدعم CSS الحديث تنسيق HEX بـ 8 أرقام يضيف رقمين لقناة ألفا (الشفافية). تتراوح قناة ألفا من 00 (شفاف بالكامل) إلى FF (معتم بالكامل). يوجد أيضاً اختصار بـ 4 أرقام (#RGBA).

/* HEX بـ 8 أرقام مع ألفا */
.overlay-dark   { background-color: #000000CC; } /* أسود بعتامة 80% */
.overlay-light  { background-color: #FFFFFF80; } /* أبيض بعتامة 50% */
.brand-faded    { color: #3498db66; }            /* أزرق بعتامة 40% */
.border-subtle  { border-color: #00000019; }     /* أسود بعتامة 10% */

/* اختصار HEX بـ 4 أرقام مع ألفا */
.overlay  { background-color: #0008; } /* #00000088 -- أسود بـ ~53% */
.faded    { color: #FFF8; }            /* #FFFFFF88 -- أبيض بـ ~53% */
.ghost    { color: #0003; }            /* #00000033 -- أسود بـ 20% */

/* قيم ألفا شائعة في HEX */
/* FF = 100% (معتم بالكامل) */
/* CC = 80% */
/* 99 = 60% */
/* 80 = ~50% */
/* 66 = 40% */
/* 4D = 30% */
/* 33 = 20% */
/* 1A = 10% */
/* 00 = 0% (شفاف بالكامل) */

/* استخدام عملي: ظل خفيف */
.card {
    box-shadow: 0 4px 12px #0000001A; /* أسود بعتامة 10% */
}

ألوان RGB و RGBA

تحدد دالة rgb() الألوان باستخدام نموذج الألوان الأحمر والأخضر والأزرق. كل قناة تقبل قيمة من 0 إلى 255 (أو 0% إلى 100%). تضيف دالة rgba() قناة ألفا للشفافية، تقبل قيمة من 0 (شفاف بالكامل) إلى 1 (معتم بالكامل).

دالة rgb()

/* RGB بقيم صحيحة (0-255) */
.pure-red   { color: rgb(255, 0, 0); }
.pure-green { color: rgb(0, 255, 0); }
.pure-blue  { color: rgb(0, 0, 255); }
.white      { color: rgb(255, 255, 255); }
.black      { color: rgb(0, 0, 0); }
.gray       { color: rgb(128, 128, 128); }

/* RGB بقيم نسبية (0%-100%) */
.half-red   { color: rgb(50%, 0%, 0%); }
.full-white { color: rgb(100%, 100%, 100%); }

/* ألوان ويب شائعة في RGB */
.brand-blue { color: rgb(52, 152, 219); }   /* #3498db */
.brand-red  { color: rgb(231, 76, 60); }    /* #e74c3c */
.dark-text  { color: rgb(44, 62, 80); }     /* #2c3e50 */

دالة rgba()

دالة rgba() مطابقة لـ rgb() لكنها تضيف معاملاً رابعاً لقناة ألفا (العتامة). هذه واحدة من أكثر دوال الألوان استخداماً في CSS لأنها تمنحك تحكماً دقيقاً في الشفافية.

/* قيم ألفا تتراوح من 0 (شفاف) إلى 1 (معتم) */
.fully-opaque      { color: rgba(255, 0, 0, 1); }    /* مثل rgb(255,0,0) */
.half-transparent   { color: rgba(255, 0, 0, 0.5); }  /* أحمر شفاف 50% */
.mostly-transparent { color: rgba(255, 0, 0, 0.1); }  /* أحمر شفاف 90% */
.invisible          { color: rgba(255, 0, 0, 0); }    /* شفاف بالكامل */

/* أنماط التراكب الشائعة */
.dark-overlay {
    background-color: rgba(0, 0, 0, 0.6); /* تراكب أسود 60% */
}
.light-overlay {
    background-color: rgba(255, 255, 255, 0.8); /* تراكب أبيض 80% */
}

/* ظلال خفيفة باستخدام RGBA */
.card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* حدود شبه شفافة */
.glass-card {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.1);
}

/* تراكبات ملونة */
.blue-tint {
    background-color: rgba(52, 152, 219, 0.3);
}
.red-tint {
    background-color: rgba(231, 76, 60, 0.2);
}

الصيغة الحديثة المفصولة بمسافات

يسمح CSS الحديث بصيغة أحدث لـ rgb() حيث يتم فصل القيم بمسافات بدلاً من الفواصل، ويتم إضافة ألفا بشرطة مائلة للأمام. هذه الصيغة تعمل أيضاً مع hsl(). تدعم المتصفحات الحديثة هذه الصيغة بالكامل، وهي النهج الموصى به مستقبلاً.

/* الصيغة الحديثة المفصولة بمسافات */
.modern-red   { color: rgb(255 0 0); }
.modern-blue  { color: rgb(52 152 219); }

/* ألفا بفاصل الشرطة المائلة */
.modern-alpha { color: rgb(255 0 0 / 0.5); }      /* أحمر شفاف 50% */
.modern-alpha2 { color: rgb(52 152 219 / 0.75); }  /* أزرق معتم 75% */

/* ألفا بالنسبة المئوية */
.modern-alpha3 { color: rgb(255 0 0 / 50%); }     /* مثل 0.5 */

/* الصيغة الحديثة تحل محل كل من rgb() و rgba() */
/* هذه كلها متكافئة: */
.old-way   { color: rgba(52, 152, 219, 0.5); }
.new-way   { color: rgb(52 152 219 / 0.5); }
.new-way-2 { color: rgb(52 152 219 / 50%); }

/* لم تعد بحاجة إلى rgba() -- فقط استخدم rgb() مع الشرطة المائلة */
.overlay {
    background-color: rgb(0 0 0 / 0.6);
}
.shadow {
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}

ألوان HSL و HSLA

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

فهم نموذج ألوان HSL

• درجة اللون - Hue (0-360): اللون نفسه، ممثل كدرجة على عجلة الألوان. تخيل قوس قزح ملفوفاً في دائرة: 0 (و360) هو الأحمر، 60 هو الأصفر، 120 هو الأخضر، 180 هو السماوي، 240 هو الأزرق، و300 هو الأرجواني. أنت تختار أساساً موقعاً على عجلة الألوان.
• التشبع - Saturation (0%-100%): مدى حيوية أو كثافة اللون. 100% هي النسخة الأنقى والأكثر حيوية من اللون. 0% تزيل كل اللون، مما ينتج درجة من الرمادي. فكر فيها كالمسافة من مركز عجلة الألوان إلى الحافة.
• الإضاءة - Lightness (0%-100%): مدى فتح أو قتم اللون. 0% هي دائماً أسود (بغض النظر عن درجة اللون أو التشبع). 100% هي دائماً أبيض. 50% تعطيك النسخة النقية المشبعة بالكامل من درجة اللون. القيم أقل من 50% تقتم اللون؛ والقيم فوق 50% تفتحه.

/* عجلة الألوان: قيم درجة اللون وألوانها */
.red     { color: hsl(0, 100%, 50%); }    /* 0 درجة */
.orange  { color: hsl(30, 100%, 50%); }   /* 30 درجة */
.yellow  { color: hsl(60, 100%, 50%); }   /* 60 درجة */
.lime    { color: hsl(90, 100%, 50%); }   /* 90 درجة */
.green   { color: hsl(120, 100%, 50%); }  /* 120 درجة */
.teal    { color: hsl(150, 100%, 50%); }  /* 150 درجة */
.cyan    { color: hsl(180, 100%, 50%); }  /* 180 درجة */
.azure   { color: hsl(210, 100%, 50%); }  /* 210 درجة */
.blue    { color: hsl(240, 100%, 50%); }  /* 240 درجة */
.purple  { color: hsl(270, 100%, 50%); }  /* 270 درجة */
.magenta { color: hsl(300, 100%, 50%); }  /* 300 درجة */
.rose    { color: hsl(330, 100%, 50%); }  /* 330 درجة */

/* التشبع يتحكم في الحيوية */
.vivid   { color: hsl(210, 100%, 50%); } /* أزرق نقي */
.muted   { color: hsl(210, 50%, 50%); }  /* أزرق خافت */
.dull    { color: hsl(210, 25%, 50%); }  /* أزرق باهت */
.gray    { color: hsl(210, 0%, 50%); }   /* رمادي نقي (بدون لون) */

/* الإضاءة تتحكم في السطوع */
.black   { color: hsl(210, 100%, 0%); }  /* دائماً أسود */
.dark    { color: hsl(210, 100%, 25%); } /* أزرق داكن */
.medium  { color: hsl(210, 100%, 50%); } /* أزرق نقي */
.light   { color: hsl(210, 100%, 75%); } /* أزرق فاتح */
.white   { color: hsl(210, 100%, 100%); }/* دائماً أبيض */

لماذا HSL قوية للمطورين

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

/* مقياس ألوان أزرق كامل بتغيير الإضاءة */
:root {
    --blue-50:  hsl(210, 100%, 97%);  /* أفتح درجة */
    --blue-100: hsl(210, 100%, 93%);
    --blue-200: hsl(210, 100%, 85%);
    --blue-300: hsl(210, 100%, 75%);
    --blue-400: hsl(210, 100%, 65%);
    --blue-500: hsl(210, 100%, 50%);  /* اللون الأساسي */
    --blue-600: hsl(210, 100%, 42%);
    --blue-700: hsl(210, 100%, 34%);
    --blue-800: hsl(210, 100%, 26%);
    --blue-900: hsl(210, 100%, 18%);  /* أغمق درجة */
}

/* إنشاء حالات الأزرار بتعديل الإضاءة */
.btn-primary {
    background-color: hsl(210, 85%, 55%);
    color: white;
}
.btn-primary:hover {
    background-color: hsl(210, 85%, 45%); /* أغمق عند التمرير */
}
.btn-primary:active {
    background-color: hsl(210, 85%, 38%); /* أغمق أكثر عند الضغط */
}
.btn-primary:disabled {
    background-color: hsl(210, 30%, 70%); /* أقل تشبعاً وأفتح */
}

/* الألوان المكملة: أضف 180 لدرجة اللون */
.primary    { color: hsl(210, 85%, 55%); } /* أزرق */
.complement { color: hsl(30, 85%, 55%); }  /* برتقالي (210 + 180 = 390 = 30) */

/* الألوان المتجاورة: أزح درجة اللون بـ 30 درجة */
.color-1 { color: hsl(180, 70%, 45%); } /* تركوازي */
.color-2 { color: hsl(210, 70%, 45%); } /* أزرق */
.color-3 { color: hsl(240, 70%, 45%); } /* نيلي */

HSLA والصيغة الحديثة لـ HSL

/* صيغة HSLA الكلاسيكية */
.overlay {
    background-color: hsla(0, 0%, 0%, 0.5); /* تراكب أسود 50% */
}
.tinted {
    background-color: hsla(210, 100%, 50%, 0.2); /* تلوين أزرق 20% */
}

/* الصيغة الحديثة المفصولة بمسافات (موصى بها) */
.overlay-modern {
    background-color: hsl(0 0% 0% / 0.5);
}
.tinted-modern {
    background-color: hsl(210 100% 50% / 0.2);
}

/* ألفا بالنسبة المئوية */
.subtle {
    background-color: hsl(210 100% 50% / 10%);
}

/* هذه كلها متكافئة: */
.option-1 { color: hsla(210, 100%, 50%, 0.5); }  /* كلاسيكي */
.option-2 { color: hsl(210 100% 50% / 0.5); }    /* حديث بعشري */
.option-3 { color: hsl(210 100% 50% / 50%); }     /* حديث بنسبة مئوية */

العتامة مقابل قناة ألفا

هناك طريقتان لجعل العناصر شفافة في CSS: خاصية opacity وألوان قناة ألفا. فهم الفرق الجوهري بينهما ضروري لبناء تصاميم طبقية واحترافية.

خاصية opacity

تحدد خاصية opacity شفافية العنصر بالكامل وجميع أبنائه. القيمة 1 معتمة بالكامل، و0 شفافة بالكامل. كل شيء داخل العنصر -- النص والحدود والخلفيات والعناصر الفرعية -- يصبح شفافاً معاً. لا يمكنك جعل الخلفية فقط شفافة مع الاحتفاظ بالنص معتماً بالكامل باستخدام opacity.

ألوان قناة ألفا

ألوان قناة ألفا (باستخدام rgba() أو hsla() أو HEX بـ 8 أرقام) تجعل خاصية اللون المحددة فقط شفافة. إذا عيّنت لون خلفية شبه شفاف، يبقى النص معتماً بالكامل. هذا يمنحك تحكماً أدق بكثير.

/* المشكلة: opacity تؤثر على كل شيء بما فيه النص */
.overlay-bad {
    background-color: black;
    color: white;
    opacity: 0.5;
    /* كل من الخلفية والنص الأبيض شفافان بـ 50% */
    /* النص صعب القراءة! */
}

/* الحل: قناة ألفا تؤثر فقط على الخلفية */
.overlay-good {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    /* فقط الخلفية شفافة بـ 50% */
    /* النص الأبيض يبقى معتماً بالكامل وقابلاً للقراءة! */
}

/* خطأ شائع آخر مع opacity */
.card-faded {
    opacity: 0.6;
    /* كل شيء باهت: النص والصور والحدود والظلال... */
}

/* أفضل: استخدم ألفا فقط حيث تحتاج */
.card-subtle {
    background-color: rgba(255, 255, 255, 0.6); /* خلفية باهتة فقط */
    color: #333;                                  /* نص بعتامة كاملة */
    border: 1px solid rgba(0, 0, 0, 0.1);        /* حد خفيف */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);   /* ظل خفيف */
}

/* opacity مفيدة لتأثيرات التمرير/الانتقال */
.fade-element {
    opacity: 1;
    transition: opacity 0.3s ease;
}
.fade-element:hover {
    opacity: 0.7; /* العنصر بالكامل يبهت عند التمرير */
}

أساسيات نظرية الألوان للمطورين

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

عجلة الألوان وعلاقات الألوان

• مكمل: ألوان متقابلة على العجلة (متباعدة بـ 180 درجة). تخلق تبايناً عالياً وتوتراً بصرياً. مثال: أزرق (#3498db) وبرتقالي (#e67e22). استخدم الألوان المكملة لأزرار الدعوة للعمل على خلفية لون أساسي.
• متجاور: ألوان بجانب بعضها على العجلة (متباعدة بـ 30 درجة). تخلق تصاميم متناغمة ومتماسكة. مثال: أزرق، أزرق-أخضر، أخضر. استخدم الألوان المتجاورة لإحساس هادئ وموحد.
• ثلاثي: ثلاثة ألوان متباعدة بالتساوي على العجلة (متباعدة بـ 120 درجة). تخلق تصاميم نابضة بالحياة ومتوازنة. مثال: أحمر، أزرق، أصفر. استخدم المخططات الثلاثية بحذر -- يمكن أن تكون مرهقة إذا كانت جميع الألوان الثلاثة مشبعة بالكامل.
• مكمل منقسم: لون بالإضافة إلى اللونين المجاورين لمكمله. توتر أقل من المكمل النقي لكن لا يزال تبايناً عالياً. مثال: أزرق، أحمر-برتقالي، أصفر-برتقالي.
• أحادي اللون: درجات مختلفة وصبغات ونغمات من درجة لون واحدة. دائماً متناغم واحترافي. هذا أكثر مخطط ألوان أماناً للمبتدئين.

/* مخطط أحادي اللون: درجة لون واحدة، تنويع التشبع والإضاءة */
:root {
    --mono-lightest: hsl(220, 60%, 95%);
    --mono-light:    hsl(220, 60%, 80%);
    --mono-base:     hsl(220, 60%, 50%);
    --mono-dark:     hsl(220, 60%, 35%);
    --mono-darkest:  hsl(220, 60%, 20%);
}

/* مخطط مكمل */
:root {
    --primary:     hsl(220, 70%, 50%);  /* أزرق */
    --complement:  hsl(40, 70%, 50%);   /* برتقالي (220 + 180 = 400 - 360 = 40) */
    --primary-bg:  hsl(220, 70%, 96%);
    --complement-bg: hsl(40, 70%, 96%);
}

/* مخطط متجاور */
:root {
    --color-a: hsl(200, 65%, 50%);  /* سماوي-أزرق */
    --color-b: hsl(220, 65%, 50%);  /* أزرق (أساسي) */
    --color-c: hsl(240, 65%, 50%);  /* نيلي */
}

/* مخطط ثلاثي (استخدمه باعتدال) */
:root {
    --tri-1: hsl(10, 70%, 55%);   /* أحمر-برتقالي */
    --tri-2: hsl(130, 70%, 40%);  /* أخضر */
    --tri-3: hsl(250, 70%, 55%);  /* أزرق-بنفسجي */
}

/* قاعدة 60-30-10: وزّع الألوان بالنسبة */
body {
    background-color: var(--mono-lightest); /* 60%: سائد/محايد */
    color: var(--mono-darkest);
}
.sidebar {
    background-color: var(--primary);       /* 30%: لون ثانوي */
    color: white;
}
.cta-button {
    background-color: var(--complement);    /* 10%: لون مميز */
    color: white;
}

تباين الألوان الميسّر (WCAG)

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

مستويات تباين WCAG

• WCAG AA (الحد الأدنى): يجب أن يكون للنص العادي نسبة تباين لا تقل عن 4.5:1 مقابل خلفيته. النص الكبير (18px عريض أو 24px عادي وأكبر) يتطلب على الأقل 3:1. هذا هو المعيار الذي يجب أن تلبيه معظم المواقع كحد أدنى.
• WCAG AAA (محسّن): يجب أن يكون للنص العادي نسبة تباين لا تقل عن 7:1. النص الكبير يتطلب على الأقل 4.5:1. هذا أعلى مستوى من إمكانية الوصول ويُوصى به لنص المتن والمحتوى الحرج.
• العناصر غير النصية: مكونات واجهة المستخدم مثل الأزرار ومدخلات النماذج ومؤشرات التركيز يجب أن يكون لها نسبة تباين لا تقل عن 3:1 مقابل الألوان المجاورة.

/* جيد: تركيبات عالية التباين */
.accessible-dark {
    background-color: #ffffff;
    color: #1a1a2e;  /* نسبة التباين: ~16:1 (يمر AAA) */
}

.accessible-blue {
    background-color: #ffffff;
    color: #1a5276;  /* نسبة التباين: ~8.5:1 (يمر AAA) */
}

.accessible-on-dark {
    background-color: #1a1a2e;
    color: #e8e8e8;  /* نسبة التباين: ~13:1 (يمر AAA) */
}

/* سيء: تركيبات منخفضة التباين -- تجنبها */
.inaccessible-1 {
    background-color: #ffffff;
    color: #b0b0b0;  /* نسبة التباين: ~2.3:1 (يفشل AA و AAA) */
}

.inaccessible-2 {
    background-color: #3498db;
    color: #5dade2;  /* نسبة التباين: ~1.5:1 (يفشل في كل شيء) */
}

/* إصلاح التباين المنخفض مع الحفاظ على روح اللون */
.fixed-gray {
    background-color: #ffffff;
    color: #666666;  /* نسبة التباين: ~5.7:1 (يمر AA) */
}

.fixed-blue-on-blue {
    background-color: #ebf5fb;
    color: #1a5276;  /* نسبة التباين: ~8:1 (يمر AAA) */
}

/* ألوان روابط ميسّرة */
a {
    color: #1a5276;  /* داكن بما يكفي للخلفيات البيضاء */
}
a:hover {
    color: #0d3b57;  /* أغمق عند التمرير لتغذية راجعة واضحة */
}

/* مؤشرات التركيز تحتاج تباين 3:1 */
button:focus-visible {
    outline: 3px solid #1a5276;
    outline-offset: 2px;
}

دالة color-mix()

دالة color-mix() هي ميزة CSS حديثة تتيح لك مزج لونين معاً بنسبة محددة. مفيدة للغاية لإنشاء تنويعات ألوان وحالات التمرير والتنسيق الديناميكي دون حساب الألوان الوسيطة يدوياً.

/* الصيغة الأساسية: color-mix(in colorspace, color1 percentage, color2 percentage) */

/* مزج 50% أزرق مع 50% أبيض (تفتيح) */
.light-blue {
    color: color-mix(in srgb, #3498db 50%, white 50%);
}

/* مزج 70% أزرق مع 30% أسود (تغميق) */
.dark-blue {
    color: color-mix(in srgb, #3498db 70%, black 30%);
}

/* إذا حُذفت النسب المئوية للون واحد، يحصل على الباقي */
.tinted {
    color: color-mix(in srgb, #3498db 80%, white);
    /* الأبيض يحصل على الـ 20% المتبقية */
}

/* مزج لونين من العلامة التجارية */
.blended {
    background-color: color-mix(in srgb, #3498db, #e74c3c);
    /* مزج 50/50 افتراضياً */
}

/* عملي: حالات التمرير بدون ترميز الألوان يدوياً */
.btn {
    --btn-color: #3498db;
    background-color: var(--btn-color);
}
.btn:hover {
    background-color: color-mix(in srgb, var(--btn-color) 85%, black);
    /* أغمق تلقائياً بـ 15% */
}
.btn:active {
    background-color: color-mix(in srgb, var(--btn-color) 70%, black);
    /* أغمق تلقائياً بـ 30% */
}

/* إنشاء صبغات وظلال من لون أساسي واحد */
:root {
    --brand: #6366f1;
    --brand-light: color-mix(in srgb, var(--brand) 30%, white);
    --brand-lighter: color-mix(in srgb, var(--brand) 15%, white);
    --brand-dark: color-mix(in srgb, var(--brand) 70%, black);
    --brand-darker: color-mix(in srgb, var(--brand) 50%, black);
}

أمثلة عملية لمخططات الألوان

دعونا نجمع كل شيء معاً ونبني أنظمة ألوان كاملة يمكنك استخدامها في مشاريع حقيقية.

:root {
    /* اللون الأساسي وتنويعاته */
    --primary-h: 220;
    --primary-s: 70%;
    --primary-l: 50%;
    --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --primary-light: hsl(var(--primary-h), var(--primary-s), 90%);
    --primary-lighter: hsl(var(--primary-h), var(--primary-s), 96%);
    --primary-dark: hsl(var(--primary-h), var(--primary-s), 35%);
    --primary-darker: hsl(var(--primary-h), var(--primary-s), 20%);

    /* ألوان دلالية */
    --success: hsl(145, 65%, 42%);
    --success-light: hsl(145, 65%, 92%);
    --warning: hsl(45, 95%, 50%);
    --warning-light: hsl(45, 95%, 92%);
    --danger: hsl(0, 75%, 55%);
    --danger-light: hsl(0, 75%, 94%);
    --info: hsl(200, 80%, 50%);
    --info-light: hsl(200, 80%, 93%);

    /* رماديات محايدة بنهج الرمادي الملون */
    --gray-50:  hsl(220, 15%, 97%);
    --gray-100: hsl(220, 15%, 93%);
    --gray-200: hsl(220, 12%, 85%);
    --gray-300: hsl(220, 10%, 75%);
    --gray-400: hsl(220, 8%, 60%);
    --gray-500: hsl(220, 8%, 46%);
    --gray-600: hsl(220, 10%, 36%);
    --gray-700: hsl(220, 12%, 26%);
    --gray-800: hsl(220, 15%, 18%);
    --gray-900: hsl(220, 18%, 10%);

    /* ألوان مطبقة */
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-600);
    --text-muted: var(--gray-400);
    --bg-primary: #ffffff;
    --bg-secondary: var(--gray-50);
    --border-color: var(--gray-200);
}

/* الاستخدام */
body {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.alert-success {
    background-color: var(--success-light);
    border: 1px solid var(--success);
    color: hsl(145, 65%, 25%);
}

.alert-danger {
    background-color: var(--danger-light);
    border: 1px solid var(--danger);
    color: hsl(0, 75%, 30%);
}

/* الوضع الفاتح (الافتراضي) */
:root {
    --bg: hsl(0, 0%, 100%);
    --bg-secondary: hsl(220, 15%, 97%);
    --text: hsl(220, 18%, 12%);
    --text-secondary: hsl(220, 10%, 40%);
    --border: hsl(220, 15%, 88%);
    --shadow: hsl(220 15% 50% / 0.1);
    --accent: hsl(220, 75%, 55%);
    --accent-text: hsl(0, 0%, 100%);
}

/* الوضع الداكن */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(220, 18%, 10%);
        --bg-secondary: hsl(220, 15%, 14%);
        --text: hsl(220, 10%, 90%);
        --text-secondary: hsl(220, 10%, 60%);
        --border: hsl(220, 12%, 22%);
        --shadow: hsl(0 0% 0% / 0.3);
        --accent: hsl(220, 75%, 65%);
        --accent-text: hsl(220, 18%, 10%);
    }
}

/* المكونات تستخدم نفس المتغيرات في كلا الوضعين */
body {
    background-color: var(--bg);
    color: var(--text);
}

.card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px var(--shadow);
}

.btn-accent {
    background-color: var(--accent);
    color: var(--accent-text);
}