ToolDeck

منشئ لوحة الألوان

توليد لوحات ألوان متكاملة ومتماثلة وثلاثية ورباعية من أي لون أساسي

جرب مثالاً

اللون الأساسي

نظام الألوان

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

ما هي لوحة الألوان؟

لوحة الألوان هي مجموعة ثابتة من الألوان تُختار لتعمل معًا في تصميم متناسق. حين تختار لونًا أساسيًا واحدًا لعلامة تجارية أو موقع ويب أو رسم توضيحي، تحتاج إلى ألوان مرافقة تنسجم معه. تتولى أدوات توليد لوحات الألوان أتمتة هذا الاختيار بتطبيق قواعد نظرية الألوان، وتحديدًا العلاقات الهندسية على دائرة ألوان HSL القياسية.

ترتّب دائرة ألوان HSL (تدرج اللون، الإشباع، الإضاءة) درجاتِ اللون في دائرة بزاوية 360 درجة. يقع الأحمر عند 0 درجة، والأخضر عند 120 درجة، والأزرق عند 240 درجة. يعمل كل نظام من أنظمة التناسق اللوني باختيار درجات لون تبعد مسافات زاوية محددة عن اللون الأساسي. مثلاً، يستخدم النظام المتكامل لونين يبعدان 180 درجة عن بعضهما، بينما يختار النظام المتماثل ألوانًا ضمن نطاق 30 درجة على كلا الجانبين. تُنتج هذه القواعد الهندسية تركيبات متوازنة لأن درجات اللون المختارة تتوزع على الدائرة عوضًا عن تجمّعها في منطقة واحدة.

تأخذ هذه الأداة أي لون hex كمدخل، وتحوّله إلى HSL، ثم تُدوّر درجة اللون بالزوايا التي يحددها النظام المختار، وتُعيد النتائج إلى صيغة hex. تدعم الأداة ستة أنظمة: متكامل، ومتماثل، وثلاثي، وشبه متكامل، ورباعي، وأحادي اللون. يُنتج كل نظام عددًا مختلفًا من الألوان، يتراوح بين 2 و5.

لماذا تستخدم منشئ لوحة الألوان هذا؟

اختيار الألوان المتناسقة بالتجربة والخطأ بطيء وغير متسق. يُطبّق منشئ اللوحات قواعد نظرية الألوان فورًا، ليمنحك نتائج متوازنة رياضيًا من أي نقطة بداية.

توليد فوري للوحة
اختر لونًا أساسيًا ونوع نظام، فتظهر اللوحة في الحال. لا نماذج لإرسالها، ولا شاشات تحميل. غيّر اللون الأساسي وسيتحدّث الناتج فورًا.
🎨
ستة أنظمة تناسق
اختر من بين المتكامل والمتماثل والثلاثي وشبه المتكامل والرباعي وأحادي اللون. يُنتج كل نظام تأثيرًا بصريًا مختلفًا، من الأزواج عالية التباين إلى التدرجات اللطيفة أحادية اللون.
🔒
معالجة تحترم الخصوصية
تجري جميع العمليات الحسابية للألوان داخل متصفحك. لا تُرسل أي بيانات لونية إلى أي خادم. تعمل الأداة دون اتصال بالإنترنت بعد تحميل الصفحة.
📋
تصدير بنقرة واحدة
انسخ رموز hex الفردية أو اللوحة كاملة بنقرة واحدة. الصقها مباشرةً في CSS أو Figma أو ملف إعداد Tailwind أو أي أداة تصميم تقبل قيم hex.

حالات استخدام منشئ لوحة الألوان

