رنگ

وضعیت: در حال بازبینی

رنگ‌های هارمونیک از پالت IBM Design Language می‌آیند. فیروزه‌ای (Cyan) رنگ اصلی و رنگ برند است، آبی (Blue) رنگ تاکید و خاکستری سرد (Cool Gray) رنگ خنثی. قرمز، سبزآبی (Teal، به جای سبز)، زرد و بنفش فقط برای وضعیت، نمودار و امضای SOS به کار می‌روند و هرگز برای تزیین.

نسبت‌ها

در یک مجموعه (ارایه، سایت یا سند) نسبت تقریبی رنگ‌ها این است:

رنگ	سهم
سفید و Cool Gray	حدود ۶۰٪
سرمه‌ای (Cyan 90 تا 100)	حدود ۲۵٪
فیروزه‌ای برند	حدود ۱۰٪
آبی تاکید	حدود ۵٪

نقش‌های معنایی

هر نقش برای حالت روشن و تیره مقدار جداگانه دارد. نوار بالای هر نمونه حالت روشن و نوار پایین حالت تیره است.

سطح‌ها

`surface`

پس‌زمینهٔ پیش‌فرض صفحه. در حالت تیره Cyan 100، سرمه‌ای عمیق برند.

روشن: white · #FFFFFF
تیره: cyan-100 · #061727

var(--hq-surface)

`surface-alt`

پس‌زمینهٔ جایگزین برای بخش‌ها و پنل‌ها (Cool Gray 10). در حالت تیره Cyan 90.

روشن: gray-10 · #F2F4F8
تیره: cyan-90 · #012749

var(--hq-surface-alt)

`surface-raised`

کارت‌ها و کاشی‌ها. در حالت روشن، کارت سفید با خط مرزی روی surface-alt.

روشن: white · #FFFFFF
تیره: cyan-90 · #012749

var(--hq-surface-raised)

`surface-inverse`

بلوک معکوس: پنل سرمه‌ای روی صفحهٔ روشن، مثل جمع‌بندی یا کارت برگزیده.

روشن: cyan-100 · #061727
تیره: white · #FFFFFF

var(--hq-surface-inverse)

`field`

زمینهٔ فیلدهای فرم.

روشن: white · #FFFFFF
تیره: cyan-90 · #012749

var(--hq-field)

متن

`ink`

تیترها، عنوان‌ها، عددهای کلیدی و برچسب‌های مهم.

روشن: cyan-90 · #012749
تیره: white · #FFFFFF
کنتراست روی سفید: ۱۵٫۱:۱

var(--hq-ink)

`text`

متن اصلی روی همهٔ سطح‌ها.

روشن: gray-80 · #343A3F
تیره: gray-20 · #DDE1E6
کنتراست روی سفید: ۱۱٫۵:۱

var(--hq-text)

`text-secondary`

زیرعنوان، توضیح و متن با اهمیت کمتر.

روشن: gray-60 · #697077
تیره: gray-30 · #C1C7CD
کنتراست روی سفید: ۵:۱

var(--hq-text-secondary)

`text-muted`

فقط زیرنویس، منبع و پانویس. در حالت روشن کنتراست ۳٫۴:۱ دارد و برای متن ضروری مناسب نیست.

روشن: gray-50 · #878D96
تیره: gray-40 · #A2A9B0
کنتراست روی سفید: ۳٫۳:۱

var(--hq-text-muted)

`text-on-inverse`

متن روی surface-inverse.

روشن: white · #FFFFFF
تیره: cyan-100 · #061727

var(--hq-text-on-inverse)

مرز

`border`

خط‌های مویی، دور کارت و خط‌های جدول.

روشن: gray-20 · #DDE1E6
تیره: cyan-80 · #003A6D

var(--hq-border)

`border-strong`

خط زیر سرستون جدول و جداکننده‌هایی که وزن بیشتری لازم دارند.

روشن: gray-30 · #C1C7CD
تیره: cyan-70 · #00539A

var(--hq-border-strong)

`border-control`

خط دور کنترل‌های فرم (فیلد، چک‌باکس، رادیو). دست‌کم ۳:۱ با زمینه، طبق WCAG برای اجزای رابط.

روشن: gray-50 · #878D96
تیره: gray-50 · #878D96

