هارمونی رنگ: مکمل، مشابه، سهگانه و بیشتر
هارمونی رنگ، فامها را با زاویههای ثابت روی چرخه رنگ انتخاب میکند: فاصله 180° برای مکمل، 30° برای مشابه و 120° برای سهگانه. اگر فام را بهجای HSL در OKLCH بچرخانید، رنگها به یک اندازه روشن میمانند و هیچ فامی ناخواسته بیرون نمیزند.
5 دقیقه مطالعه
هارمونی رنگ چیست
هارمونی قاعدهای برای انتخاب رنگهایی است که به هم میآیند. یک رنگ پایه برمیدارید، روشنایی و کرومای آن را نگه میدارید و فقط فام را با زاویههای مشخص روی چرخه رنگ میچرخانید.
زاویهها بخش ساده کار هستند. اینکه کدام چرخه را میچرخانید هم به همان اندازه مهم است، چون چرخه کلاسیک HSL و چرخهای ادراکی مثل OKLCH با زاویه یکسان نتیجههایی آشکارا متفاوت میدهند. همه مثالهای زیر از #2a7fbf، یک آبی متوسط، شروع میشوند.
| فرمت | مقدار |
|---|---|
| HEX | |
| HSL | |
| OKLCH |
مکمل، مکمل منشعب، مشابه، سهگانه، چهارگانه، مربعی
هر ردیف روشنایی OKLCH رنگ پایه، یعنی 0.577، و کرومای آن، یعنی 0.127، را نگه میدارد. فقط فام به اندازه زاویههای فهرستشده میچرخد. وقتی رنگ چرخیده بیرون از sRGB میافتد، کروما کمی پایین میآید تا در آن جا شود؛ به همین دلیل یکی دو رنگ کمی کمرمقترند. تکرنگ استثناست: فام را نگه میدارد و روشنایی را در گامهای 0.12 تغییر میدهد.
| هارمونی | زاویههای فام | رنگ 2 | رنگ 3 | رنگ 4 | رنگ 5 |
|---|---|---|---|---|---|
| مکمل | 0°, 180° | #ab6708 | |||
| مکمل منشعب | 0°, 150°, 210° | #b85a42 | #907800 | ||
| مشابه | 0°, −30°, +30° | #008aa7 | #6571c3 | ||
| سهگانه | 0°, 120°, 240° | #b6566e | #678626 | ||
| چهارگانه (مستطیلی) | 0°, 60°, 180°, 240° | #8c64b4 | #ab6708 | #678626 | |
| مربعی | 0°, 90°, 180°, 270° | #a75a96 | #ab6708 | #258f58 | |
| تکرنگ | همان فام، L ±0.12، ±0.24 | #00396f | #005b98 | #53a4e7 | #7dcbff |
- مکمل: بیشترین تنش. رنگ دوم را فقط برای تأکیدهای کوچک، مثل دکمه فراخوان (CTA)، به کار ببرید.
- مکمل منشعب: همان انرژی مکمل، اما راحتتر متعادل میشود، چون رنگ تأکیدی میان دو همسایه فام مقابل تقسیم شده است.
- مشابه: آرام و یکدست. برای تصویرسازی و پسزمینه خوب است، اما وقتی باید یک عنصر به چشم بیاید ضعیف عمل میکند.
- سهگانه، چهارگانه و مربعی: پرجنبوجوش و سختمهار. بگذارید یک رنگ اصلی باشد و بقیه را کمسهم نگه دارید.
- تکرنگ: یک فام در چند گام روشنایی. امنترین انتخاب برای رابط کاربری، چون کنتراست در هر حال از روشنایی میآید.
چرا چرخه رنگ HSL هارمونی نامتعادل میسازد
بیشتر چرخههای رنگ در ابزارهای طراحی HSL هستند: فام را میچرخانند و عددهای اشباع و روشنایی HSL را ثابت نگه میدارند. اما روشنایی HSL یک فرمول است، نه چیزی که چشم میبیند. یک زرد طلایی را در HSL به اندازه 180° بچرخانید تا به آبی پررنگی برسید که خیلی تیرهتر از زرد به نظر میرسد.
چرخاندن در OKLCH روشنایی ادراکی را یکسان نگه میدارد. در جدول زیر #f4b400 به هر دو روش چرخانده شده است، همراه با روشنایی OKLCH هر نتیجه.
| نقش | چرخش در HSL | OKLCH L | چرخش در OKLCH | OKLCH L |
|---|---|---|---|---|
| پایه | #f4b400 | 0.808 | #f4b400 | 0.808 |
| مکمل | #0040f4 | 0.489 | #97c0ff | 0.802 |
| سهگانه، +120° | #00f4b4 | 0.857 | #00dcec | 0.817 |
| سهگانه، +240° | #b400f4 | 0.586 | #f299fe | 0.808 |
مجموعه HSL روشنایی را از 0.489 تا 0.857 پخش میکند؛ پس آبی و بنفش فرو مینشینند و سبز نعنایی میدرخشد. مجموعه OKLCH بین 0.802 و 0.817 میماند. همین اتفاق برای رنگهای اصلی خالص RGB هم میافتد: #ff0000، #00ff00 و #0000ff یک سهگانه بینقص در HSL هستند، اما روشنایی OKLCH آنها 0.628، 0.866 و 0.452 است.
این کار یک بدهبستان دارد. آبیای به روشنی این زرد نمیتواند روی صفحه sRGB خیلی پررنگ باشد؛ برای همین مکمل OKLCH، یعنی #97c0ff، بهجای 0.166 کرومای 0.10 دارد. باید میان روشنایی برابر و پررنگی برابر یکی را انتخاب کنید؛ با زرد و آبی هر دو با هم ممکن نیست.
چرخه RYB نقاشان در برابر چرخه RGB صفحهنمایش
چرخهای که در کلاس هنر دیدهاید RYB است: قرمز، زرد و آبی بهعنوان رنگهای اصلی، مثل مخلوط کردن رنگ نقاشی. روی این چرخه، مکمل قرمز سبز است و مکمل آبی نارنجی. صفحهنمایشها نور را ترکیب میکنند، پس ابزارهای دیجیتال از چرخه RGB استفاده میکنند که در آن مکمل قرمز فیروزهای (cyan) است و مکمل آبی زرد.
هیچکدام غلط نیست؛ هرکدام به پرسش دیگری پاسخ میدهد. RYB از سنت نقاشی پیروی میکند و RGB و OKLCH از طرز کار صفحهنمایش و چشم. اگر ابزار طراحی جایی که انتظار سبز داشتید فیروزهای نشان داد، یعنی از چرخه RGB استفاده میکند.
| پایه | مکمل در RYB | مکمل در RGB (HSL) | مکمل در OKLCH |
|---|---|---|---|
| #ff0000 | سبز | #00ffff | #009cb2 |
| #0000ff | نارنجی | #ffff00 | #734f00 |
| #ffff00 | بنفش | #0000ff | #f3f1ff |
ستون OKLCH نشان میدهد روشنایی برابر با رنگهای افراطی چه میکند. مکمل آبی خالص به یک اُخرایی تیره با همان روشنایی، یعنی 0.45، تبدیل میشود و مکمل زرد خالص به یک اسطوخودوسی تقریباً سفید با روشنایی 0.96.
قانون 60-30-10 در یک هارمونی رنگ
هارمونی میگوید از کدام رنگها استفاده کنید، نه اینکه از هرکدام چقدر. قانون 60-30-10 این جای خالی را پر میکند: حدود 60% سطح به رنگ غالب میرسد، 30% به رنگ ثانویه و 10% به رنگ تأکیدی. سهمهای برابر حتی یک هارمونی خوب را هم شلوغ نشان میدهند.
در رابط کاربری، آن 60% معمولاً رنگی تقریباً خنثی است که تهمایهای از فام پایه دارد، 30% خود رنگ پایه است و 10% رنگ تأکیدی مکمل. این یک مجموعه آماده کپی است که از #2a7fbf ساخته شده.
| نقش | سهم | رنگ | OKLCH | کاربرد |
|---|---|---|---|---|
| غالب | 60% | #eff6fd | L 0.97, C 0.012 | پسزمینه صفحه، کارتها |
| ثانویه | 30% | #2a7fbf | L 0.577, C 0.127 | هدر، لینکها، حالتهای انتخابشده |
| تأکیدی | 10% | #ab6708 | L 0.577, C 0.127 | دکمه فراخوان اصلی، برجستهسازیها |
| متن | ندارد | #15232f | L 0.25, C 0.03 | متن اصلی روی رنگ غالب |
CSS
:root {
--surface: #eff6fd;
--primary: #2a7fbf;
--accent: #ab6708;
--text: #15232f;
}بررسی کنتراست در یک هارمونی رنگ
تفاوت فام متن را خوانا نمیکند، تفاوت روشنایی میکند. جفت مکمل بالا از نظر فام بیشترین فاصله ممکن را دارد، اما #2a7fbf روی #ab6708 نسبت WCAG برابر 1.05:1 و Lc در APCA برابر 0 دارد: بهعنوان متن عملاً دیده نمیشود.
روشنایی برابر یک مزیت هم دارد. متن سفید روی همه رنگهای هارمونیهای OKLCH بالا بین 4.04:1 و 4.62:1 قرار میگیرد. در نسخه HSL همان هارمونیها، این عدد از 2.15:1 تا 8.90:1 نوسان دارد. پس یک اصلاح برای کل مجموعه OKLCH کافی است: روشنایی را به 0.52 برسانید تا متن سفید روی هر فامی با کرومای 0.127 از مرز 4.5:1 بگذرد، از 5.00:1 تا 5.91:1.
| متن | پسزمینه | نسبت WCAG | APCA Lc | نتیجه |
|---|---|---|---|---|
| #2a7fbf | #ab6708 | 1.05:1 | 0 | ناخوانا، روشنایی یکسان |
| #ffffff | #2a7fbf | 4.30:1 | -74.8 | برای متن اصلی به AA نمیرسد |
| #ffffff | #106ead | 5.45:1 | -82.0 | قبول، رنگ پایه با L 0.52 |
| #ffffff | #995600 | 5.70:1 | -83.3 | قبول، رنگ تأکیدی با L 0.52 |
| #ab6708 | #eff6fd | 4.12:1 | 64.9 | فقط برای متن درشت و آیکون |
| #5c2d00 | #d8eafb | 9.42:1 | 82.5 | جفت مکمل که به تیره و روشن تفکیک شده |
برای استفاده از دو رنگ هارمونی بهعنوان متن و پسزمینه، روشنایی آنها را از هم دور کنید: فامها را نگه دارید و یکی را به سمت 0.35 و دیگری را به سمت 0.93 ببرید. سپس جفت واقعی را در ابزار بررسی کنتراست امتحان کنید و اگر رنگ تأکیدی معنایی را منتقل میکند، پالت را از شبیهساز کوررنگی هم بگذرانید.
پرسش و پاسخ
انواع اصلی هارمونی رنگ کداماند؟
هارمونیهای رایج عبارتاند از مکمل (فامها با فاصله 180°)، مکمل منشعب (150° و 210°)، مشابه (30° به هر طرف)، سهگانه (سه فام با فاصله 120°)، چهارگانه یا مستطیلی (0°، 60°، 180°، 240°)، مربعی (چهار فام با فاصله 90°) و تکرنگ (یک فام در گامهای مختلف روشنایی).
رنگ مکمل قرمز چیست؟
به چرخه رنگ بستگی دارد. روی چرخه RYB نقاشان، مکمل قرمز سبز است. روی چرخه RGB که صفحهنمایشها و ابزارهای طراحی به کار میبرند فیروزهای است، یعنی #00ffff برای قرمز خالص، و در OKLCH با روشنایی برابر، یک سبزآبی مثل #009cb2.
چرا رنگهای مکمل من نامتعادل به نظر میرسند؟
بیشتر ابزارها فام را در HSL میچرخانند که روشناییاش با ادراک چشم جور نیست. مکمل HSL یک زرد طلایی مثل #f4b400 رنگ #0040f4 است، با روشنایی OKLCH برابر 0.489 در برابر 0.808 برای زرد. چرخاندن فام در OKLCH هر دو رنگ را به یک اندازه روشن نگه میدارد.
آیا میتوان از رنگهای مکمل برای متن و پسزمینه استفاده کرد؟
فقط اگر روشناییشان خیلی متفاوت باشد. رنگهای مکمل با روشنایی برابر، مثل #2a7fbf و #ab6708، نسبت کنتراست فقط 1.05:1 دارند. یکی را تیره و دیگری را روشن کنید، مثلاً #5c2d00 روی #d8eafb با نسبت 9.42:1.
قانون رنگ 60-30-10 چیست؟
قانون 60-30-10 طرح را به حدود 60% رنگ غالب، 30% رنگ ثانویه و 10% رنگ تأکیدی تقسیم میکند. در یک هارمونی، رنگ غالب معمولاً یک رنگ خنثی با تهمایهای از فام پایه است، رنگ ثانویه خود رنگ پایه و رنگ تأکیدی رنگ مکمل یا سهگانه.