ToolDeck

تولیدکننده پالت رنگ

ایجاد پالت‌های رنگی مکمل، مشابه، سه‌گانه و چهارگانه از هر رنگ پایه‌ای

یک مثال امتحان کنید

رنگ پایه

طرح رنگی

پالت ساخته‌شده

پالت رنگ چیست؟

پالت رنگ مجموعه‌ای ثابت از رنگ‌هایی است که برای هماهنگی در یک طراحی انتخاب شده‌اند. وقتی یک رنگ پایه برای برند، وب‌سایت یا تصویرسازی انتخاب می‌کنید، به رنگ‌های همراه نیاز دارید که در کنار آن خوب به نظر برسند. تولید پالت رنگ این انتخاب را با اعمال قوانین نظریه رنگ خودکار می‌کند؛ به‌ویژه روابط هندسی روی چرخه رنگ استاندارد HSL.

چرخه رنگ HSL (رنگ‌مایه، اشباع، روشنایی) رنگ‌مایه‌ها را در دایره‌ای ۳۶۰ درجه‌ای مرتب می‌کند. قرمز در ۰ درجه، سبز در ۱۲۰ درجه و آبی در ۲۴۰ درجه قرار دارد. هر طرح هماهنگی رنگ با انتخاب رنگ‌مایه‌هایی در فاصله‌های زاویه‌ای مشخص از رنگ پایه کار می‌کند. به‌عنوان مثال، جفت مکمل از دو رنگ ۱۸۰ درجه از هم استفاده می‌کند. مجموعه مشابه رنگ‌هایی را در فاصله ۳۰ درجه از هر طرف انتخاب می‌کند. این قوانین هندسی ترکیب‌های متعادلی تولید می‌کنند زیرا رنگ‌مایه‌های انتخاب‌شده در طول چرخه پراکنده می‌شوند و در یک ناحیه متمرکز نمی‌شوند.

این ابزار هر رنگ hex را به‌عنوان ورودی می‌گیرد، آن را به HSL تبدیل می‌کند، رنگ‌مایه را بر اساس زوایای تعریف‌شده توسط طرح انتخابی می‌چرخاند و نتایج را دوباره به hex تبدیل می‌کند. شش طرح پشتیبانی می‌شود: مکمل، مشابه، سه‌گانه، تقسیم‌مکمل، چهارگانه و تک‌رنگ. هر طرح تعداد متفاوتی رنگ خروجی از ۲ تا ۵ تولید می‌کند.

چرا از این تولیدکننده پالت رنگ استفاده کنیم؟

انتخاب رنگ‌هایی که با هم هماهنگ باشند با روش آزمون‌وخطا کند و بی‌ثبات است. یک تولیدکننده پالت قوانین نظریه رنگ را فوری اعمال می‌کند و از هر نقطه شروعی نتایج متعادل ریاضی به شما می‌دهد.

تولید فوری پالت
یک رنگ پایه و نوع طرح را انتخاب کنید و پالت بلافاصله نمایش داده می‌شود. بدون ارسال فرم، بدون صفحه بارگذاری. رنگ پایه را تغییر دهید و خروجی به‌صورت زنده به‌روز می‌شود.
🎨
شش طرح هماهنگی
از مکمل، مشابه، سه‌گانه، تقسیم‌مکمل، چهارگانه یا تک‌رنگ انتخاب کنید. هر طرح جلوه بصری متفاوتی ایجاد می‌کند، از جفت‌های با کنتراست بالا گرفته تا گرادیان‌های ظریف تک‌رنگ.
🔒
پردازش حریم‌خصوصی‌محور
تمام محاسبات رنگ در مرورگر شما انجام می‌شود. هیچ داده رنگی به هیچ سروری ارسال نمی‌شود. ابزار پس از بارگذاری صفحه به‌صورت آفلاین هم کار می‌کند.
📋
خروجی با یک کلیک
کدهای hex تکی یا کل پالت را با یک کلیک کپی کنید. مستقیماً در CSS، Figma، تنظیمات Tailwind یا هر ابزار طراحی که مقادیر hex می‌پذیرد وارد کنید.

موارد استفاده تولیدکننده پالت رنگ

ایجاد تم رابط کاربری
توسعه‌دهندگان فرانت‌اند که یک اپلیکیشن جدید می‌سازند می‌توانند با یک رنگ برند شروع کنند و پالت کاملی برای توکن‌های اصلی، ثانویه و تأکیدی ایجاد کنند. طرح‌های سه‌گانه یا چهارگانه تنوع کافی برای دکمه‌ها، لینک‌ها، هشدارها و پس‌زمینه‌ها فراهم می‌کنند.
توکن‌های رنگ سیستم طراحی
مهندسان سیستم طراحی از پالت‌های تک‌رنگ برای ایجاد مقیاس روشنایی برای یک رنگ‌مایه برند استفاده می‌کنند، سپس هر مرحله را به یک توکن نام‌گذاری‌شده اختصاص می‌دهند (مثلاً blue-100 تا blue-900).
تجسم داده
مهندسان داده و تحلیلگران به رنگ‌های متمایز برای سری‌های نمودار نیاز دارند که با هم تداخل نداشته باشند. یک پالت مشابه یا سه‌گانه جداسازی کافی برای ۳ تا ۶ سری فراهم می‌کند و در عین حال نمودار را از نظر بصری منسجم نگه می‌دارد.
صفحات فرود بازاریابی
طراحانی که صفحات کمپین می‌سازند از رنگ اصلی برند شروع می‌کنند و از طرح تقسیم‌مکمل برای یافتن رنگ‌های تأکیدی برای دکمه‌های CTA و بخش‌های برجسته استفاده می‌کنند بدون اینکه با لوگو تداخل داشته باشند.
جفت‌سازی دسترسی‌پذیری
مهندسان QA که انطباق 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 متکی است. درک سه محور آن به شما کمک می‌کند پیش‌بینی کنید یک رنگ پایه تحت هر طرح چگونه تغییر می‌کند.

رنگ‌مایه (۰-۳۶۰)
موقعیت روی چرخه رنگ بر حسب درجه. ۰ قرمز، ۶۰ زرد، ۱۲۰ سبز، ۱۸۰ فیروزه‌ای، ۲۴۰ آبی، ۳۰۰ ارغوانی است. طرح‌های پالت این مقدار را می‌چرخانند در حالی که اشباع و روشنایی را ثابت نگه می‌دارند.
اشباع (۰-۱۰۰٪)
چقدر رنگ واضح است. ۱۰۰٪ کاملاً اشباع‌شده است؛ ۰٪ سایه‌ای از خاکستری است. طرح‌های پالت اشباع پایه را حفظ می‌کنند تا همه رنگ‌های تولیدشده شدت یکسانی داشته باشند.
روشنایی (۰-۱۰۰٪)
چقدر رنگ روشن است. ۰٪ سیاه، ۵۰٪ رنگ‌مایه خالص و ۱۰۰٪ سفید است. طرح‌های تک‌رنگ روشنایی را برای ایجاد مقیاس تنال تغییر می‌دهند؛ همه طرح‌های دیگر روشنایی را ثابت نگه می‌دارند.

نمونه‌های کد

پالت‌های رنگی را به‌صورت برنامه‌نویسی با استفاده از تبدیل 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
}

سؤالات متداول