var(--hq-border-control)

برند

`brand`

فیروزه‌ای امضای هارمونیک: Q لوگو، موج و عددها روی زمینهٔ تیره. روی سفید فقط پرکننده یا متن ۲۴ پیکسل و بزرگ‌تر.

روشن: cyan-40 · #33B1FF
تیره: cyan-40 · #33B1FF

var(--hq-brand)

`brand-deep`

رنگ لوگو و شروع گرادیان تیرهٔ برند. هرگز تغییر نمی‌کند.

روشن: cyan-100 · #061727
تیره: cyan-100 · #061727

var(--hq-brand-deep)

تعامل و تاکید

accent تنها تاکید هر صفحه است: لینک، سری برجسته در نمودار، مرحلهٔ جاری یا یک واژهٔ کلیدی.

`accent`

تنها تاکید در هر صفحه: لینک، سری برجسته، مرحلهٔ جاری یا واژهٔ کلیدی.

روشن: blue-60 · #0F62FE
تیره: blue-40 · #78A9FF

var(--hq-accent)

`accent-subtle`

پس‌زمینهٔ کارت برجسته، مرحلهٔ جاری یا ردیف انتخاب‌شده.

روشن: blue-10 · #EDF5FF
تیره: blue-90 · #001D6C

var(--hq-accent-subtle)

`on-accent`

متن روی پرکنندهٔ accent.

روشن: white · #FFFFFF
تیره: cyan-100 · #061727

var(--hq-on-accent)

`focus`

حلقهٔ فوکوس: ۲ پیکسل توپر با فاصلهٔ ۲ پیکسل.

روشن: blue-60 · #0F62FE
تیره: cyan-40 · #33B1FF

var(--hq-focus)

`accent-hover`

رنگ accent هنگام قرار گرفتن نشانگر روی دکمه یا لینک.

روشن: blue-70 · #0043CE
تیره: blue-30 · #A6C8FF

var(--hq-accent-hover)

`accent-active`

رنگ accent هنگام فشردن.

روشن: blue-80 · #002D9C
تیره: blue-20 · #D0E2FF

var(--hq-accent-active)

`disabled`

پرکنندهٔ کنترل غیرفعال.

روشن: gray-20 · #DDE1E6
تیره: cyan-80 · #003A6D

var(--hq-disabled)

`on-disabled`

متن کنترل غیرفعال. کنتراست کم عمدی است؛ کنترل غیرفعال قابل استفاده نیست.

روشن: gray-50 · #878D96
تیره: gray-40 · #A2A9B0

var(--hq-on-disabled)

وضعیت

وضعیت هرگز فقط با رنگ نشان داده نمی‌شود؛ همیشه یک واژه یا آیکن همراهش است.

`positive`

وضعیت مثبت و نشان «انجام بده». سبزآبی به جای سبز. همیشه همراه واژه یا آیکن.

روشن: teal-70 · #005D5D
تیره: teal-40 · #08BDBA

var(--hq-positive)

`positive-subtle`

پس‌زمینهٔ برچسب‌ها و فراخوان‌های مثبت.

روشن: teal-10 · #D9FBFB
تیره: teal-90 · #022B30

var(--hq-positive-subtle)

`warning`

نشان‌ها و پرکننده‌های هشدار. هرگز رنگ متن روی سفید نیست (۱٫۷:۱)؛ روی آن از ink استفاده کنید.

روشن: yellow-30 · #F1C21B
تیره: yellow-30 · #F1C21B

var(--hq-warning)

`warning-subtle`

پس‌زمینهٔ اعلان‌ها و فراخوان‌های هشدار.

روشن: yellow-10 · #FCF4D6
تیره: yellow-90 · #302400

var(--hq-warning-subtle)

`negative`

وضعیت منفی، نشان «انجام نده» و فراخوان‌های ریسک. همیشه همراه واژه یا آیکن.

روشن: red-60 · #DA1E28
تیره: red-40 · #FF8389

var(--hq-negative)

`negative-hover`

رنگ negative هنگام قرار گرفتن نشانگر روی دکمهٔ خطرناک.

روشن: red-70 · #A2191F
تیره: red-30 · #FFB3B8

var(--hq-negative-hover)

