أدلة الألوان
أدلة قصيرة وعملية عن الألوان على الشاشات: الصيغ والتباين ولوحات الألوان والوضع الداكن وCSS. كل رقم محسوب، وكل مثال قابل للنسخ.
- شرح OKLCH: صيغة الألوان التي تطابق ما تراه عينك أخيرًايصف OKLCH اللون بمدى إضاءته كما تراها العين، وشدة لونه، وصبغته. وعلى عكس HSL، تبدو قيمة الإضاءة نفسها متساوية فعلًا في كل الصبغات، فتصبح لوحات الألوان وحالات التمرير (hover) والتباين المناسب لإمكانية الوصول أمورًا يمكن توقعها.28 سبتمبر 2026وقت القراءة: 3 د
- APCA مقابل WCAG 2: بأي فحص للتباين تثق؟نسب التباين في WCAG 2 هي ما تطلبه القوانين. أما APCA فنموذج أحدث يتنبأ بسهولة القراءة بدقة أكبر بكثير، خصوصًا في الوضع الداكن والألوان المشبعة. والفحص بالطريقتين يمنحك نصًا يوافق المعايير وسهل القراءة فعلًا.28 سبتمبر 2026وقت القراءة: 2 د
- شرح النطاق اللوني: sRGB وDisplay P3 والألوان خارج النطاقالنطاق اللوني (gamut) هو مجموعة الألوان التي تستطيع شاشة أو فضاء لوني عرضها. بُني الويب على sRGB، لكن معظم الهواتف وكثيرًا من الحواسيب المحمولة تعرض اليوم Display P3، وفيه ألوان حمراء وخضراء وبرتقالية أكثر حيوية بشكل ملحوظ.28 سبتمبر 2026وقت القراءة: 2 د
- شرح صيغ الألوان: HEX وRGB وHSL وOKLCH وغيرهايمكن كتابة اللون نفسه بأكثر من عشر طرق. إليك معنى كل صيغة، ومتى تستخدمها، وكيف يبدو اللون نفسه فيها جميعًا.28 سبتمبر 2026وقت القراءة: 1 د
- شرح أكواد ألوان HEX: كيف تعمل صيغة #RRGGBBكود لون HEX مثل #1e90ff هو ثلاثة أزواج من الأرقام الست عشرية: كمية الضوء الأحمر والأخضر والأزرق، وكل منها من 00 (لا شيء) إلى ff (الحد الأقصى، 255). أضف زوجًا رابعًا لتحديد الشفافية: القيمة 80 تعني نحو 50%، وff تعني لونًا معتمًا تمامًا.28 سبتمبر 2026وقت القراءة: 5 د
- كيف تختار لوحة ألوان لموقع ويب أو تطبيقابدأ بلون واحد لعلامتك التجارية، وولّد منه سلّم درجات من 50 إلى 950، ثم أضف رماديات مشوبة قليلًا بلونه وأربعة ألوان دلالية، وبعدها افحص كل زوج من النص والخلفية للتباين ولعمى الألوان. اختر الدرجات حسب إضاءة OKLCH لا بالعين: على خلفية بيضاء يجتاز النص معيار WCAG AA بمجرد أن تنخفض الإضاءة إلى نحو 0.55، أيًّا كانت الصبغة.28 سبتمبر 2026وقت القراءة: 6 د
- ألوان الوضع الداكن: كيف تختار الخلفيات والنصوص والألوان المميزةاستخدم خلفية رمادية داكنة مثل #121212 بدل الأسود الخالص، ونصًا أبيض مكسورًا مثل #e5e5e5 بدل الأبيض الخالص، ونسخًا أفتح وأقل تشبعًا من ألوان علامتك التجارية. وافحص النص بـ APCA إلى جانب WCAG 2، لأن WCAG 2 يبالغ في تقدير التباين على الخلفيات الداكنة.28 سبتمبر 2026وقت القراءة: 5 د
- تناسق الألوان: المتكاملة والمتجاورة والثلاثية وغيرهايختار تناسق الألوان صبغات بزوايا ثابتة على دائرة الألوان: 180° للمتكاملة، و30° بين كل لونين في المتجاورة، و120° في الثلاثية. أدِر الصبغة في OKLCH بدلًا من HSL، فتبقى الألوان متساوية في الإضاءة ولا يبرز أي منها صدفةً.28 سبتمبر 2026وقت القراءة: 4 د
- color-mix() والألوان النسبية في CSS: التفتيح وhover والشفافيةتمزج color-mix() لونين في فضاء لوني تختاره، وتتيح لك صيغة الألوان النسبية تعديل قناة واحدة من لون موجود، مثل oklch(from var(--brand) calc(l - 0.1) c h). كلتاهما تعمل في المتصفح، وتتعامل مع متغيرات CSS، وتغني عن معظم دوال الألوان في Sass. امزج في oklab للتفتيح وحالات hover، وفي srgb للشفافية.28 سبتمبر 2026وقت القراءة: 6 د
- لوحات ألوان مناسبة لعمى الألوان: كيف تفحص ألوانك وتصلحهالوحة الألوان المناسبة لعمى الألوان تُبقي كل زوج من الألوان قابلًا للتمييز مع عمى الأحمر وعمى الأخضر وعمى الأزرق وعند التحويل إلى الرمادي. والحل الأضمن ليس صبغة خاصة، بل فرق في الإضاءة: الألوان التي تفصل بينها نحو 0.2 في إضاءة OKLCH بقيت متمايزة في كل محاكاة أجريناها. وأضف إلى ذلك أيقونات أو تسميات نصية، فاللون وحده يخذل أحدًا دائمًا.28 سبتمبر 2026وقت القراءة: 6 د
- ألوان Tailwind CSS: لوحة v4 بصيغة OKLCH والألوان المخصصة والدرجاتيأتي Tailwind CSS v4 بـ 26 سلّمًا لونيًا في كل منها 11 درجة، من 50 إلى 950، أي 286 لونًا معرّفة بصيغة OKLCH كمتغيرات CSS مثل --color-blue-500. وتضيف ألوانك الخاصة عبر @theme { --color-brand-500: oklch(...) }. رقم الدرجة نفسه لا يعني الإضاءة نفسها: blue-600 هو أفتح أزرق يجتاز 4.5:1 على الأبيض، بينما يحتاج الأصفر إلى 700.28 سبتمبر 2026وقت القراءة: 6 د