دروس تعليمية
Step-by-step tutorials applying color science concepts to real-world design and development tasks.
توليد صور OG ملونة باستخدام Next.js وSatori
ولّد صور Open Graph ديناميكية باستخدام Next.js وSatori. أنشئ قوالب OG مدركة للألوان مع التدرجات وألوان العلامة التجارية والتصاميم المتجاوبة.
تم التحديث فبراير 24, 2026
خصائص CSS المخصصة لأنظمة الألوان الديناميكية
تعلّم كيفية بناء أنظمة ألوان قابلة للصيانة والتخصيص باستخدام خصائص CSS المخصصة. يشمل المتغيرات وأوضاع الإضاءة والظلام وتغيير الألوان بـ JavaScript.
تم التحديث فبراير 18, 2026
ألوان Tailwind CSS: دليل نظام الدرجات الكامل
أتقن نظام ألوان Tailwind CSS: اللوحة الافتراضية واتفاقية درجات 50-950 والألوان المخصصة في الإعداد والنهج الجديد بمتغيرات CSS في Tailwind v4.
تم التحديث فبراير 11, 2026
تطبيق الوضع الداكن: دليل المطوّر الشامل
تعلّم كيفية تطبيق الوضع الداكن باستخدام خصائص CSS المخصصة، وprefers-color-scheme، وتبديل JavaScript، واستراتيجيات تكييف الألوان المناسبة لأي مشروع ويب.
تم التحديث فبراير 04, 2026
بناء منتقي ألوان كـ Web Component من الصفر
أنشئ منتقي ألوان شاملًا كـ Web Component. نفّذ تصيير الـ canvas وشرائح hue وقنوات ألفا والأحداث المخصصة باستخدام Shadow DOM.
تم التحديث فبراير 02, 2026
دالة color-mix() في CSS: مزج الألوان محليًا في المتصفح
تعلّم color-mix() في CSS لمزج الألوان محليًا في المتصفح. أتقن البنية وفضاءات الألوان وحالات الاستخدام العملية وإنشاء لوحات ديناميكية بدون JavaScript.
تم التحديث يناير 31, 2026
نطاق الألوان موضحًا: sRGB وP3 وRec. 2020
افهم نطاقات الألوان — sRGB وDisplay P3 وRec. 2020 — وكيف تستخدم ألوان CSS واسعة النطاق مع @media (color-gamut) للشاشات الحديثة. مع أمثلة عملية.
تم التحديث يناير 28, 2026
دوال ألوان CSS: rgb() وhsl() وoklch() مقارنةً
قارن كل دوال ألوان CSS — rgb() وrgba() وhsl() وhsla() وlab() وlch() وoklch() وcolor-mix(). تعلّم أيها تستخدم ومتى وما هو دعم المتصفحات.
تم التحديث يناير 22, 2026
الفضاءات اللونية الإدراكية: Lab وLCH وOklab وOKLCH
استكشف الفضاءات اللونية الموحدة إدراكيًا — CIE Lab وLCH وOklab وOKLCH. تعرّف على تصميم كل منها وأين يتفوق وأيها تختار لعمل CSS والتصميم.
تم التحديث يناير 22, 2026
مكونات Figma التلقائية مع رموز الألوان
أنشئ مكونات Figma التخطيط التلقائي مع بنية رموز الألوان. تعلّم ربط المتغيرات والرموز المتجاوبة ومتغيرات الثيم وتسليم المشاريع للمطورين.
تم التحديث يناير 15, 2026
التدقيق اللوني: ضمان دقة ألوان الطباعة
تعلّم تقنيات التدقيق الناعم والصلب والمطبعي لضمان إعادة إنتاج الألوان بدقة من الشاشة إلى المخرجات النهائية.
تم التحديث يناير 13, 2026
CMYK لمصممي الويب: حين يلتقي الطباعة بالشاشة
يحتاج مصممو الويب العاملون في مشاريع الطباعة لفهم CMYK. تعلّم اختلافات النطاق اللوني وتحويل RGB إلى CMYK وسير عمل التدقيق اللوني والأخطاء الشائعة.
تم التحديث يناير 12, 2026
كيف يؤثر الورق على الألوان: الركيزة وجودة الطباعة
افهم كيف يؤثر نوع الورق وطلاؤه ووزنه على الألوان المطبوعة. تعلّم الفروق بين الأوراق المطلية وغير المطلية والمتخصصة لدقة الألوان.
تم التحديث يناير 09, 2026
ختم الرقاقات المعدنية وألوان المعادن في تصميم الطباعة
تعلّم تقنيات ختم الرقاقات وخيارات أحبار المعادن واختيارات رقائق الذهب والفضة واعتبارات التصميم للمواد المطبوعة الفاخرة.
تم التحديث يناير 08, 2026
بنية الألوان متعددة العلامات التجارية: قاعدة كود واحدة وثيمات متعددة
أنشئ بنية ألوان متعددة العلامات التجارية باستخدام خصائص CSS المخصصة ورموز التصميم. ادعم التخصيص الأبيض من قاعدة كود واحدة مع تكامل Tailwind.
تم التحديث يناير 06, 2026
الألوان في تصميم ثلاثي الأبعاد وWebGL: الفضاء اللوني الخطي والـ PBR
افهم الألوان في التصيير ثلاثي الأبعاد — sRGB مقابل RGB الخطي، وتصحيح غاما، وألوان التصيير القائم على الفيزياء، وإدارة الألوان في Three.js، وHDR في الويب.
تم التحديث يناير 02, 2026
الألوان في سرد القصص بالبيانات: ما وراء ألوان المخططات الافتراضية
تجاوز ألوان المخططات الافتراضية. تعلّم اللوحات المتسلسلة والمتباينة والفئوية، وإمكانية الوصول في تصور البيانات، ومقاييس ألوان D3/Chart.js.
تم التحديث ديسمبر 29, 2025
تحريك الألوان في CSS: الانتقالات والإطارات المفتاحية
أتقن تحريك الألوان في CSS مع الانتقالات والرسوم المتحركة بالإطارات المفتاحية ودوران هue في HSL وإقحام OKLCH للنعومة الإدراكية وأفضل ممارسات الأداء.
تم التحديث ديسمبر 26, 2025
دالة light-dark() في CSS: التبديل المحلي بين الثيمات
استخدم light-dark() في CSS للتبديل المحلي بين الثيمات. استبدل تبديلات JavaScript واستعلامات الوسائط بدالة CSS واحدة لألوان الوضع الفاتح والداكن.
تم التحديث ديسمبر 24, 2025
نموذج الألوان RGB: كيف تعرض الشاشات الألوان
افهم كيف يعمل نموذج الألوان RGB — مزج الضوء الأحمر والأخضر والأزرق، نطاق 0–255، دالة CSS rgb()، ولماذا يمكن للشاشات عرض 16.7 مليون لون.
تم التحديث ديسمبر 20, 2025
سير عمل إدارة الألوان: من الشاشة إلى الطباعة
أتقن إدارة الألوان من معايرة الشاشة إلى التدقيق في الطباعة. تعلم كيف تُبقي ملفات تعريف ICC والتدقيق الناعم وسير العمل المتسق الألوان دقيقة من الشاشة إلى الطباعة.
تم التحديث ديسمبر 14, 2025
بناء نظام ألوان لنظام التصميم الخاص بك
أنشئ بنية ألوان منهجية لنظام التصميم الخاص بك مع اتفاقيات التسمية وتوليد الدرجات والرموز الدلالية وأنماط التنفيذ.
تم التحديث ديسمبر 09, 2025
تصميم واجهة برمجة تطبيقات الألوان: نقاط نهاية REST لبيانات الألوان
صمّم واجهة برمجة RESTful للألوان مع نقاط نهاية لتحويل الألوان والبحث وفحص التباين وتوليد اللوحات. تعلّم تصميم المخطط وأفضل الممارسات.
تم التحديث ديسمبر 06, 2025
تقنيات ألوان SVG: التعبئة والحدود والتدرجات
أتقن تقنيات ألوان SVG: سمات التعبئة والحدود والتدرجات الخطية والشعاعية وكلمة currentColor المفتاحية وتنسيق SVG القائم على CSS لتطوير الويب الحديث.
تم التحديث نوفمبر 29, 2025
قاعدة 60-30-10: نسب الألوان في التصميم
أتقن قاعدة الألوان 60-30-10 في التصميم. تعلّم كيف تتكامل الألوان السائدة والثانوية والمميزة مع أمثلة حقيقية وأكواد hex ونصائح لكسر القاعدة بفعالية.
تم التحديث نوفمبر 24, 2025
فصل الألوان موضحًا: إعداد الملفات للطباعة
افهم فصل ألوان CMYK وألواح الألوان الفردية والتداخل وعلامات التسجيل. أعدّ ملفات جاهزة للطباعة بفصل ألوان صحيح.
تم التحديث نوفمبر 21, 2025
HSL مقابل HSV: أي نموذج ألوان يجب أن تستخدم؟
افهم الفرق بين نموذجي الألوان HSL وHSV، ومتى يكون كل منهما مناسبًا لتطوير الويب أو منتقيات الألوان، وكيف يقارن كلاهما بدوال ألوان CSS.
تم التحديث نوفمبر 19, 2025
أنظمة الألوان الدلالية: تسمية الألوان بالغرض لا بالدرجة
أنشئ أنظمة ألوان دلالية تسمّي الألوان بالغرض (نجاح، تحذير، خطأ) بدلًا من الدرجة. تعلّم بنية الرموز والتنفيذ في CSS وTailwind.
تم التحديث نوفمبر 14, 2025
بنية الألوان النسبية في CSS: تحويل أي لون ديناميكيًا
أتقن بنية الألوان النسبية في CSS لتحويل الألوان ديناميكيًا. اضبط hue والتشبع والإضاءة وقنوات alpha مباشرة في أوراق الأنماط الخاصة بك.
تم التحديث نوفمبر 10, 2025
التصميم لوضع التباين العالي: Windows وmacOS والويب
صمّم لوضع التباين العالي عبر Windows وmacOS والويب. تعلّم forced-colors في CSS وكلمات مفتاح ألوان النظام واستراتيجيات الاختبار والأخطاء الشائعة.
تم التحديث نوفمبر 06, 2025
فهم أكواد الألوان السداسية: الدليل الشامل
أتقن أكواد الألوان السداسية من الصفر. تعلّم معنى #RRGGBB، وكيفية قراءة أي قيمة hex، والترميز المختصر، والشفافية ألفا، وكيفية التحويل بين الصيغ.
تم التحديث أكتوبر 29, 2025
الألوان في الفن التوليدي: خوارزميات لإنشاء لوحات جميلة
أنشئ ألوانًا جميلة في الفن التوليدي باستخدام حلزونات HSL ولوحات قائمة على الضوضاء وأخذ عينات النسبة الذهبية وخوارزميات p5.js للجمال الإجرائي.
تم التحديث أكتوبر 26, 2025
التصميم الديناميكي للألوان في React: ما وراء متغيرات CSS
نفّذ تصميم ألوان ديناميكياً في React باستخدام متغيرات CSS ومزودي السياق و Tailwind CSS. ابنِ ثيمات قابلة للتخصيص من قِبَل المستخدم مع توليد الألوان في وقت التشغيل.
تم التحديث أكتوبر 23, 2025
شرح نظام Pantone Matching: دليل المصمم
تعرّف على كيفية عمل نظام Pantone Matching، والفرق بين الكتب المطلية وغير المطلية، والألوان المفردة مقابل ألوان العملية، وحدود تحويل Pantone إلى hex.
تم التحديث أكتوبر 19, 2025
إمكانية الوصول تتجاوز التباين: اللون في التصميم الشامل
إمكانية الوصول إلى الألوان تتجاوز نسب التباين. تعرّف على مبدأ WCAG 'ليس باللون وحده'، ومؤشرات التركيز، وحالات الخطأ، والأنماط الصديقة لعمى الألوان.
تم التحديث أكتوبر 17, 2025
ألوان الطباعة على الشاشة: دليل للمصممين
أتقن تقنيات ألوان الطباعة على الشاشة بما فيها فصل الألوان وشاشات الهالفتون وأحبار الألوان الفردية وإعداد التصميم للمواد المطبوعة على الشاشة.
تم التحديث أكتوبر 14, 2025
استيفاء الألوان في CSS: لماذا يفوز OKLCH
يحدد استيفاء ألوان CSS كيفية مزج التدرجات وcolor-mix() للألوان. تعلم لماذا يُنتج OKLCH نتائج حيوية ومتسقة إدراكياً بينما يفشل RGB وHSL.
تم التحديث أكتوبر 12, 2025
قائمة تدقيق إمكانية الوصول للألوان لمطوري الويب
قائمة شاملة لإمكانية الوصول للألوان تغطي نسب تباين WCAG، والاعتماد على اللون وحده، ومؤشرات التركيز، وأدوات الاختبار والفحوصات الآلية.
تم التحديث أكتوبر 07, 2025
معالجة الألوان في JavaScript: المكتبات والتقنيات
أتقن معالجة الألوان في JavaScript باستخدام chroma.js وculori وtinycolor2. حلّل الألوان وحوّلها وولّدها برمجيًا لتطبيقات الويب.
تم التحديث أكتوبر 02, 2025
اللون في الرسوم المتحركة للويب: GSAP وFramer Motion وCSS
أتقن الرسوم المتحركة للألوان في انتقالات CSS وGSAP وFramer Motion. تعلم استيفاء OKLCH وتقنيات الإطارات الرئيسية وتحسين الأداء.
تم التحديث سبتمبر 29, 2025
الألوان الفردية مقابل الألوان المدمجة: دليل ألوان الطباعة
افهم الفرق بين الألوان الفردية وألوان CMYK المدمجة، ومتى تستخدم كلًا منهما، وكيف تؤثر على تكاليف الطباعة، وكيف تعدّ الملفات بشكل صحيح لكل طريقة.
تم التحديث سبتمبر 27, 2025
خوارزميات تباين الألوان: WCAG 2 مقابل APCA
افهم كيف يحسب WCAG 2 والإضاءة النسبية وAPCA تبايناتها. قارن النتائج وتعلّم أيهما تستخدم للتصميم الشامل.
تم التحديث سبتمبر 25, 2025
نظام ألوان SwiftUI: بناء لوحات ألوان متكيفة
أنشئ لوحات ألوان متكيفة في SwiftUI. تعلّم Color مقابل UIColor وألوان كتالوج الأصول وألوان الوضع الداكن الديناميكية وأنماط ألوان إمكانية الوصول.
تم التحديث سبتمبر 19, 2025
رموز التصميم للألوان: من Figma إلى الكود
تطبيق رموز تصميم الألوان من Figma إلى كود الإنتاج باستخدام Style Dictionary. تعلّم تسمية الرموز وتحويلها وإخراجها لمنصات متعددة.
تم التحديث سبتمبر 12, 2025
اتفاقيات تسمية الألوان في CSS وأنظمة التصميم
استكشف الألوان المسماة في CSS والتسمية الدلالية بالخصائص المخصصة ونمط تسمية مقياس Tailwind وأفضل ممارسات إدارة أسماء الألوان في أنظمة التصميم للفرق.
تم التحديث سبتمبر 06, 2025
الألوان في تصميم البريد الإلكتروني: ما يصلح عبر العملاء المختلفين
أتقن تصميم الألوان في البريد الإلكتروني عبر Outlook وGmail وApple Mail. تعلّم الاستراتيجيات الآمنة وإصلاحات الوضع الداكن ومتطلبات الأنماط المضمّنة.
تم التحديث سبتمبر 05, 2025
أسلوب التصميم اللوني في React: متغيرات CSS والسياق
أنشئ أسلوب تصميم لوني قابل للتوسع في React باستخدام خصائص CSS المخصصة وContext API. يشمل بنية الثيم وـ Tailwind CSS والاستراتيجيات متعددة العلامات التجارية.
تم التحديث سبتمبر 03, 2025
أداء ألوان الويب: التدرجات والظلال والفلاتر
حسّن أداء ألوان الويب. تعلّم كيف تؤثر التدرجات وظلال الصناديق وفلاتر CSS وbackdrop-filter على أداء التصيير وكيفية تسريعها بـ GPU.
تم التحديث سبتمبر 01, 2025
الألوان المتجاوبة: تكييف الألوان لشاشات مختلفة
تعلّم كيف تتغير الألوان عبر الشاشات ومساحات الألوان والوضع الداكن. استخدم استعلامات الوسائط CSS والخصائص المخصصة لبناء أنظمة ألوان متجاوبة لأي شاشة.
تم التحديث أغسطس 31, 2025
تركيبات ألوان اللافتات لأقصى وضوح
تعلّم أكثر تركيبات ألوان اللافتات وضوحًا وبحوث القراءة من مسافات بعيدة ومتطلبات لافتات ADA واعتبارات LED وكيف تؤثر المواد والإضاءة على إدراك ألوان اللافتات.
تم التحديث أغسطس 30, 2025
كيف تختار ألوان علامتك التجارية: دليل خطوة بخطوة
دليل خطوة بخطوة لاختيار ألوان العلامة التجارية التي تلامس جمهورك. يغطي البحث وتحليل الصناعة وعلم نفس الألوان واختبار التوليفات وتوثيق دليل العلامة.
تم التحديث أغسطس 29, 2025