Tints Tones and Shades لوحة ألوان

حول هذه اللوحة

Tints Tones and Shades is a curated five-colour لوحة designed for teaching tint, tone and shade variations from one base hue. The base blue is lightened, greyed and darkened to show how one hue can generate a complete working scale.

The colours are #1D4ED8, #93C5FD, #6B86B8, #17366E, #E8F0FF. استخدم the darkest and lightest values to establish hierarchy first, then introduce the supporting colours for accents, surfaces and visual rhythm.

You can also explore related colour education لوحات, open the لوحة in the colour tool, or compare it with articles that use similar colour ideas.

ألوان هذه اللوحة

Click any colour to copy the HEX value, or open the full لوحة in the colour tool to test harmonies, contrast and CSS export options.

كيفية استخدام هذه اللوحة

• القاعدة: استخدم اللون الأكثر هدوءًا أو الأفتح كقاعدة، واترك الدرجات الأقوى لإضافة الشخصية والتركيز.
• التباين: حدّد دائمًا لونًا فاتحًا وآخر داكنًا قبل استخدام اللوحة للنصوص أو الأزرار أو المعلومات المهمة.
• الإبراز: احتفظ باللون الأكثر حيوية لمساحات صغيرة حتى يجذب الانتباه من دون أن يسيطر على التكوين.
• السياق: اختبر الألوان على الخامة الحقيقية وفي الإضاءة الحقيقية أو على الأجهزة المستخدمة فعليًا قبل اعتمادها.
• الاتساق: امنح كل لون وظيفة ثابتة وكرر هذه الوظائف بين الصفحات أو الغرف أو الوسائط المختلفة.

متغيرات الألوان في CSS

نسخ these variables into your stylesheet or design system.

:root {
  --لوحة-colour-1: #1D4ED8;
  --لوحة-colour-2: #93C5FD;
  --لوحة-colour-3: #6B86B8;
  --لوحة-colour-4: #17366E;
  --لوحة-colour-5: #E8F0FF;
}