جلسه ۱۱ – تعیین رنگ با استفاده از مقادیر پیش فرض و HEX

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

منظور از تعیین رنگ

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

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

مقادیر پیش فرض

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

به دستورات نسبت داده شده دقت کنید. ما با سه ویژگی color(رنگ فونت)، background-color(رنگ پس‌زمینه) و border-color(رنگ حاشیه) روبرو هستیم که به هرکدوم از اون ها، مقدار رنگ پیش فرض داده شده. نیاز نیست که چندان ذهن خودتون رو درگیر معنای ویژگی‌ها کنید چرا که در جلسات آینده هرکدوم رو به تنهایی بررسی می‌کنیم. در حال حاضر فقط به مقادیر white، blue و green دقت کنید.

مقادیر HEX

این روش، تنوع رنگ بسیار زیادی داره. در اکثر مواقع هم از این روش برای رنگ بخشیدن استفاده میشه.

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

طبق این روش، به هر رنگ، یک کد می‌تونیم اختصاص بدیم. کد هر رنگ، تلفیقی از رنگ های قرمز، سبز و آبی هست و به فرم کلی rrggbb# نشون داده میشه. بازه هر رنگ از 00 تا ff ادامه داره و روشنایی و تاریکی هر رنگ رو تنظیم می‌کنه.

حالا چرا از 00 تا ff؟

به نکته زیر توجه کنید و خوب اون رو به خاطر بسپارید:

” یک رنگ از 255 قسمت تشکیل شده، هرچی 255 کمتر شه رنگ تاریک‌تر و هرچی بیشتر شه رنگ روشن‌تر میشه”

این نکته، نقش بنیادی رو در طراحی بازی می‌کنه. در مقادیر HEX، عدد 255 تا 0 رو در مبنای 16 نشون میدن. به همین منظور به شکل 00 تا ff نمایش داده میشه.

پس ff روشن‌ترین حالت رنگ و 00، تاریک‌ترین یا “بی‌اثر‌ترین” حالت رنگ محسوب میشه.

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

مثال

برای مثال، رنگ قرمز رو به شکل زیر میشه نمایش داد:

همون‌طور که مشاهده می­‌کنید، در دو قسمت اول کد ( rr# ) ما مقدار ff که به معنای روشن‌ترین حالت هست رو قرار دادیم. مقادیر دیگر هم 00 قرار داده شده چون نیازی به سبز و آبی نداریم و باید بی‌اثر باشن.

حالا رنگ سبز رو بررسی کنیم:

در اینجا هم رنگ‌های آبی و قرمز توسط مقدار 00 خنثی شده و مقدار رنگ سبز (gg#) ff قرار داده شده که روشن‌ترین حالت رنگ سبز رو به ارمغان میاره.

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

برای استفاده از کد رنگ‌های بیشتر، می­‌تونید به مرجع‌های متفاوت از جمله w3schools مراجعه کنید. حتی اگه رنگ خاصی مد نظرتون هست می­‌تونید از نرم‌افزارهایی نظیر adobe photoshop یا adobe xd کمک بگیرید. چرا که این نرم‌افزار‌ها قادر به دادن کد رنگ دلخواه به شما هستن.

در پایین می‌­تونید چند مثال دیگه از کدهای مختلف رو مشاهده کنید:

نتیجه گیری

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

همچنین با کد رنگ های مبنای 16 یا HEX نیز آشنا شدیم و متوجه شدیم که چگونه تعریف می‌شوند و در چه مواردی از آن‌ ها استفاده می‌شود.

شما می‌توانید در رابطه با دیگر روش های تعیین رنگ در فصل چهارم یعنی فصل رنگ ها بیشتر بخوانید. تا مقاله بعدی و آشنایی با روش hsl و rgb مراقب خودتون باشید.

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

مدیر محتوا: علی اسمعیلی‌