تفاوت بین مکمل و تقسیم‌مکمل چیست؟
طرح مکمل از دو رنگ دقیقاً ۱۸۰ درجه از هم روی چرخه رنگ استفاده می‌کند که حداکثر کنتراست رنگ‌مایه ایجاد می‌کند. تقسیم‌مکمل رنگ مستقیماً مخالف را با دو رنگ در ۱۵۰ و ۲۱۰ درجه از پایه جایگزین می‌کند و کنتراست قوی با تنش بصری کمتر ارائه می‌دهد. تقسیم‌مکمل در طراحی رابط کاربری راحت‌تر کار می‌کند زیرا هیچ رنگ تأکیدی مستقیماً با پایه مخالف نیست.
یک پالت رابط کاربری چند رنگ باید داشته باشد؟
بیشتر سیستم‌های طراحی از ۳ تا ۵ رنگ‌مایه اصلی استفاده می‌کنند: اصلی، ثانویه، خنثی و یک یا دو تأکیدی. هر رنگ‌مایه اصلی سپس مقیاس روشنایی (۱۰۰ تا ۹۰۰) دارد. با طرح سه‌گانه یا چهارگانه برای رنگ‌مایه‌های اصلی شروع کنید، سپس مقیاس‌های تک‌رنگ برای هر یک ایجاد کنید.
آیا می‌توانم از این پالت‌ها با Tailwind CSS استفاده کنم؟
بله. مقادیر hex را کپی کنید و به آبجکت colors در فایل tailwind.config.js یا tailwind.config.ts خود اضافه کنید. برای یک مقیاس تک‌رنگ، هر سایه را به یک کلید عددی (۵۰، ۱۰۰، ۲۰۰ و غیره) نگاشت کنید تا با قرارداد نام‌گذاری Tailwind مطابقت داشته باشد.
چرا برخی رنگ‌های تولیدشده کدر یا گل‌آلود به نظر می‌رسند؟
اگر رنگ پایه شما اشباع پایین یا روشنایی افراطی داشته باشد (بسیار نزدیک به ۰٪ یا ۱۰۰٪)، رنگ‌مایه‌های چرخانده‌شده نیز کم‌رنگ به نظر می‌رسند. تولیدکننده مقادیر اشباع و روشنایی رنگ پایه را حفظ می‌کند. برای پالت‌های واضح، پایه‌ای با اشباع بالای ۵۰٪ و روشنایی بین ۳۰٪ و ۷۰٪ انتخاب کنید.
تفاوت بین HSL و HSV/HSB چیست؟
HSL و HSV هر دو از رنگ‌مایه به‌عنوان محور دایره‌ای استفاده می‌کنند، اما روشنایی را به‌طور متفاوت تعریف می‌کنند. در HSL، روشنایی ۵۰٪ رنگ‌مایه خالص و ۱۰۰٪ سفید است. در HSV (که HSB هم نامیده می‌شود)، مقدار ۱۰۰٪ رنگ‌مایه خالص است و راهی برای رسیدن به سفید بدون کاهش اشباع وجود ندارد. بیشتر تولیدکننده‌های پالت از HSL استفاده می‌کنند زیرا محور روشنایی آن به‌طور شهودی‌تری به نحوه درک ما از روشنایی رنگ نگاشت می‌شود.
طرح‌های هماهنگی رنگ چه ارتباطی با دسترسی‌پذیری دارند؟
هماهنگی رنگ و کنتراست WCAG دغدغه‌های جداگانه‌ای هستند. یک جفت مکمل حداکثر کنتراست رنگ‌مایه دارد، اما این تضمین نمی‌کند کنتراست روشنایی کافی برای خوانایی متن وجود داشته باشد. پس از تولید پالت، هر جفت پیش‌زمینه/پس‌زمینه را در برابر WCAG AA (نسبت ۴.۵:۱ برای متن عادی) آزمایش کنید. رنگ‌هایی با روشنایی مشابه صرف‌نظر از رابطه رنگ‌مایه‌شان رد خواهند شد.
آیا HSL همان تابع hsl() در CSS است؟
بله. تابع hsl() در CSS سه آرگومان می‌گیرد: رنگ‌مایه بر حسب درجه (۰-۳۶۰)، اشباع به‌عنوان درصد، و روشنایی به‌عنوان درصد. CSS Color Level 4 همچنین مقدار آلفا جدا شده با اسلش می‌پذیرد: hsl(240 60% 50% / 0.8). مدل HSL مورد استفاده این تولیدکننده دقیقاً با مشخصات CSS مطابقت دارد، بنابراین می‌توانید مقادیر رنگ‌مایه، اشباع و روشنایی را مستقیماً در شیت‌های استایل خود وارد کنید.