راهنمای کامل کد رنگ ها در HTML و CSS

کد رنگ‌ها در HTML و CSS از اهمیت بسیار بالایی برخوردار است. فهرست شیندلر ( 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 بیشتر برای ایجاد رنگ‌ها استفاده می‌کنند، زیرا به خاطر سپردن نام رنگ‌ها برای نسبتا سخت‌تر است. همچنین ابزار MaterialUi پالت‌های رنگی بسیار کاملی را از رنگ‌های متریال ارائه کرده و به شما امکان تست رنگ بر صفحات وب و اپلیکیشن را نیز می‌دهد. به رنگ موردعلاقه تان فکر کنید و سپس نگاهی به لباس و به وسایل اطرافتان بیندازید. اگر ترکیب رنگ‌ها خوشایند شما نیست پس وقت آن است با یک جادوی کوچک به همه چیز رنگ بهتری ببخشید و یک قدم به چیزی که دوست دارید نزدیک‌تر شوید. دوست دارین محیط اطرافتون چه رنگی باشه؟

اگر بین هنر و کامپیوتر گیر کردید، با UI تلفیقش کنید! UI یا طراحی رابط کاربری یکی از جذاب‌ترین رشته‌ها برای کسایی هست که با دید گرافیکی خوبشون بتوانند حس خوب را برای کاربران ایجاد کنند و روند استفاده از سایت را سهولت ببخشند. اگر شما هم از طرفداران هنر و گرافیک هستید. دوره متخصص طراحی رابط کاربری (UI) را به شما پیشنهاد می‌کنیم.

فرصت های بزرگ و درآمدهای عالی متعلق به متخصص هاست. برای متخصص شدن، مشاوره رایگان بگیر: