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

ساخت پالت رنگ از روی هارمونی: مکمل، مشابه، سه‌گانه، چهارگانه و تک‌فام

رایگان
همه‌ی این ابزارها داخل مرورگر شما اجرا می‌شوند؛ هیچ داده‌ای به سرور ما ارسال نمی‌شود.
الگوی هارمونی
روی هر سواچ بزنید تا کد هگز آن کپی شود؛ قفل، رنگ را در برابر تصادفی‌سازی نگه می‌دارد.
مقایسه‌ی همه‌ی الگوها روی همین رنگ پایه
روی هر ردیف بزنید تا پالت به همان الگو تغییر کند.

درباره‌ی تولید پالت رنگ

در فضای HSL رنگ مکمل چیز پیچیده‌ای نیست: همان فام پایه به‌علاوه‌ی ۱۸۰ درجه؛ سه‌گانه با گام‌های ۱۲۰ درجه و چهارگانه با گام‌های ۹۰ درجه ساخته می‌شود. تله‌ی واقعی اینجاست که HSL ادراکی نیست؛ زرد و آبی با روشنایی یکسان ۵۳٪ روی کاغذ برابرند اما چشم زرد را به‌مراتب روشن‌تر می‌بیند، برای همین کنار هر سواچ نسبت کنتراست WCAG هم نوشته شده است. تمام محاسبه‌ها داخل مرورگر شما انجام می‌شود و هیچ رنگی جایی ارسال نمی‌گردد.

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

  1. 1

    رنگ پایه را با انتخابگر رنگ بردارید یا کد هگز آن را در کادر بچسبانید؛ لغزنده‌های فام، اشباع و روشنایی همان لحظه هماهنگ می‌شوند.

  2. 2

    یکی از شش الگو را انتخاب کنید: مکمل، مشابه، سه‌گانه، مکمل شکسته، چهارگانه یا تک‌فام.

  3. 3

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

  4. 4

    قفل هر سواچی را که پسندیده‌اید ببندید و دکمه‌ی رنگ تصادفی را بزنید تا فقط بقیه دوباره ساخته شوند.

  5. 5

    پیشوند متغیر را بنویسید، قالب CSS، SCSS، JSON یا HEX را انتخاب کنید و بلوک خروجی را کپی کنید.

پرسش‌های متداول

آیا رنگ مکمل همیشه بهترین گزینه برای رنگ تأکیدی است؟

نه. دو فام دقیقاً ۱۸۰ درجه از هم، وقتی هر دو اشباع بالا داشته باشند، روی لبه‌ی مشترکشان ارتعاش بصری می‌سازند و چشم را خسته می‌کنند. برای رنگ تأکیدی معمولاً مکمل شکسته (۱۵۰ و ۲۱۰ درجه) نتیجه‌ی آرام‌تری می‌دهد، یا اشباع رنگ مکمل را با لغزنده پایین بیاورید.

چرا در بیشتر الگوها اشباع و روشنایی ثابت می‌ماند؟

چون تعریف کلاسیک هارمونی رنگ فقط درباره‌ی چرخش فام است و ثابت نگه‌داشتن S و L باعث می‌شود رنگ‌ها هم‌وزن به نظر برسند. تنها استثنا الگوی تک‌فام است که فام را قفل می‌کند و پنج پله‌ی روشنایی با فاصله‌ی ۱۵ واحد می‌سازد؛ اگر رنگ پایه خیلی روشن یا خیلی تیره باشد، کل این پنجره‌ی ۶۰ واحدی جابه‌جا می‌شود تا هر پنج پله متمایز بمانند.

پالت هارمونیک یعنی پالت دسترس‌پذیر؟

خیر، و این رایج‌ترین سوءبرداشت است. هارمونی فقط درباره‌ی فاصله‌ی فام‌هاست و هیچ تضمینی برای خوانایی نمی‌دهد. عددی که کنار هر سواچ می‌بینید نسبت کنتراست همان رنگ با مشکی یا سفیدِ انتخاب‌شده روی خودش است، نه با پس‌زمینه‌ی سایت شما؛ برای متن روی پس‌زمینه‌ی واقعی باید جداگانه اندازه بگیرید.

چرا با عوض کردن الگو، قفل‌ها پاک می‌شوند؟

چون تعداد خانه‌های هر الگو فرق دارد: مکمل دو، مشابه و سه‌گانه سه، چهارگانه چهار و تک‌فام پنج خانه. نگه‌داشتن قفل خانه‌ی چهارم در الگویی که فقط دو خانه دارد بی‌معنی است، پس با هر تغییر الگو قفل‌ها صفر می‌شوند. رنگ پایه اما دست‌نخورده باقی می‌ماند.