person ریحانه یزدانی
date_range شنبه , ۹ شهریور ۱۳۹۸visibility mode_comment ۳۳
کد رنگ های RGB در طراحی صفحات HTML : فهرست شیندلر ( Schindler’s List) یکی از فیلمهای به یادماندنی استیون اسپیلبرگ کارگردان مطرح امریکایی است که فضای آن کاملا خاکستری و جنگ زده است. تنها رنگ موجود در این فیلم، رنگ قرمز لباس دختربچه ای است که تقریبا اواخر فیلم نشان داده میشود. با این حال، احتمالا این دختربچه در ذهن بسیاری از مخاطبین مانده و در پوسترهای ساخته شده از این فیلم، طرح های زیادی از ترکیب خاکستری و قرمز دیده شود. رنگ یکی از قویترین عناصر طبیعت است که در خاطر ما میماند و هوشمندی در انتخاب آن، تغییرات کوچک را به نتایج بزرگ میرساند. در این مطلب به قصد داریم شما را به صورت کامل و مفصل با نام و کد رنگ ها در زبان های html و CSS آشنا کنیم.
از کدام کد رنگ ها در طراحی وب و گرافیک استفاده کنیم؟
این ما هستیم که رنگها را انتخاب میکنیم، اما این رنگها هستند که حال و هوای ما را میسازند. شاید بتوان گفت همان مقدار که سبک موزیکهای مختلف در احساسات ما تاثیر گذار هستند، رنگها نیز میتوانند روحیه ما را عوض کنند. ما تقریبا در همه چیز با رنگها سروکار داریم چرا که بینایی بسیار سریع بر عملکرد مغز تاثیر میگذارد و حالات عاطفی انسان را تحت تاثیر قرار میدهد.
رنگها بسیار نمادین هستند و گاهی میتوانند جایگزین حرفهای نگفته ما باشند. نمونه بارز این اتفاق، پرچم سفید صلح است که میتواند در یک لحظه آتش جنگ را خاکستر کند و همه تعصبات انسانی را زیر پا بگذارد. اهمیت به رنگها نکته مهمی است و امروزه در کسب و کارها اهمیت زیادی پیدا کرده است زیرا امروزه همه چیز سعی در هدایت افراد به مسیرهای مختلف دارد. بنابراین زمانی که قصد دارید از کدهای رنگ در صفحات وب و یا طرح های گرافیکی خود استفاده کنید، حتما باید شناخت خوبی نسبت به مخاطب، هدف طرح، مفاهیم طراحی و... داشته باشید.
تاثیر رنگ ها در کسب و کارهای آنلاین
اهمیت تاثیر رنگها بر بیننده چیزی است که طراحان از آن غافل نمیشوند و در طراحی سایت و اپلیکیشن بسیار مهم است. طبق برخی تحقیقات انتخاب رنگ مناسب برای وب سایت، حدود 70 درصد در جذب بازدیدکنندگان و تبدیل آنها به خریدار موثر است. تعریف یک پالت رنگ مشخص برای کاری که انجام میدهید به نظم و حفظ یکپارچگی بخشهای مختلف کمک کرده و در زمینه هایی مانند رسانه های اجتماعی (Social Media) نیز کنترل اوضاع را راحت تر میکند.
رنگ های استفاده شده در شهربازی ها و رستوران ها معمولا از خانواده رنگهای گرم و نشاط آور هستند، درحالیکه در بیمارستان ها و کتابخانه ها معمولا از رنگهایی مانند سبز و آبی برای آرامش و رضایت خاطر افراد استفاده میکنند. مک دونالد (McDonald) که یکی از بزرگترین رستورن های زنجیره ای در دنیا است رنگ زرد و قرمز را برای خود انتخاب کرده تا محرک اشتهای افراد و به ویژه، هیجان نوجوانان و جوانان باشد. طبق آمارها حدود 50 درصد از مشتریان مک دونالد در آمریکا افراد بین 18 تا 29 سال هستند.
این موضوع در کسب وکارهای آنلاین نمود زیادی پیدا کرده و طراحان رابط کاربری و گرافیست ها، در مفهوم رنگها دقت زیادی میکنند. به عنوان مثال بسیاری از کسب وکارهای آنلاین مانند توییتر و فیسبوک از آبی برای جلب اعتماد افراد استفاده میکنند. همچنین رنگ صورتی و بنفش در اپلیکیشنی مانند اینستاگرام بیشتر به هدف تقویت خلاقیت افراد است. طبق آمارهای سال 2018 روزانه حدود 60 میلیون عکس در این اپلیکیشن بارگذاری میشود که همین امر، توسعه دهندگان آن را ترغیب به افزودن فیلترهای رنگی مختلف در نسخه هایمختلف آن میکند.
تاثیر کد رنگ ها در احساسات
در علم روانشناسی هر کدام از رنگها را نماد درونیات انسان و موثر در تصمیمات و احساسات او است. رنگ های سرد باعث آرامش و سکوت هستند و در عین حال ممکن است احتمال افسردگی و ناامیدی را افزایش دهند. در مقابل رنگ های گرم تحریک کننده هیجانات، اشتها و همچنین عصبانیت هستند و معمولا در طراحی مینیمال استفاده میشوند.
طیف رنگ های سرد
- رنگ سبز : سبز بسیار آرامش بخش است و در مراکز درمانی و دکوراسیون نیز استفاده زیادی دارد. سبز میتواند به کاهش تنش ها و استرس کمک زیادی کند و نشانه افراد تلاشگر و با اراده است.
- رنگ آبی : آبی باعث احساس امنیت و اعتماد میشود. آبی رنگ افراد درونگرا و وفادار است اما استفاده بیش از حد از آن ممکن است باعث ناامیدی شود.
- رنگ بنفش : افراد جسور و خلاق معمولا علاقه زیادی به بنفش دارند. این رنگ نماد دانایی و شور است و استفاده از آن در محیط کار توصیه میشود.
طیف رنگ های گرم
- رنگ قرمز: قرمز نشان دهنده عشق و قدرت است و همچنین موجب پرخاشگری میشود. این رنگ نماد افراد زودجوش وخوش قلب است.
- رنگ زرد: زرد شادی آور است و به افزایش اعتماد به نفس کمک زیادی میکند. افراد بلند پرواز و اجتماعی معمولا به رنگ زرد علاقه زیادی دارند.
- رنگ نارنجی: نارنجی رنگ صداقت و مثبت اندیشی است. نارنجی دوست ها معمولا افراد پرانرژی و شوخ طبعی هستند.
کد رنگ چیست ؟
اگر طراح وب و یا گرافیست باشید حتما با شیوه های استفاده از رنگ در کار خود آشنایی دارید. اگر کدهای Html و CSS را دیده باشید، در بخش تنظیم رنگ متن، پس زمینه ، حاشیه و... از رنگ ها با کدهای مختلفی استفاده شده است. این کدها به 3 روش در میان کدهای CSS و HTML قابل استفاده هستند که در ادامه آنها را بررسی میکنیم.
استفاده از نام رنگ
در این روش به طور ساده از نام هر رنگی که میخواهیم در کدهای مربوطه استفاده میکنیم. مانند Black، Red و غیره.
کد رنگ RGB
در این روش از کد رنگ (RGB(0,0,0 استفاده میشود که به ترتیب نمیانگر رنگهای قرمز (Red)، سبز (Green) و آبی (Blue) هستند. در این شیوه هر کدام از رنگها میتوانند مقداری بین 0 تا 255 داشته باشند و هرکدام از مقادیر مربوط به RGB بیشتر باشند به این معنی است که شدت آن رنگ در ترکیب جدید بیشتر است.
استفاده از کد رنگ ها ترکیبی
این روش ساده تر از روش قبلی است و در بین طراحان محبوبیت بیشتری هم دارد. در این روش کد رنگ نهایی یک عدد 6 رقمی در مبنای 16 (HexaDecimal) است که در کنار علامت # قرار میگیرد. هر رنگ به صورت #rrggbb و با دو عدد نشان داده میشود که مقادیر آنها از 00 تا FF است. توجه کنید که منظور از رنگ در این بخش، تنها یکی از سه رنگ قرمز، سبز و آبی است که با R، G و B نشان میدهیم و رنگ دیگری نداریم زیرا بقیه رنگها از ترکیب آنها ساخته میشوند.
ممکن است فرمت ترکیب شده از عدد و حرف برایتان کمی گیج کننده باشد پس بهتر است موضوع را واضح تر کنیم. هر کدام از سه رنگ بالا یک بایت (بایت سوم، بایت دوم، بایت اول) محسوب میشوند. هر بایت در در مبنای 16 با 00 تا FF و در مبنای 10 با اعداد بین 0 تا 255 نمایش داده میشود. اعدادی که مثلا در مبنای r باند شامل ارقامی از 0 تا r-1 هستند. اعداد در مبنای 16 نیز شامل ارقامی بین 0 تا 15 هستند که برای رفع ابهام در خواندن دورقمیها، 10 تا 15 را با حروف A تا F نمادگذاری کرده اند. پس 15 رقم در این روش 0 1 2 3 4 5 6 7 8 9 A B C D E F هستند. به عنوان مثال میتوان عدد 112 را به سه روش 1، 1 و 2 یا B2 و یا 1C تفسیر کرد. برای اینکه بیشتر با این نکات آشنا شوید، در جدول زیر چند رنگ معروف را به روش های گفته شده نشان داده ایم، خوب دقت کنید که چطور کدها با ترکیب سه رنگ قرمز و سبز و آبی ساخته شده اند:
رنگ | کد رنگ HEX | کد رنگ RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#FF0000 | rgb(255,0,0) | |
#00FF00 | rgb(0,255,0) | |
#0000FF | rgb(0,0,255) | |
#FFFF00 | rgb(255,255,0) | |
#00FFFF | rgb(0,255,255) | |
#FF00FF | rgb(255,0,255) | |
#C0C0C0 | rgb(192,192,192) | |
#FFFFFF | rgb(255,255,255) |
ابزار انتخاب و دریافت کد رنگ ها
در این بخش برای شما یک انتخاب کننده رنگ را برای شما تهیه کرده ایم که میتوانید با استفاده از آن به راحتی رنگ مورد نظرتان را انتخاب کنید. با انتخاب با استفاده از این بزار رنگ ، کد و مقادیر استفاده شده هر کدام از رنگ های قرمز و سبز و آبی را برای ایجاد آن رنگ مشاهده می کنید.
جمع بندی
رنگ ها کاربرد زیادی در صفحات وب و طراحی گرافیک دارند. طراحان معمولا از کدهای رنگ HEX بیشتر برای ایجاد رنگ ها استفاده می کنند، زیرا به خاطر سپردن نام رنگ ها برای نسبتا سخت تر است. همچنین ابزار MaterialUi پالت های رنگی بسیار کاملی را از رنگ های متریال ارائه کرده و به شما امکان تست رنگ بر صفحات وب و اپلیکیشن را نیز میدهد. به رنگ موردعلاقه تان فکر کنید و سپس نگاهی به لباس و به وسایل اطرافتان بیندازید. اگر ترکیب رنگها خوشایند شما نیست پس وقت آن است با یک جادوی کوچک به همه چیز رنگ بهتری ببخشید و یک قدم به چیزی که دوست دارید نزدیک تر شوید. دوست دارین محیط اطرافتون چه رنگی باشه؟
دوست داری از طریق برنامه نویسی کسب درآمد کنی؟ اگر می خوای با برنامه نویسی وب و موبایل کسب درآمد کنی، جایی استخدام شی و یا حتی اینکه درامد ارزی داشته باشی، حتما دوره های متخصص سون لرن رو یه نگاه بنداز : متخصص شو arrow_back