CSS Academy · درس

‏color-mix() وصياغة الألوان النسبية

امزج الألوان وأنشئ تنويعات لونية باستخدام دوال ألوان CSS الحديثة

‏color-mix() وصياغة الألوان النسبية درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

دالة color-mix()

تمزج color-mix() لونين معًا ضمن مساحة لونية محددة. وتتيح إنشاء تنويعات لونية مدفوعة برموز التصميم من دون Sass أو JavaScript.

  <button class="button-hover">Hover-mixed button</button>

صيغة color-mix()

الصيغة الكاملة: color-mix(in <color-space>, <color-1> [percentage], <color-2> [percentage]). ويجب أن يكون مجموع النسب المئوية 100%.

  <div class="mix-equal">Equal mix</div>
  <div class="mix-weighted">Weighted mix</div>

المساحات اللونية في color-mix()

تؤثر المساحة اللونية في نتيجة المزج. وتنتج المساحات الحديثة الإدراكية مثل oklch نتائج أكثر تجانسًا بصريًا من srgb:

  <div class="oklch-mix">OKLCH mix</div>
  <div class="srgb-mix">sRGB mix</div>

إنشاء مقاييس لونية باستخدام color-mix()

أنشئ لوحة ألوان متناسقة انطلاقًا من لون علامة تجارية واحد:

  <span class="swatch swatch-100"></span>
  <span class="swatch swatch-300"></span>
  <span class="swatch swatch-700"></span>
  <span class="swatch swatch-900"></span>

صيغة الألوان النسبية

تتيح لك الألوان النسبية اشتقاق لون جديد من لون موجود عبر تعديل قنوات محددة. استخدم الكلمة المفتاحية from:

  <p class="darker">20% darker text</p>
  <p class="desaturated">Half saturation text</p>

تنويع شفاف باستخدام الألوان النسبية

أنشئ نسخة شفافة من لون العلامة التجارية من دون معرفة قيم RGB الخاصة به:

  <div class="overlay">Overlay</div>

تفتيح الألوان وتغميقها

أضف الإضاءة أو اطرحها في oklch لإنشاء الدرجات الفاتحة والداكنة:

  <div class="card demo-active">Card</div>

نظرة عامة على مساحة الألوان oklch

‏OKLCH هي مساحة لونية متجانسة إدراكيًا:

l — الإضاءة (من 0 إلى 1)
c — التشبع اللوني (من 0 إلى 0.4+)
h — زاوية تدرج اللون (من 0 إلى 360)

يؤدي تعديل l إلى إنشاء درجات فاتحة وداكنة متجانسة ويمكن التنبؤ بها.

دعم المتصفحات

تدعم Chrome 111+ وFirefox 113+ وSafari 16.2+ الدالة color-mix(). أما صيغة الألوان النسبية، أي الكلمة المفتاحية from، فتتوفر في Chrome 119+ وSafari 16.4+ وFirefox 128+. راجع caniuse.com للاطلاع على الدعم الحالي.

مستقبل color-contrast()

‏color-contrast() هي دالة مقترحة تختار تلقائيًا اللون الأسهل قراءةً من قائمة ألوان، مقابل خلفية محددة. وهي غير متاحة بعد في المتصفحات، لكنها مصممة لإنشاء سمات تركّز على سهولة الوصول.

تحقّق سريعًا

أي مساحة لونية في color-mix() تنتج أكثر نتائج المزج تجانسًا من الناحية الإدراكية؟

مراجعة

تمزج color-mix(in oklch, color1 %, color2 %) الألوان ضمن مساحة محددة، ما يجعلها مثالية لإنشاء الدرجات الفاتحة والداكنة والنسخ الشفافة من لون علامة تجارية واحد. وتشتق صيغة الألوان النسبية (oklch(from var(--brand) calc(l+0.2) c h)) ألوانًا جديدة عبر تعديل قنوات فردية. وتُعد OKLCH أفضل مساحة لونية للحصول على نتائج متجانسة إدراكيًا.

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

هل درس «‏color-mix() وصياغة الألوان النسبية» مجاني؟

نعم — نص درس «‏color-mix() وصياغة الألوان النسبية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏color-mix() وصياغة الألوان النسبية»؟

امزج الألوان وأنشئ تنويعات لونية باستخدام دوال ألوان CSS الحديثة تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «‏color-mix() وصياغة الألوان النسبية»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy