تولیدکننده پالت رنگ
ایجاد پالتهای رنگی مکمل، مشابه، سهگانه و چهارگانه از هر رنگ پایهای
رنگ پایه
طرح رنگی
پالت ساختهشده
پالت رنگ چیست؟
پالت رنگ مجموعهای ثابت از رنگهایی است که برای هماهنگی در یک طراحی انتخاب شدهاند. وقتی یک رنگ پایه برای برند، وبسایت یا تصویرسازی انتخاب میکنید، به رنگهای همراه نیاز دارید که در کنار آن خوب به نظر برسند. تولید پالت رنگ این انتخاب را با اعمال قوانین نظریه رنگ خودکار میکند؛ بهویژه روابط هندسی روی چرخه رنگ استاندارد HSL.
چرخه رنگ HSL (رنگمایه، اشباع، روشنایی) رنگمایهها را در دایرهای ۳۶۰ درجهای مرتب میکند. قرمز در ۰ درجه، سبز در ۱۲۰ درجه و آبی در ۲۴۰ درجه قرار دارد. هر طرح هماهنگی رنگ با انتخاب رنگمایههایی در فاصلههای زاویهای مشخص از رنگ پایه کار میکند. بهعنوان مثال، جفت مکمل از دو رنگ ۱۸۰ درجه از هم استفاده میکند. مجموعه مشابه رنگهایی را در فاصله ۳۰ درجه از هر طرف انتخاب میکند. این قوانین هندسی ترکیبهای متعادلی تولید میکنند زیرا رنگمایههای انتخابشده در طول چرخه پراکنده میشوند و در یک ناحیه متمرکز نمیشوند.
این ابزار هر رنگ hex را بهعنوان ورودی میگیرد، آن را به HSL تبدیل میکند، رنگمایه را بر اساس زوایای تعریفشده توسط طرح انتخابی میچرخاند و نتایج را دوباره به hex تبدیل میکند. شش طرح پشتیبانی میشود: مکمل، مشابه، سهگانه، تقسیممکمل، چهارگانه و تکرنگ. هر طرح تعداد متفاوتی رنگ خروجی از ۲ تا ۵ تولید میکند.
چرا از این تولیدکننده پالت رنگ استفاده کنیم؟
انتخاب رنگهایی که با هم هماهنگ باشند با روش آزمونوخطا کند و بیثبات است. یک تولیدکننده پالت قوانین نظریه رنگ را فوری اعمال میکند و از هر نقطه شروعی نتایج متعادل ریاضی به شما میدهد.
موارد استفاده تولیدکننده پالت رنگ
مقایسه طرحهای هماهنگی رنگ
هر طرح هماهنگی رنگها را بر اساس زوایای چرخش رنگمایه از رنگ پایه روی چرخه 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
}