انتخاب رنگ مناسب در طراحی یک وب سایت و هر اثر هنری دیگر از جهت‌های بسیار زیادی حائز اهمیت است و در زیبای آن بسیار موثر است. انتخاب رنگ‌های نامناسب برای طراحی می‌تواند حتی بر روی سئو سایت شما نیز اثر منفی بگذارد. 

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

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

رنگ در طراحی و بخصوص در طراحی وب سایت با کدها و عددهای مخصوص نمایش داده می‌شوند و در واقع هر رنگ دارای یک کد منحصر به فرد خود است.

کد رنگ ها به سه روش RGB.  Hex.  hsl نمایش داده می شوند که دو روش RGB و  HEX بسیار کاربردی تر از روش های دیگر هستند. 

نمایش رنگ ها بصورت RGB

روش RGB رنگ ها را با ترکیب سه رنگ Red قرمز Green  سبز blue آبی بیان می کند و در واقع بیانگر این موضوع است که رنگ های طبیعت از این سه رنگ اصلی تشکيل شده اند. 

برنمایش عدد بصورت RGb از سه عدد کنارهم که با علامت کاما جدا شده اند استفاده می کنیم. هر کدام از این عدد ها می توانند بازه ای بین کمترین مقدار صفر و بیشترین مقدار ۲۵۵ را به خود بگیرند. 

برای مثال کد رنگ سفید برابر   سه عدد ۲۵۵ هست که به شکل زیر نمایش داده می شود RGB(255, 255, 255) رنگ سفید در واقع بیشترین مقدار را از سه رنگ اصلی دارد و بر خلاف رنگ مشکی که سه عدد صفر می باشد. 

روش نمایش رنگ بصورت هگزا دسیمال 

روش دیگری که به وسیله آن رنگ‌ها را نماش می دهند روش هگزا دسیمال هست که در این مدل از ترکیب حروف و اعداد استفاده می گردد. در این روش نیز مطابق روش قبلی دو عدد اول بیانگر رنگ قرمز دو عدد دوم رنگ سبز و دو عدد سوم رنگ آبی می باشد. کمترین مقدار در این روش ۰۰ و بیشترین مقدار ff  میباشد. این روش متداول ترین روش برای نمایش رنگ ها است. 

در این روش امکان استفاده از کاراکتر های زیر وجود دارد. 

۰ تا ۹ و  A  تا F

این کد رنگ ها مختص طراحی سایت و در اکثر برنامه گرافیکی همچون فتوشاپ به همین شیوه مورد استفاده قرار می‌گیرد. 

در مدل هگزا دسیمال کد رنگ سفید برابر با #FFFFFF که البته بصورت سه تایی به شکل #FFF  نیز نمایش داده می شود حالا اینکه سه تایی با ششتایی چه تفاوتی دارد در ادامه به ان می پردازیم. نمایش رنگ ها بصورت هگزا دسیمال به بزرگ و کوچکی حروف حساس نمی باشد. 

نحوه بدست آوردن کد یک رنگ خاص چگونه است؟ 

اگر در وب سایت بخواهید متوجه شوید رنگی که می بینید دارای چه کد رنگی است به چندین روش زیر می توانیم اقدام کنیم. 

استفاده از افزونه برای مرورگر 

برای بدست آوردن کد یک رنگ می توانیم با نصب افزونه بر روی مرورگر خود اقدام کنیم. 

افزونه color picker  برای مرورگر کروم در این زمینه بسیار کاربردی است با نصب این افزونه برای بدست آوردن کد رنگ فقط کافی بعد فعال کردن این افزونه نشانگر موس خود را در هر وب سایت بر روی رنگ مد نظر برده تا کد رنگ آن را بصورت  RGB و HEX داشته باشیم، 

برای دانلود این افزونه عبارت ColorPick Eyedropper درگوگل سرچ نمایید.

روش دیگر بدست آوردن کد رنگ کمی سخت تر از روش بالاست و با استفاده از حالت developer مرورگر است

خوانایی متون و انتخاب رنگ

همیشه در انتخاب رنگ متن و رنگ زمینه ان به این نکته Iتوجه داشته باشید که رنگ ها انتخابی به شکلی نباشد که خواندن متن برای کاربر سخت گردد زیرا این موضوع بر روی سئو سایت شما نیز اثر گذار است.  این موضوع یکی از موارد مورد بررسی در ابزار معتبر گوگل لایت هاوس می باشد. 

شفافیت رنگ ها 

می توانیم از رنگ ها بصورت شفاف نیز استفاده کنیم 

استفاده از نام رنگ در css 

در این مقاله با دو روش نمایش رنگ ها آشنا شدیم که نحوه استفاده از آنها در css به شکل زیر است. 

p  {

color:#ff0000;

color:RGB(255,0, 0);

البته در css نحوه نمایش رنگ ها به همین جا ختم نشده و متدهای دیگری نیز وجود دارد.  استفاده از نام رنگ نيز در css مرسوم است به مثال زیر توجه کنید. 

p {

color :red;

البته در این حالت بسیار کمتر از حالت های قبلی می توانیم رنگی را انتخاب کنیم و حدود ۱۵۰  رنگ بیشتر امکانش را نداریم. در صورتی که در مدل rgb امکان انتخاب  16,777,216رنگ وجودش داشت. این عدد در واقع حاصل ضرب سه عدد ۲۵۶ * ۲۵۶ * ۲۵۶ می باشد. 

در این مقاله به دلیل استفاده بسیار کمتر از روش hsl در html به این مدل نپرداختیم در ادامه این مقاله را تکمیل کرده و این روش را نیز اضافه می کنیم.

خواندن این مقاله هم میتونه در موضوع رنگ ها می تواند مفید باشد 

https://www.digitalocean.com/community/tutorials/css-hex-code-colors-alpha-values

با ذکر این موضوع به پایان این مطلب که بخشی از دنيای جادویی رنگ ها را بیان می‌کرد رسیدیم. از شما درخواست داریم با اشتراک این مطلب با دوستان خود و همچنین با ارائه نظرات خود باعث دلگرمی ما باشید

فهرست مطالب

این مطلب را با دیگران به اشتراک بگذارید

LinkedIn
Telegram
WhatsApp
Email
Print
Twitter

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

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