این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

ساخت یک طرح رنگ

مروری اساسی بر چگونگی ایجاد یک طرح رنگی پویا و قابل تنظیم

Adam Argyle

در این پست می‌خواهم در مورد روش‌های مدیریت چندین طرح رنگی در CSS فکر کنم. نسخه آزمایشی را امتحان کنید .

اگر ویدیو را ترجیح می‌دهید، نسخه یوتیوب این پست در اینجا آمده است:

نمای کلی

ما یک سیستم رنگ قابل دسترس با ویژگی‌های سفارشی و calc() خواهیم ساخت تا صفحه وبی بسازیم که با تنظیمات کاربر سازگار باشد و در عین حال تجربه نوشتن را به حداقل برساند. ما با یک رنگ پایه برند شروع می‌کنیم و سیستمی از انواع آن را می‌سازیم: ۲ رنگ متن، ۴ رنگ سطح و یک سایه منطبق.

این راهنما با تعریف تمام رنگ‌ها برای هر طرح رنگی از ابتدا شروع می‌شود. تا انتها از آنها برای تغییر صفحه استفاده نمی‌شود.

برند

اغلب، رنگ برند از قبل تعیین شده و به صورت hex یا rgb ارائه می‌شود. این چالش رابط کاربری گرافیکی، رنگ برند پایه #0af را دارد. ابتدا، برای این سیستم رنگی، مقدار hex باید به hsl تبدیل شود.

* {
  --brand: #0af;
  --brand: hsl(200 100% 50%);
}

برای اینکه بتوانیم رنگ برند را مثلاً تا ۲۰٪ تیره‌تر یا روشن‌تر کنیم، باید هر سه کانال مقدار رنگ hsl را در ویژگی‌های سفارشی خودشان استخراج کنیم، مانند این:

* {
  --brand-hue: 200;
  --brand-saturation: 100%;
  --brand-lightness: 50%;
}

CSS می‌تواند روی آن ویژگی‌های رنگ محاسبات ریاضی انجام دهد، برای مثال calc(var(--brand-lightness) - 20%) برای کاهش مقدار روشنایی به میزان 20٪. این برای ساخت یک طرح رنگی اساسی است زیرا CSS می‌تواند با تنظیم مقادیر اشباع و روشنایی hsl، همه رنگ‌ها را در یک خانواده رنگی نگه دارد.

تم روشن

هر نوع رنگ با طرح تطبیقی خود مشخص می‌شود، در این حالت، هر کدام با -light ضمیمه می‌شوند.

پیش‌نمایش نتایج نهایی تم روشن

برند

با شروع از رنگ برند، آن را با قرار دادن ویژگی‌های سفارشی --brand-hue ، --brand-saturation و --brand-lightness درون پرانتز تابع hsl () و بدون هیچ محاسباتی بازسازی می‌کنیم:

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}

رنگ‌های متن

در مرحله بعد، ملزومات یک طرح رنگی به رنگ متن نیاز دارند. در یک تم روشن، متن باید بسیار تیره باشد. توجه کنید که میزان روشنایی رنگ‌های زیر کم است، کاملاً زیر ۵۰٪.

* {
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
}

--text1-light ، از آنجایی که با روشنایی ۱۰٪ بسیار تیره است، اشباع سنگین ۱۰۰٪ را حفظ می‌کند تا رنگ برند همچنان بتواند از میان سرمه‌ای تیره دیده شود.

--text2-light ، به اندازه رنگ اول تیره نیست، که خوب است چون یک رنگ ثانویه است، و همچنین اشباع کمتری دارد.

رنگ‌های سطحی

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

* {
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
}

۴ رنگ سطحی ایجاد شدند زیرا رنگ‌های تزئینی برای لحظات تعاملی مانند :focus یا :hover یا ایجاد ظاهر لایه‌های کاغذ به انواع بیشتری نیاز دارند. در این سناریوها، انتقال --surface2-light در حالت شناور به --surface3-light خوب است، بنابراین شناور شدن منجر به افزایش کنتراست می‌شود (۹۹٪ روشنایی به ۹۲٪ روشنایی؛ و آن را تیره‌تر می‌کند).

سایه‌ها

سایه‌ها در یک طرح رنگی، فراتر از حد انتظار هستند، اما به جلوه جلوه‌ای طبیعی می‌بخشند و به آن کمک می‌کنند تا از سایه‌های غیرواقعی مبتنی بر سیاه متمایز شود. برای انجام این کار، رنگ سایه از ویژگی سفارشی hue استفاده می‌کند، کمی با hue اشباع می‌شود اما همچنان بسیار تیره است. اساساً یک سایه بسیار تیره و کمی آبی ایجاد می‌شود.

