آموزش CSSآموزش طراحی سایت

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

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

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

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

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

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

رنگ‌های پیش‌فرض، چیزی جز معادل انگلیسی رنگ‌هایی مثل آبی، زرد و سبز نیستن! به طور معمول، اولین رنگ‌هایی که در 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، هر رنگ ترکیبی از قرمز، سبز و آبی هست. به این ترتیب هرکدوم از این رنگ‌ها بازه‌ی مربوط به خودشون رو دارن.

مثال

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

کد رنگ قرمز – با کد #ff0000

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

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

کد رنگ سبز یواش xD (سبز روشن) – با کد #00ff00

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

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

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

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

کد رنگ خاکستری HEX – با کد #6b6b6f
کد رنگ یاسی HEX – با کد #8c80bc
کد رنگ سفید HEX – با کد #ffffff
کد رنگ سبز تیره HEX – با کد #3b7f2f

 

نتیجه گیری

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

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

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

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

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

 

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر