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

اگر بین هنر و کامپیوتر گیر کردید، با UI تلفیقش کنید! UI یا طراحی رابط کاربری یکی از جذاب‌ترین رشته‌ها برای کسایی هست که با دید گرافیکی خوبشون بتوانند حس خوب را برای کاربران ایجاد کنند و روند استفاده از سایت را سهولت ببخشند. اگر شما هم از طرفداران هنر و گرافیک هستید. دوره متخصص طراحی رابط کاربری (UI) را به شما پیشنهاد می‌کنیم.
 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۳۸ دیدگاه
امیر کبیر ۰۴ بهمن ۱۳۹۹، ۱۱:۴۹
ممنون کاملا مفید
معافی ۲۶ دی ۱۳۹۹، ۱۹:۱۳
سلام علیکم

ارائه کد رنگ ها خیلی مفید بود. در صورتی که کد تمام رنگهای مورد استفاده در سایت ها را درج بفرمایید، مفید فایده تر خواهد بود.

ممنونم
مهههههسا ۰۸ دی ۱۳۹۹، ۱۳:۵۸
سلام من رنگ های سایتم رو از سایت شماانتخاب کردم
لطفا نظر بدید ترکیب رنگ ها باهم خوب شده؟
نازنین کریمی مقدم ۰۹ دی ۱۳۹۹، ۰۲:۳۴
درود. بله بنظر مناسب هست.
حسین ملهم ۰۹ شهریور ۱۳۹۸، ۱۷:۱۵
با درود بیکران
خیلی مقاله مفید و کاربردی بود.
واقعا، تیم سون لرن نقش بسیار مهم و پررنگی در دانش وب ایران دارند.
دستمریزاد و خسته نباشید.
پاینده باشید
ali ۰۲ خرداد ۱۳۹۲، ۰۱:۳۴
سلام قالب سایت خوزستانی رو میخواک کسی برام طراحی میکنه
www.khozestani.ir
سجاد دریس ۰۲ خرداد ۱۳۹۲، ۰۷:۵۱
سلام در انجمن مطرح کنید
sajad ۲۴ اردیبهشت ۱۳۹۲، ۱۴:۴۱
Mer30
a ۰۱ اردیبهشت ۱۳۹۲، ۱۴:۱۳
:oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :?: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops:
aram ۱۹ فروردین ۱۳۹۲، ۱۱:۴۸
سلام اقا لقمان اوند خسته نباشيد، ضمن تبريك سال نو به شما وهمه دوستان من از شما كمكي ميخواستم.من itميخونم ولي تو رشته ام حرفه اي نيستم ميشه در ساختن سايت بهم كمك كنيد؟با استفاده ازhtml , cssدر notepad،ممنون ميشم.اينم ايميلمarameshedeleman02@yahoo.com
سجاد دریس ۲۰ اردیبهشت ۱۳۹۲، ۰۴:۵۳
سلام.
آموزش ها رو بخونید حتما میتونید به تنهایی انجامش بدین.
imaniy ۱۴ دی ۱۳۹۱، ۰۰:۳۶
سلام من تو وبلاگم از یه قالب استفاده میکنم که رنگ سایدبارش ابی هستش من چگونه میتونم رنگ دقیق اون رو به صورت کد پیدا کنم مثل همینی که شما گفتین #0000CD من چگونه این کد رو تو قالب پیدا کنم؟؟
محمدسینا معراجیان ۱۴ دی ۱۳۹۱، ۲۳:۵۵
عکس بگیرید از صفحتون بزنید رنگش رو توی فتوشاپ تشخیص بده ! منطقی ترین کار همینه !
armansalimzadeh ۳۰ آذر ۱۳۹۱، ۰۹:۵۶
سلام لقمان جان چطوری میتونم رنگ های متن رو به هر رنگی که دلم میخواد تبدیل کنم.
سجاد دریس ۳۰ آذر ۱۳۹۱، ۲۰:۵۲
سلام. با استفاده از خاصیت color در css میشه رنگ متن رو تغییر داد.
این مطلب رو هم بخونید :
رضا ۲۹ مرداد ۱۳۹۱، ۰۰:۳۷
سلام خسته نباشید میشه کد تغیر رنگ ها تصادفی رو هنم بدید (رنگ تصادفی random color( مرسی
لقمان آوند ۰۱ شهریور ۱۳۹۱، ۰۲:۰۴
در آینده سعی میشه گذاشته بشه .
مهدی اسکین ۰۴ مرداد ۱۳۹۱، ۱۱:۰۹
با سلام چطوری میشه یه آپلود سنتز درست کرد و میشه از لینکش رو داد به پرشین گیگ یا نه؟؟؟
ممنون
محمدسینا معراجیان ۰۴ مرداد ۱۳۹۱، ۱۱:۱۳
برای ساخت آپلودسنتر که باید از اسکریپت استفاده کنید که توی اینترنت پر هست اما بخش دوم سوالتون رو متوجه نشدم!یعنی توی پرشین گیگ آپلود شه؟اگر سوالتون اینهکه خیر چون پرشینگیگ توانایی نصب و اجرای اسکریپت هارا ندارد
asbahi ۱۵ خرداد ۱۳۹۱، ۲۲:۱۷
راستی من اونا رو عوض کردم هیچ تغیری نکرد یعنی اونا رو پاک کردم به جاش مثلا این کد رو : #0000FF نوشتم .......... نمی شه من بلد نیستم کمکم کن آقا لقمان . :cry:
لقمان آوند ۱۸ خرداد ۱۳۹۱، ۱۹:۴۴
بعد از عوض کردن ها به آدرس فایل Css برو و کنترل F5 رو بزن تا دوباره لود بشه و از کش مرورگر استفاده نکنه ...
asbahi ۱۵ خرداد ۱۳۹۱، ۱۵:۱۳
سلام و خسته نباشید به آقا لقمان . می خواستم ببینم می تونم با تغیر قسمت های کد های ترکیبی رنگ صفحه وب مون رو عوض کنم :?:
لقمان آوند ۱۵ خرداد ۱۳۹۱، ۲۱:۴۴
آره میشه ...
مهندس محمدجواد میرزابیگی ۱۵ اردیبهشت ۱۳۹۱، ۲۲:۳۸
سلام.
صفحه رنگ بسیار کامل و جامعی تهیه کردید.
مخصوصا اون ابزار انتهایی.
در کل سایتتون حرف نداره.
البته بیخودم نیست روز به روز الکساتون داره میاد پایین. بخاطر مطالب و آموزشهای منحصربفردتونه.
موفق و منصور باشی دوست عزیز. :oops: :oops: :oops:
لقمان آوند ۱۵ اردیبهشت ۱۳۹۱، ۲۲:۴۳
سلام
ممنون ، لطف دارید جناب مهندس
البته برای بنده رتبه الکسا اهمیتی نداره . چون به راحتی میشه بالا بردش و توش تقلب کرد . چیزی که مهمه پیج رنکه و محتوای مطالب که سعی می کنیم با کیفیت باشه .
sarayekala ۲۵ اسفند ۱۳۹۰، ۱۰:۵۸
خیلی مطلب خوبی بود. خیلی وقت بود دنبال این موضوع میگشتم.
reza khan ۰۹ اسفند ۱۳۹۰، ۱۵:۰۷
ممنون لقمان جان از پست های قبلیت اسم افزونه رو پیدا کردم
واقعا سایت باحالی داری
reza khan ۰۹ اسفند ۱۳۹۰، ۱۴:۲۳
ممنون لقمان جان دستت درد نکنه
یه در خواست دارم ازت میشه این کد گوگل پلاس کنار صفحهت رو بدی ؟
لقمان آوند ۰۹ اسفند ۱۳۹۰، ۱۵:۰۶
این یه افزونه ی وردپرسه .
اگه وردپرس داری تا بهت معرفی کنم .
reza khan ۰۸ اسفند ۱۳۹۰، ۱۹:۳۵
همین الان داشتم یه کم تمرین html میکردم یه سوال برام پیش اومد ایا میشه با ترکیب این ۰ , ۱ , ۲ , ۳ , ۴ , ۵ , ۶ , ۷ , ۸ , ۹ , F , E , D , C , B , A
ها رنگ مورد علاقه خودمون رو هم بسازیم یاخیر؟
لقمان آوند ۰۸ اسفند ۱۳۹۰، ۲۱:۰۱
آره دوست عزیز ، هر رنگی رو می تونی از ترکیب سه رنگ قرمز و آبی و سبز با فرمتی که گفته شده بسازه . برای هر رنگ از 00 تا FF مقادیر رو تنظیم کنی به رنگ دلخواهت میرسی ...
آخر همین مطلب یه انتخاب کننده ی رنگ تازه اضافه کردم . حتما ببین و استفاده کن .
restless ۰۸ اسفند ۱۳۹۰، ۱۹:۳۳
راستی دیزاین جدید Header هم مبارکا باشه،منظورم همین اسلایده هستش،خیلی فکر خوبیه و دیزاینشم عالیه،بازم ممنون لقمان جان!!! :wink:
لقمان آوند ۰۸ اسفند ۱۳۹۰، ۲۱:۱۰
ممنون
یه نیم ساعتی بیشتر وقت نگذاشتم بنویسمش .
حالا بعدا باید بهترش کنم .
restless ۰۸ اسفند ۱۳۹۰، ۱۹:۳۱
ممنون لقمان جان که اینقد به فکر برادران Programmer web هستی،قربون معرفتت با معرفت!!! :wink:
لقمان آوند ۰۸ اسفند ۱۳۹۰، ۲۱:۰۹
خواهش میکنم میثم جان
مثل اینکه لحظه به لحظه دنبال میکنی مطالبو ...
چه بازدیدکننده ی خوبی هستیا !!!
reza khan ۰۸ اسفند ۱۳۹۰، ۱۹:۱۷
با سلام وخسته نباشید
می خواستم تشکر کنم از این همه مطالب خوب واموزنده تون
خیلی بدردم خورد
دستتون طلا
لقمان آوند ۰۸ اسفند ۱۳۹۰، ۱۹:۲۸
خواهش میکنم .
خوشحالم که مطالب مفید واقع شده .
موفق باشید.
اشتراک گذاری مقاله در :
  • از کدام کد رنگ ها در طراحی وب و گرافیک استفاده کنیم؟
  • تاثیر رنگ‌‌ها در کسب و کارهای آنلاین
  • تاثیر کد رنگ‌‌ها در احساسات
  • کد رنگ چیست؟
  • کد رنگ RGB
  • ابزار انتخاب و دریافت کد رنگ ها
  • جمع بندی