* {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

--surface-shadow-light در تابع hsl قرار نمی‌گیرد. دلیل این امر این است که مقدار --shadow-strength برای ایجاد مقداری شفافیت ترکیب می‌شود و CSS برای انجام محاسبات به این قطعات نیاز دارد. برای کسب اطلاعات بیشتر به بخش rad shadow بروید.

رنگ‌های روشن همه با هم

نیازی نیست برای پیدا کردن نحوه ساخت هر یک از رنگ‌های روشن، جستجو کنید، همه آنها در یک جا در CSS هستند.

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
  --surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
  --shadow-strength-light: .02;
}

اسکرین شات از رنگ‌های روشن در کنار هم — سندباکس در CodePen

تم تاریک

بیشتر برندها با یک تم تیره شروع نمی‌کنند، این تم نوعی از تم اصلی و معمولاً روشن‌تر آنهاست. از سوی دیگر، کاربران اغلب برای زمینه‌های مختلف، مانند شب، تم تیره را انتخاب می‌کنند. این عوامل باعث شده است که من دو نکته را در مورد تم‌های تیره در نظر داشته باشم:

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

پیش‌نمایش نتیجه نهایی تم تاریک

برند

تم روشن از مقادیر کانال‌های رنگی ۳ برند hsl بدون تغییر استفاده کرد، تم تیره این کار را نمی‌کند. اشباع رنگ به نصف کاهش یافته و روشنایی به طور نسبی ۵۰٪ کاهش یافته است.

* {
  --brand-dark: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 2)
    calc(var(--brand-lightness) / 1.5)
  );
}

رنگ‌های متن

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

* {
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
}

رنگ‌های سطحی

در یک تم تیره، رنگ‌های سطوح باید تیره باشند. رنگ‌های زیر روشنایی و اشباع کمی دارند و سطح اول با ۱۰٪ تیره‌ترین است.

* {
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
}

سایه‌ها

در یک تم تاریک، دیدن سایه‌ها می‌تواند بسیار دشوار باشد. این منطقی است زیرا تیره کردن چیزی که از قبل نسبتاً تاریک است، دشوار است. اینجاست که --shadow-strength-dark بسیار مفید واقع می‌شود زیرا به ما امکان می‌دهد سایه‌ها را با تغییر یک متغیر تیره‌تر کنیم.

* {
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}

همچنین، به میزان اشباع رنگ در آن سایه نگاه کنید. آیا می‌توانید وقتی به رابط کاربری نگاه می‌کنید، متوجه رنگ آن شوید؟ سعی کنید اشباع رنگ را از devtools حذف کنید، کدام را ترجیح می‌دهید؟!

رنگ‌های تیره همه با هم

* {
  --brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}

اسکرین شات از رنگ‌های تیره در کنار هم — سندباکس در CodePen

تم کم‌نور

این طرح رنگی تماماً در مورد هماهنگ کردن روشنایی و اشباع است. باید اشباع کافی وجود داشته باشد تا هنوز یک رنگ قابل مشاهده باشد، اما همچنین باید به سختی از امتیاز کنتراست عبور کند زیرا در هر صورت قرار است کم نور و کم کنتراست باشد.

پیش‌نمایش نتایج نهایی از تم کم‌نور

برند

* {
  --brand-dim: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 1.25)
    calc(var(--brand-lightness) / 1.25)
  );
}

رنگ‌های متن

* {
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
}

رنگ‌های سطحی

* {
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
}

سایه‌ها

* {
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}

رنگ‌های مات همه با هم

* {
  --brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}

تصویر از رنگ‌های کم‌رنگ در کنار هم — سندباکس در CodePen

رنگ‌های قابل دسترس

توجه کنید که کمترین میزان روشنایی در مجموعه رنگ متن تیره ۶۵٪ و بیشترین میزان روشنایی در سطوح تیره ۲۵٪ است. این یعنی ۴۰٪ فضای تنفس روشنایی بین آنها. در تم روشن، ۵۵٪ فضای تنفس در تم روشن وجود دارد. حفظ اختلاف روشنایی بین رنگ متن و سطح در حدود ۴۰-۵۰٪ می‌تواند به بالا نگه داشتن نسبت کنتراست رنگ کمک کند، ضمن اینکه در صورت ضعیف بودن امتیازها، اهرمی ظریف برای تنظیم است.

من آن را «bump bump til ya pass» می‌نامم، که تعامل افزایش تدریجی مقدار روشنایی تا زمانی است که ابزاری نشان دهد که من در حال عبور هستم.

کلید Shift + فلش رو به پایین برای کاهش روشنایی و افزایش کنتراست تا زمان عبور فشار داده می‌شود.

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

.surface1 {
  background-color: var(--surface1);
  color: var(--text2);
}

.surface2 {
  background-color: var(--surface2);
  color: var(--text2);
}

.surface3 {
  background-color: var(--surface3);
  color: var(--text1);
}

.surface4 {
  background-color: var(--surface4);
  color: var(--text1);
}

تصویر صفحه نمایش از جفت شدن سطح تاریک و متن — تصویری از جفت شدن سطح تیره و متن با VisBug