إنشاء سمات واجهة المستخدم
يستطيع مطورو الواجهات الأمامية الذين يبنون تطبيقًا جديدًا البدء بلون العلامة التجارية وتوليد لوحة كاملة لرموز الألوان الأساسية والثانوية والمميزة. تُنتج الأنظمة الثلاثية والرباعية تنوعًا كافيًا للأزرار والروابط والتنبيهات والخلفيات.
رموز ألوان نظام التصميم
يستخدم مهندسو أنظمة التصميم لوحات أحادية اللون لتوليد مقياس إضاءة لدرجة لون علامة تجارية واحدة، ثم يربطون كل خطوة برمز مُسمّى (مثل blue-100 إلى blue-900).
تصوُّر البيانات
يحتاج مهندسو البيانات والمحللون إلى ألوان متميزة لسلاسل المخططات دون أن تتعارض. توفر اللوحة المتماثلة أو الثلاثية فصلًا كافيًا لـ 3-6 سلاسل مع الحفاظ على تماسك بصري للمخطط.
صفحات هبوط تسويقية
يبدأ المصممون الذين يبنون صفحات حملات من اللون الأساسي للعلامة التجارية، ويستخدمون نظام شبه المتكامل للعثور على ألوان مميزة لأزرار CTA والأقسام المُبرزة دون التعارض مع الشعار.
اختيار ألوان لإمكانية الوصول
يُقارن مهندسو ضمان الجودة الذين يختبرون توافق WCAG بين ألوان اللوحة المولَّدة ويُمرّرونها عبر فاحص التباين. كثيرًا ما يُنتج البدء بنظام متكامل أو شبه متكامل أزواجًا ذات تباين إضاءة عالٍ.
تعلّم نظرية الألوان
يستطيع طلاب التصميم التبديل بين الأنظمة الستة على اللون الأساسي ذاته ومشاهدة كيف يوزّع كل نظام درجات اللون حول الدائرة. يجعل الناتج البصري الزوايا المجردة ملموسة.

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

يختار كل نظام تناسق الألوانَ بناءً على زوايا دوران درجة اللون من اللون الأساسي على دائرة HSL. يسرد الجدول أدناه كل نظام، وعدد الألوان التي يُنتجها، وزوايا الدوران، وسياق التصميم الأنسب له.

النظامالألوانزوايا درجة اللونالأنسب لـ
Complementary2180High contrast, call-to-action buttons
Analogous3-30, 0, +30Harmonious, low-tension backgrounds
Triadic30, 120, 240Balanced variety, dashboards
Split-Complementary30, 150, 210Softer contrast than complementary
Tetradic (Rectangle)40, 90, 180, 270Rich palettes, complex UIs
Monochromatic5Same hue, varied lightnessSubtle, single-brand pages

كيف يعمل دوران دائرة ألوان HSL

يعتمد توليد اللوحات في هذه الأداة بالكامل على نموذج ألوان HSL. فهم محاوره الثلاثة يساعدك على التنبؤ بكيفية تحوّل اللون الأساسي تحت كل نظام.

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

أمثلة برمجية

أنشئ لوحات ألوان برمجيًا باستخدام تحويل HSL ودوران درجة اللون.

JavaScript
// Generate a complementary color by rotating hue 180 degrees
function hexToHsl(hex) {
  let r = parseInt(hex.slice(1,3), 16) / 255;
  let g = parseInt(hex.slice(3,5), 16) / 255;
  let b = parseInt(hex.slice(5,7), 16) / 255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
    else if (max === g) h = ((b - r) / d + 2) / 6;
    else h = ((r - g) / d + 4) / 6;
  }
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  const a = s * Math.min(l, 1 - l);
  const f = n => {
    const k = (n + h / 30) % 12;
    return Math.round(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
  };
  return '#' + [f(0), f(8), f(4)].map(v => v.toString(16).padStart(2, '0')).join('');
}

const base = '#6366f1';
const [h, s, l] = hexToHsl(base);
const comp = hslToHex((h + 180) % 360, s, l);
console.log(comp); // → "#f1ee63"
Python
import colorsys

def hex_to_hsl(hex_color: str):
    r, g, b = (int(hex_color[i:i+2], 16) / 255 for i in (1, 3, 5))
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return round(h * 360), round(s * 100), round(l * 100)

def hsl_to_hex(h: int, s: int, l: int) -> str:
    r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
    return '#{:02x}{:02x}{:02x}'.format(round(r * 255), round(g * 255), round(b * 255))

def complementary(hex_color: str) -> str:
    h, s, l = hex_to_hsl(hex_color)
    return hsl_to_hex((h + 180) % 360, s, l)

def triadic(hex_color: str) -> list[str]:
    h, s, l = hex_to_hsl(hex_color)
    return [hex_color, hsl_to_hex((h + 120) % 360, s, l), hsl_to_hex((h + 240) % 360, s, l)]

print(complementary('#6366f1'))  # → #f1ee63
print(triadic('#6366f1'))        # → ['#6366f1', '#66f163', '#f16366']
Go
package main

import (
	"fmt"
	"math"
)

func hexToHSL(hex string) (float64, float64, float64) {
	var r, g, b uint8
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, l * 100
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf:
		h = (gf - bf) / d
		if gf < bf { h += 6 }
	case gf:
		h = (bf-rf)/d + 2
	case bf:
		h = (rf-gf)/d + 4
	}
	return h * 60, s * 100, l * 100
}