`on-negative`

متن روی پرکنندهٔ negative.

روشن: white · #FFFFFF
تیره: cyan-100 · #061727

var(--hq-on-negative)

`negative-subtle`

پس‌زمینهٔ برچسب‌ها و فراخوان‌های منفی.

روشن: red-10 · #FFF1F1
تیره: red-90 · #520408

var(--hq-negative-subtle)

`info`

وضعیت اطلاع‌رسانی.

روشن: blue-60 · #0F62FE
تیره: blue-40 · #78A9FF

var(--hq-info)

`info-subtle`

پس‌زمینهٔ اعلان‌های اطلاع‌رسانی.

روشن: blue-10 · #EDF5FF
تیره: blue-90 · #001D6C

var(--hq-info-subtle)

`neutral-status`

نشان وضعیت خنثی یا بدون تغییر.

روشن: gray-50 · #878D96
تیره: gray-40 · #A2A9B0

var(--hq-neutral-status)

نمودار

ترتیب سری‌های دسته‌ای ثابت است و جابه‌جا نمی‌شود. از سری ششم به بعد، همه در «سایر» با chart-other ادغام می‌شوند. جزییات در مصورسازی داده.

`chart-1`

سری ۱ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت.

روشن: cyan-50 · #1192E8
تیره: cyan-50 · #1192E8

var(--hq-chart-1)

`chart-2`

سری ۲ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت.

روشن: yellow-60 · #8E6A00
تیره: yellow-60 · #8E6A00

var(--hq-chart-2)

`chart-3`

سری ۳ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت.

روشن: blue-60 · #0F62FE
تیره: blue-60 · #0F62FE

var(--hq-chart-3)

`chart-4`

سری ۴ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت.

روشن: teal-50 · #009D9A
تیره: teal-50 · #009D9A

var(--hq-chart-4)

`chart-5`

سری ۵ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت.

روشن: purple-60 · #8A3FFC
تیره: purple-60 · #8A3FFC

var(--hq-chart-5)

`chart-other`

سری «سایر»، داده‌های کم‌اهمیت و زمینه.

روشن: gray-30 · #C1C7CD
تیره: gray-30 · #C1C7CD

var(--hq-chart-other)

`chart-seq-1`

گام ۱ از ۶ در طیف ترتیبی (Cyan 40 تا 90).

روشن: cyan-40 · #33B1FF
تیره: cyan-40 · #33B1FF

var(--hq-chart-seq-1)

`chart-seq-2`

گام ۲ از ۶ در طیف ترتیبی (Cyan 40 تا 90).

روشن: cyan-50 · #1192E8
تیره: cyan-50 · #1192E8

var(--hq-chart-seq-2)

`chart-seq-3`

گام ۳ از ۶ در طیف ترتیبی (Cyan 40 تا 90).

روشن: cyan-60 · #0072C3
تیره: cyan-60 · #0072C3

var(--hq-chart-seq-3)

`chart-seq-4`

گام ۴ از ۶ در طیف ترتیبی (Cyan 40 تا 90).

روشن: cyan-70 · #00539A
تیره: cyan-70 · #00539A

var(--hq-chart-seq-4)

`chart-seq-5`

گام ۵ از ۶ در طیف ترتیبی (Cyan 40 تا 90).

روشن: cyan-80 · #003A6D
تیره: cyan-80 · #003A6D

var(--hq-chart-seq-5)

`chart-seq-6`

گام ۶ از ۶ در طیف ترتیبی (Cyan 40 تا 90).

روشن: cyan-90 · #012749
تیره: cyan-90 · #012749

var(--hq-chart-seq-6)

محصول

`sos-field`

زمینهٔ امضای SOS، فقط در صفحه‌های تمام‌عرض محصول.

روشن: red-60 · #DA1E28
تیره: red-60 · #DA1E28

var(--hq-sos-field)

`sos-ink`

متن روی sos-field (۵:۱).

روشن: white · #FFFFFF
تیره: white · #FFFFFF

var(--hq-sos-ink)

`scalelab-field`

زمینهٔ امضای ScaleLab، فقط در صفحه‌های تمام‌عرض محصول.

روشن: cyan-40 · #33B1FF
تیره: cyan-40 · #33B1FF