راد سایه

این قالب‌ها از یک کلاس کاربردی به نام .rad-shadow استفاده می‌کنند. این سایه با استفاده از ابزار Smooth Shadow ایجاد شده است که من بسیار از آن قدردانی می‌کنم. من قطعه کد تولید شده توسط آن را گرفتم و آن را با رنگ‌ها و محاسبات شفافیت خودم سفارشی کردم. دلیل این کار ایجاد سایه‌ای بود که بتوانم آن را در هر طرح رنگی تنظیم کنم.

هر سایه در کنار هم

برای انجام این کار، من برای هر طرح رنگی دو متغیر برای تنظیم ایجاد کردم، یک رنگ سایه و یک قدرت سایه. رنگ برای تنظیم اشباع و تیرگی است، در حالی که قدرت برای راهی آسان برای افزایش شدت سایه در طرح رنگی تیره است. نتیجه نهایی چیزی شبیه به این بود.

:root {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

.rad-shadow {
  box-shadow:
    0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
    0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
  ;
}

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

استفاده از طرح‌های رنگی

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

برای دستیابی به این هدف، استفاده از طرح رنگ باید منحصراً از طریق ویژگی‌های سفارشی عمومی انجام شود که در ادامه آنها را تعریف خواهیم کرد. به این ترتیب، افرادی که از متغیرهای طراحی استفاده می‌کنند، هرگز نیازی به نگرانی در مورد اینکه کدام طرح رنگ در حال حاضر تنظیم شده است، ندارند، فقط باید از رنگ‌های سطح و متن استفاده کنند. به جای color: var(--text1-light) color: var(--text1) استفاده کنید. تمام تطبیق و چرخش رنگ‌ها در سطح بسیار بالاتری در CSS انجام می‌شود.

با بررسی بیشتر، استایل‌های اتصال تم روشن در بلوک کد زیر، یک ویژگی سفارشی عمومی را به رنگ خاص تم روشن متصل می‌کنند. اکنون همه موارد استفاده از var(--brand) از رنگ برند روشن استفاده خواهند کرد.

تم روشن (خودکار)

:root {
  color-scheme: light;
  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

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

تم تاریک (خودکار)

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
  }
}

تم روشن

[color-scheme="light"] {
  color-scheme: light;

  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

تم تاریک

[color-scheme="dark"] {
  color-scheme: dark;

  --brand: var(--brand-dark);
  --text1: var(--text1-dark);
  --text2: var(--text2-dark);
  --surface1: var(--surface1-dark);
  --surface2: var(--surface2-dark);
  --surface3: var(--surface3-dark);
  --surface4: var(--surface4-dark);
  --surface-shadow: var(--surface-shadow-dark);
  --shadow-strength: var(--shadow-strength-dark);
}

تم کم‌نور

[color-scheme="dim"] {
  color-scheme: dark;

  --brand: var(--brand-dim);
  --text1: var(--text1-dim);
  --text2: var(--text2-dim);
  --surface1: var(--surface1-dim);
  --surface2: var(--surface2-dim);
  --surface3: var(--surface3-dim);
  --surface4: var(--surface4-dim);
  --surface-shadow: var(--surface-shadow-dim);
  --shadow-strength: var(--shadow-strength-dim);
}

در این مرحله، نویسندگان می‌توانند در صورت نیاز از طرح‌های رنگی عمومی ارائه شده استفاده کنند و دیگر هرگز نباید نگران قالب‌ها باشند.

نتیجه‌گیری

حالا که فهمیدی چطور این کار رو کردم، تو چطور انجامش میدی؟! 🙂

بیایید رویکردهایمان را متنوع کنیم و تمام روش‌های ساخت در وب را یاد بگیریم. یک Codepen ایجاد کنید یا نسخه آزمایشی خودتان را میزبانی کنید، آن را برای من توییت کنید و من آن را به بخش ریمیکس‌های انجمن در زیر اضافه خواهم کرد.

منبع

ریمیکس‌های انجمن - @chris-kruining یک اسلایدر رنگ، رنگ‌های وضعیت و حالت‌های کنتراست برای no-preference ، more and less اضافه کرد: demo .

ساخت یک طرح رنگ با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

نمای کلی

برند

تم روشن

برند

رنگ‌های متن

رنگ‌های سطحی

سایه‌ها

رنگ‌های روشن همه با هم

تم تاریک

برند

رنگ‌های متن

رنگ‌های سطحی

سایه‌ها

رنگ‌های تیره همه با هم

تم کم‌نور

برند

رنگ‌های متن

رنگ‌های سطحی

سایه‌ها

رنگ‌های مات همه با هم

رنگ‌های قابل دسترس

راد سایه

استفاده از طرح‌های رنگی

تم روشن (خودکار)

تم تاریک (خودکار)

تم روشن

تم تاریک

تم کم‌نور

نتیجه‌گیری

منبع

ساخت یک طرح رنگ