تعیین رنگ با استفاده از مقادیر پیش فرض و 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، هر رنگ ترکیبی از قرمز، سبز و آبی هست. به این ترتیب هرکدوم از این رنگها بازهی مربوط به خودشون رو دارند.
مثال
برای مثال، رنگ قرمز رو به شکل زیر میشه نمایش داد:
background-color: #ff0000
کد رنگ قرمز – با کد #ff0000
همونطور که مشاهده میکنید، در دو قسمت اول کد ( rr# ) ما مقدار ff که به معنای روشنترین حالت هست رو قرار دادیم. مقادیر دیگر هم 00 قرار داده شده چون نیازی به سبز و آبی نداریم و باید بیاثر باشند.
حالا رنگ سبز رو بررسی میکنیم:
background-color: #00ff00
کد رنگ سبز یواش xD (سبز روشن) – با کد #00ff00
در اینجا هم رنگهای آبی و قرمز توسط مقدار 00 خنثی شده و مقدار رنگ سبز (gg#) ff قرار داده شده که روشنترین حالت رنگ سبز رو به ارمغان میآورد.
ناگفته نمونه که شما نیازی به حفظ کردن تعداد زیادی کد رنگ ندارید و در حد دونستن این مسئله، که چرا فلان کد رنگ قرمز رو بهم نشون میده، بیشتر نیاز ندارید.
برای استفاده از کد رنگهای بیشتر، میتونید به مرجعهای متفاوت از جمله w3schools مراجعه کنید. حتی اگه رنگ خاصی مد نظرتون هست میتونید از نرمافزارهایی نظیر adobe photoshop یا adobe xd کمک بگیرید. چرا که این نرمافزارها قادر به دادن کد رنگ دلخواه به شما هستند.
شما حتی میتوانید در material ui از زنگهای زیبایی استفاده کنید.
در پایین میتونید چند مثال دیگه از کدهای مختلف رو مشاهده کنید:
background-color: #6b6b6f
کد رنگ خاکستری HEX – با کد #6b6b6f
background-color: #8c80bc
کد رنگ یاسی HEX – با کد #8c80bc
background-color: #ffffff
کد رنگ سفید HEX – با کد #ffffff
background-color: #3b7f2f
کد رنگ سبز تیره HEX – با کد #3b7f2f
دیدگاهتان را بنویسید