منشئ لوحة الألوان
توليد لوحات ألوان متكاملة ومتماثلة وثلاثية ورباعية من أي لون أساسي
اللون الأساسي
نظام الألوان
الألوان الناتجة
ما هي لوحة الألوان؟
لوحة الألوان هي مجموعة ثابتة من الألوان تُختار لتعمل معًا في تصميم متناسق. حين تختار لونًا أساسيًا واحدًا لعلامة تجارية أو موقع ويب أو رسم توضيحي، تحتاج إلى ألوان مرافقة تنسجم معه. تتولى أدوات توليد لوحات الألوان أتمتة هذا الاختيار بتطبيق قواعد نظرية الألوان، وتحديدًا العلاقات الهندسية على دائرة ألوان HSL القياسية.
ترتّب دائرة ألوان HSL (تدرج اللون، الإشباع، الإضاءة) درجاتِ اللون في دائرة بزاوية 360 درجة. يقع الأحمر عند 0 درجة، والأخضر عند 120 درجة، والأزرق عند 240 درجة. يعمل كل نظام من أنظمة التناسق اللوني باختيار درجات لون تبعد مسافات زاوية محددة عن اللون الأساسي. مثلاً، يستخدم النظام المتكامل لونين يبعدان 180 درجة عن بعضهما، بينما يختار النظام المتماثل ألوانًا ضمن نطاق 30 درجة على كلا الجانبين. تُنتج هذه القواعد الهندسية تركيبات متوازنة لأن درجات اللون المختارة تتوزع على الدائرة عوضًا عن تجمّعها في منطقة واحدة.
تأخذ هذه الأداة أي لون hex كمدخل، وتحوّله إلى HSL، ثم تُدوّر درجة اللون بالزوايا التي يحددها النظام المختار، وتُعيد النتائج إلى صيغة hex. تدعم الأداة ستة أنظمة: متكامل، ومتماثل، وثلاثي، وشبه متكامل، ورباعي، وأحادي اللون. يُنتج كل نظام عددًا مختلفًا من الألوان، يتراوح بين 2 و5.
لماذا تستخدم منشئ لوحة الألوان هذا؟
اختيار الألوان المتناسقة بالتجربة والخطأ بطيء وغير متسق. يُطبّق منشئ اللوحات قواعد نظرية الألوان فورًا، ليمنحك نتائج متوازنة رياضيًا من أي نقطة بداية.
حالات استخدام منشئ لوحة الألوان
مقارنة أنظمة التناسق اللوني
يختار كل نظام تناسق الألوانَ بناءً على زوايا دوران درجة اللون من اللون الأساسي على دائرة HSL. يسرد الجدول أدناه كل نظام، وعدد الألوان التي يُنتجها، وزوايا الدوران، وسياق التصميم الأنسب له.
| النظام | الألوان | زوايا درجة اللون | الأنسب لـ |
|---|---|---|---|
| Complementary | 2 | 180 | High contrast, call-to-action buttons |
| Analogous | 3 | -30, 0, +30 | Harmonious, low-tension backgrounds |
| Triadic | 3 | 0, 120, 240 | Balanced variety, dashboards |
| Split-Complementary | 3 | 0, 150, 210 | Softer contrast than complementary |
| Tetradic (Rectangle) | 4 | 0, 90, 180, 270 | Rich palettes, complex UIs |
| Monochromatic | 5 | Same hue, varied lightness | Subtle, single-brand pages |
كيف يعمل دوران دائرة ألوان HSL
يعتمد توليد اللوحات في هذه الأداة بالكامل على نموذج ألوان HSL. فهم محاوره الثلاثة يساعدك على التنبؤ بكيفية تحوّل اللون الأساسي تحت كل نظام.
أمثلة برمجية
أنشئ لوحات ألوان برمجيًا باستخدام تحويل HSL ودوران درجة اللون.
// 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"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']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
}