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

مثال

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

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

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

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

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

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

شما حتی می‌توانید در material ui از زنگ‌های زیبایی استفاده کنید.

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