func hslToHex(h, s, l float64) string {
	s /= 100; l /= 100
	a := s * math.Min(l, 1-l)
	f := func(n float64) uint8 {
		k := math.Mod(n+h/30, 12)
		return uint8(255 * (l - a*math.Max(-1, math.Min(math.Min(k-3, 9-k), 1))))
	}
	return fmt.Sprintf("#%02x%02x%02x", f(0), f(8), f(4))
}

func main() {
	h, s, l := hexToHSL("#6366f1")
	comp := hslToHex(math.Mod(h+180, 360), s, l)
	fmt.Println(comp) // → #f1ee63
}

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

ما الفرق بين النظام المتكامل وشبه المتكامل؟
يستخدم النظام المتكامل لونين يبعدان 180 درجة بالضبط على دائرة الألوان، مما يُنتج أقصى درجات تباين اللون. يستبدل شبه المتكامل المقابلَ المباشر بلونين يقعان على 150 و210 درجة من اللون الأساسي، مما يمنح تباينًا قويًا مع توتر بصري أقل. يسهل التعامل مع شبه المتكامل في تصميم واجهة المستخدم لأن أيًّا من اللونين المميزين لا يُعاكس اللون الأساسي مباشرة.
كم عدد الألوان التي يجب أن تحتويها لوحة واجهة المستخدم؟
تستخدم معظم أنظمة التصميم 3-5 درجات لون أساسية: أساسي، وثانوي، ومحايد، ولون مميز أو اثنان. لكل درجة لون أساسية مقياس إضاءة خاص بها (100 إلى 900). ابدأ بنظام ثلاثي أو رباعي لدرجات اللون الأساسية، ثم أنشئ مقاييس أحادية اللون لكل منها.
هل يمكنني استخدام هذه اللوحات مع Tailwind CSS؟
نعم. انسخ قيم hex وأضفها إلى كائن الألوان في ملف tailwind.config.js أو tailwind.config.ts. لمقياس أحادي اللون، عيّن كل درجة إلى مفتاح مرقّم (50 و100 و200 إلخ) لتتوافق مع اصطلاح التسمية في Tailwind.
لماذا تبدو بعض الألوان المولَّدة باهتة أو ضبابية؟
إذا كان للون الأساسي إشباع منخفض أو إضاءة متطرفة (قريبة جدًا من 0% أو 100%)، فستبدو درجات اللون المُدوَّرة أيضًا مخففة. يحتفظ المنشئ بقيم إشباع اللون الأساسي وإضاءته. للحصول على لوحات نابضة بالحياة، اختر لونًا أساسيًا بإشباع أعلى من 50% وإضاءة تتراوح بين 30% و70%.
ما الفرق بين HSL و HSV/HSB؟
يستخدم كلٌّ من HSL و HSV تدرج اللون كمحور دائري، لكنهما يُعرّفان السطوع بشكل مختلف. في HSL، الإضاءة 50% تمثّل درجة اللون النقية و100% تمثّل الأبيض. في HSV (المعروف أيضًا بـ HSB)، القيمة 100% تمثّل درجة اللون النقية ولا توجد طريقة للوصول إلى الأبيض دون تخفيض الإشباع. تستخدم معظم منشئات اللوحات HSL لأن محور الإضاءة فيه يرتبط بشكل أكثر بداهةً بطريقة إدراكنا لسطوع الألوان.
كيف ترتبط أنظمة التناسق اللوني بإمكانية الوصول؟
التناسق اللوني وتباين WCAG مفهومان منفصلان. يمتلك النظام المتكامل أقصى تباين في درجات اللون، لكن ذلك لا يضمن تباينًا كافيًا في الإضاءة لإمكانية قراءة النص. بعد توليد اللوحة، اختبر كل زوج مقدمة/خلفية وفق WCAG AA (نسبة 4.5:1 للنص العادي). ستفشل الألوان ذات الإضاءة المتشابهة بصرف النظر عن علاقة درجاتها.
هل HSL هو نفسه دالة hsl() في CSS؟
نعم. تأخذ دالة hsl() في CSS ثلاثة وسيطات: تدرج اللون بالدرجات (0-360)، والإشباع كنسبة مئوية، والإضاءة كنسبة مئوية. يقبل CSS Color Level 4 أيضًا قيمة ألفا مفصولة بشرطة مائلة: hsl(240 60% 50% / 0.8). نموذج HSL الذي تستخدمه هذه الأداة يطابق مواصفة CSS تمامًا، لذا يمكنك لصق قيم تدرج اللون والإشباع والإضاءة مباشرةً في أوراق الأنماط الخاصة بك.