var(--hq-scalelab-field)

`scalelab-ink`

متن روی scalelab-field (۷٫۷:۱). متن سفید روی Cyan 40 مردود است (۲٫۴:۱).

روشن: cyan-100 · #061727
تیره: cyan-100 · #061727

var(--hq-scalelab-ink)

پالت پایه

عدد پایین هر خانه، کنتراست آن رنگ با سفید است.

Cyan، رنگ اصلی

10#E5F6FF۱٫۱:۱
20#BAE6FF۱٫۳:۱
30#82CFFF۱٫۷:۱
40#33B1FF۲٫۴:۱
50#1192E8۳٫۳:۱
60#0072C3۵:۱
70#00539A۷٫۸:۱
80#003A6D۱۱٫۵:۱
90#012749۱۵٫۱:۱
100#061727۱۸٫۱:۱

Blue، رنگ تاکید

10#EDF5FF۱٫۱:۱
20#D0E2FF۱٫۳:۱
30#A6C8FF۱٫۷:۱
40#78A9FF۲٫۴:۱
50#4589FF۳٫۳:۱
60#0F62FE۵:۱
70#0043CE۷٫۸:۱
80#002D9C۱۱٫۳:۱
90#001D6C۱۵٫۱:۱
100#001141۱۸٫۲:۱

Cool Gray، رنگ خنثی

10#F2F4F8۱٫۱:۱
20#DDE1E6۱٫۳:۱
30#C1C7CD۱٫۷:۱
40#A2A9B0۲٫۴:۱
50#878D96۳٫۳:۱
60#697077۵:۱
70#4D5358۷٫۸:۱
80#343A3F۱۱٫۵:۱
90#21272A۱۵٫۱:۱
100#121619۱۸٫۲:۱

Teal، کاربرد محدود

10#D9FBFB۱٫۱:۱
20#9EF0F0۱٫۳:۱
30#3DDBD9۱٫۷:۱
40#08BDBA۲٫۳:۱
50#009D9A۳٫۳:۱
60#007D79۵:۱
70#005D5D۷٫۷:۱
80#004144۱۱٫۴:۱
90#022B30۱۵٫۱:۱
100#081A1C۱۷٫۹:۱

Red، کاربرد محدود

10#FFF1F1۱٫۱:۱
20#FFD7D9۱٫۳:۱
30#FFB3B8۱٫۷:۱
40#FF8389۲٫۴:۱
50#FA4D56۳٫۴:۱
60#DA1E28۵:۱
70#A2191F۷٫۸:۱
80#750E13۱۱٫۵:۱
90#520408۱۵٫۲:۱
100#2D0709۱۸٫۳:۱

Yellow، کاربرد محدود

10#FCF4D6۱٫۱:۱
20#FDDC69۱٫۳:۱
30#F1C21B۱٫۷:۱
40#D2A106۲٫۴:۱
50#B28600۳٫۳:۱
60#8E6A00۵:۱
70#684E00۷٫۸:۱
80#483700۱۱٫۵:۱
90#302400۱۵٫۲:۱
100#1C1500۱۸٫۲:۱

Purple، کاربرد محدود

10#F6F2FF۱٫۱:۱
20#E8DAFF۱٫۳:۱
30#D4BBFF۱٫۷:۱
40#BE95FF۲٫۴:۱
50#A56EFF۳٫۳:۱
60#8A3FFC۵:۱
70#6929C4۷٫۷:۱
80#491D8B۱۱٫۵:۱
90#31135E۱۵٫۲:۱
100#1C0F30۱۸٫۱:۱

دسترس‌پذیری

این ترکیب‌ها در هر دو حالت دست‌کم کنتراست ۴٫۵:۱ دارند:

ink، text و text-secondary روی surface، surface-alt و surface-raised
accent، positive و negative به‌عنوان متن روی surface
on-accent روی accent، sos-ink روی sos-field و scalelab-ink روی scalelab-field

استثناهای شناخته‌شده:

text-muted در حالت روشن (۳٫۴:۱) فقط برای زیرنویس‌های غیرضروری است.
brand روی سفید (۲٫۴:۱) هرگز برای متن کوچک به کار نمی‌رود.
warning فقط پرکننده است، نه رنگ متن.