کد رنگ ها در HTML به صورت RGB و نحوه استفاده از آن



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
7Learn Experts
comment دیدگاه کاربران
reza khan replyپاسخ

با سلام وخسته نباشید
می خواستم تشکر کنم از این همه مطالب خوب واموزنده تون
خیلی بدردم خورد
دستتون طلا

لقمان آوند

خواهش میکنم .
خوشحالم که مطالب مفید واقع شده .
موفق باشید.

restless replyپاسخ

ممنون لقمان جان که اینقد به فکر برادران Programmer web هستی،قربون معرفتت با معرفت!!! 😉

لقمان آوند

خواهش میکنم میثم جان
مثل اینکه لحظه به لحظه دنبال میکنی مطالبو …
چه بازدیدکننده ی خوبی هستیا !!!

restless replyپاسخ

راستی دیزاین جدید Header هم مبارکا باشه،منظورم همین اسلایده هستش،خیلی فکر خوبیه و دیزاینشم عالیه،بازم ممنون لقمان جان!!! 😉

لقمان آوند

ممنون
یه نیم ساعتی بیشتر وقت نگذاشتم بنویسمش .
حالا بعدا باید بهترش کنم .

reza khan replyپاسخ

همین الان داشتم یه کم تمرین html میکردم یه سوال برام پیش اومد ایا میشه با ترکیب این ۰ , ۱ , ۲ , ۳ , ۴ , ۵ , ۶ , ۷ , ۸ , ۹ , F , E , D , C , B , A
ها رنگ مورد علاقه خودمون رو هم بسازیم یاخیر؟

لقمان آوند

آره دوست عزیز ، هر رنگی رو می تونی از ترکیب سه رنگ قرمز و آبی و سبز با فرمتی که گفته شده بسازه . برای هر رنگ از 00 تا FF مقادیر رو تنظیم کنی به رنگ دلخواهت میرسی …
آخر همین مطلب یه انتخاب کننده ی رنگ تازه اضافه کردم . حتما ببین و استفاده کن .

reza khan replyپاسخ

ممنون لقمان جان دستت درد نکنه
یه در خواست دارم ازت میشه این کد گوگل پلاس کنار صفحهت رو بدی ؟

لقمان آوند

این یه افزونه ی وردپرسه .
اگه وردپرس داری تا بهت معرفی کنم .

reza khan replyپاسخ

ممنون لقمان جان از پست های قبلیت اسم افزونه رو پیدا کردم
واقعا سایت باحالی داری

sarayekala replyپاسخ

خیلی مطلب خوبی بود. خیلی وقت بود دنبال این موضوع میگشتم.

مهندس محمدجواد میرزابیگی replyپاسخ

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

لقمان آوند

سلام
ممنون ، لطف دارید جناب مهندس
البته برای بنده رتبه الکسا اهمیتی نداره . چون به راحتی میشه بالا بردش و توش تقلب کرد . چیزی که مهمه پیج رنکه و محتوای مطالب که سعی می کنیم با کیفیت باشه .

مهندس محمدجواد میرزابیگی

شما استااااادی قربان.

asbahi replyپاسخ

سلام و خسته نباشید به آقا لقمان . می خواستم ببینم می تونم با تغیر قسمت های کد های ترکیبی رنگ صفحه وب مون رو عوض کنم ❓

لقمان آوند

آره میشه …

asbahi replyپاسخ

راستی من اونا رو عوض کردم هیچ تغیری نکرد یعنی اونا رو پاک کردم به جاش مثلا این کد رو : #0000FF نوشتم ………. نمی شه من بلد نیستم کمکم کن آقا لقمان . 😥

لقمان آوند

بعد از عوض کردن ها به آدرس فایل Css برو و کنترل F5 رو بزن تا دوباره لود بشه و از کش مرورگر استفاده نکنه …

مهدی اسکین replyپاسخ

با سلام چطوری میشه یه آپلود سنتز درست کرد و میشه از لینکش رو داد به پرشین گیگ یا نه؟؟؟
ممنون

محمدسینا معراجیان

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

رضا replyپاسخ

سلام خسته نباشید میشه کد تغیر رنگ ها تصادفی رو هنم بدید (رنگ تصادفی random color( مرسی

لقمان آوند

در آینده سعی میشه گذاشته بشه .

armansalimzadeh replyپاسخ

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

سجاد دریس

سلام. با استفاده از خاصیت color در css میشه رنگ متن رو تغییر داد.
این مطلب رو هم بخونید :

imaniy replyپاسخ

سلام من تو وبلاگم از یه قالب استفاده میکنم که رنگ سایدبارش ابی هستش من چگونه میتونم رنگ دقیق اون رو به صورت کد پیدا کنم مثل همینی که شما گفتین #0000CD من چگونه این کد رو تو قالب پیدا کنم؟؟

محمدسینا معراجیان

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

aram replyپاسخ

سلام اقا لقمان اوند خسته نباشید، ضمن تبریک سال نو به شما وهمه دوستان من از شما کمکی میخواستم.من itمیخونم ولی تو رشته ام حرفه ای نیستم میشه در ساختن سایت بهم کمک کنید؟با استفاده ازhtml , cssدر notepad،ممنون میشم.اینم ایمیلمarameshedeleman02@yahoo.com

سجاد دریس

سلام.
آموزش ها رو بخونید حتما میتونید به تنهایی انجامش بدین.

a replyپاسخ

😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 ❓ 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳 😳

sajad replyپاسخ

Mer30

ali replyپاسخ

سلام قالب سایت خوزستانی رو میخواک کسی برام طراحی میکنه
www.khozestani.ir

سجاد دریس

سلام در انجمن مطرح کنید

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :