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

تعیین رنگ به روش Hex
تعیین رنگ به روش 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، هر رنگ ترکیبی از قرمز، سبز و آبی هست. به این ترتیب هرکدوم از این رنگ‌ها بازه‌ی مربوط به خودشون رو دارن.

مثال

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

کد رنگ قرمز – با کد #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 مراقب خودتون باشید.

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

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

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

5 نظر

5 پاسخ

  1. عالی بود مرسییی
    فقط اینکه این سبز یواش نیست سبز فسفریهه D:

    1. خواهش میکنیم. دیدگاه ها متفاوته. ازین به بعد در نام گذاری دقت بیشتری میکنیم :))

  2. سلام از سایت محشرتون سپاس گزارم همه چی توپه . ببخشید الان یعنی با روش هگز 11^6 رنگ داریم؟
    11.11.11.11.11.11
    چون هر باکس ۱۱حات داره

      1. سلام حسین دقیقا، تو از روش تبدیل Hexadecimal توی زبان های برنامه نویسی استفاده کردی که دقیقا درسته و میشه ۲ به توان ۲۴.

        حالا یک منطقی دیگه‌ای وجود داره که از RGB و ARGB گرفته شده.

        توی این منطق میگه که RGB تشکیل شده از ۲۵۶ حالت RED یا قرمز، ۲۵۶ حالت Green یا سبز و ۲۵۶ حالت Blue یا آبی.

        و تمامی مرورگر ها قابلیت نمایش این تعداد یعنی ۲۵۶ به توان ۳ رو دارند.

        256^3 = 16,777,216

        و به طور کلی کد های هگزا دسیمال اینطورین : #RRGGBB

        حالا بحث اصلیمون واسه مرورگر های پیشرفته اگر باشه یه Alpha هم به RGB اضافه میشه که RGBA رو میسازه، یعنی ۲۵۶ به توان ۴ که میشه :

        256^4 = 4,294,967,296

        و کلا داستان هگزا دسیمالمون هم میشه :

        #AARRGGBB

        ممنون از تعاملت.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

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

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=