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

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

آدام آرگیل

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

اگر ویدیو را ترجیح می دهید، در اینجا یک نسخه YouTube از این پست وجود دارد:

بررسی اجمالی

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

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

نام تجاری

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

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

برای فعال کردن مفهوم تیره یا روشن کردن رنگ برند، مثلاً 20٪، 3 کانال از مقدار رنگ 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));
}

رنگ های متن

در مرحله بعد، ملزومات یک طرح رنگی به رنگ های متن نیاز دارند. در یک موضوع روشن، متن باید بسیار تیره باشد. توجه کنید که چگونه روشنایی رنگ های زیر کم است، بسیار کمتر از 50%.

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

--text1-light ، از آنجایی که با روشنایی 10 درصد بسیار تاریک است، اشباع 100 درصدی سنگین را حفظ می کند، بنابراین رنگ مارک همچنان می تواند به رنگ تیره تیره چشمک بزند.

--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%);
}

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

سایه ها

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

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

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

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

برای یافتن چگونگی ساخت هر یک از رنگ های روشن نیازی به جستجو نیست، همه آنها در یک مکان در 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;
}

تم تاریک

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

1. کاربران به طور کلی در هنگام استفاده از این تم در تاریکی خواهند بود، بنابراین در تاریکی تست کنید.
2. رنگ ها باید غیراشباع شوند تا به دلیل شدت بیش از حد روی صفحه لرزش نداشته باشند.

نام تجاری

تم روشن از 3 ارزش کانال رنگی hsl با نام تجاری بدون تغییر استفاده می‌کند، در تم تیره نه. اشباع به نصف کاهش می یابد و سبکی نسبی 50٪ کاهش می یابد.

* {
  --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%);
}

رنگ های سطحی

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

* {
  --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;
}

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

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

* {
  --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;
}

تم کم رنگ

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

نام تجاری

* {
  --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;
}

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

توجه کنید که چگونه کمترین روشنایی در مجموعه رنگ متن تیره 65 درصد و بیشترین روشنایی در سطوح تیره 25 درصد است. این 40٪ از فضای تنفس سبک بین آنها است. در طرح زمینه روشن، 55 درصد اتاق تنفس در تم روشن وجود دارد. حفظ تفاوت روشنایی بین رنگ‌های متن و سطح در حدود 40 تا 50 درصد می‌تواند به بالا نگه داشتن نسبت کنتراست رنگ کمک کند، در حالی که یک اهرم ظریف برای تنظیم در موارد ضعیف بودن امتیازها است.

من آن را "bump bump til ya pass" می نامم، که برهمکنش برهم زدن مقدار سبکی است تا زمانی که ابزاری نشان دهد I'm passing.

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

.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);
}

راد سایه

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

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

: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 ایجاد کنید یا نسخه نمایشی خود را میزبانی کنید، با آن برای من توییت کنید، و من آن را به بخش ریمیکس های انجمن در زیر اضافه می کنم.

منبع

• منبع چالش های رابط کاربری گرافیکی در GitHub
• طرح رنگ کدپن استارت

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