جلسه ۱۲ – تعیین رنگ با استفاده از ()rgb و ()hsl

رنگ ها با استفاده از rgb و hsdl
رنگ ها با استفاده از rgb و hsdl

منظور از تعیین رنگ با تابع rgb چیست؟ منظور از تعیین رنگ با تابع hsl چیست؟ چگونه می‌تونیم بهترین رنگ ها رو با rgb و hsl ایجاد کنیم؟ در این مقاله به صورت کامل با این دو تابع یعنی rgb و hsl آشنا میشیم.

پادکست مقاله توسط نوید معدن نژاد

یاد آوری رنگ در CSS

همانطور که در فصل رنگ ها گفتیم، رنگ ها اصلی ترین و اساسی ترین دلیل چشم نوازی وب سایت شماست.

برای تغییر رنگ متون از ویژگی color و برای تغییر رنگ پس زمینه از ویژگی Background-color استفاده می‌کنیم.

در ادامه با دو تابع Rgb و Hsl آشنا خواهیم شد.

تابع ()rgb

تابع ()rgb از سه کلمه­‌ی red،green و blue تشکیل شده و به شکل مقابل تعریف میشه:

rgb( red, green, blue)

این تابع بر اساس مقدار هرکدوم از این سه رنگ، رنگ عنصر مورد نظر ما رو تعیین می­‌کنه. اجازه بدید با استفاده از ویژگی background-color که رنگ پس‌زمینه رو تعریف می­‌کرد با این تابع بیشتر آشنا بشیم.

کد رنگ قرمز با استفاده از RGB
کد رنگ قرمز با استفاده از RGB
کد رنگ آبی با استفاده از RGB
کد رنگ آبی با استفاده از RGB
کد رنگ سبز با استفاده از RGB
کد رنگ سبز با استفاده از RGB

همون‌طور که مشاهده می­‌کنیم این تابع هم با عدد ۲۵۵ که در جلسه قبل یاد گرفتیم سر و کار داره!

تفاوت تابع ()rgb با مقادیر HEX در اینه که مقدار تاریکی و روشنایی رنگ، در مبنای ۱۰ تعیین میشه. بنابراین نیاز نیست که برای تاریک کردن اثر یک رنگ یا روشن کردن اون، از 00 تا ff حرکت کنیم. 0 تاریک ترین حالت رنگ، و 255 روشن ترین حالت اون رنگ هست.

حالا رنگ های دیگه رو بررسی کنیم.

برای مثال، می‌دونیم که رنگ بنفش، مخلوط رنگ قرمز و آبی هست. اون رو می­‌تونیم به فرم زیر نمایش بدیم.

کد رنگ بنفش با استفاده از RGB
کد رنگ بنفش با استفاده از RGB

نکته اینجاست که 255 روشن‌ترین حالت ممکنه. ما می‌تونیم با زیاد کردن مقادیر تابع، رنگ مورد نظرمون رو به روشن‌ بودن نزدیک‌تر کنیم.

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

نمونه‌های دیگه‌ای از این تلفیق رنگ‌ها توسط ()rgb رو می‌تونیم در پایین مشاهده کنیم.

کد رنگ سبز پر رنگ با استفاده از RGB
کد رنگ نارنجی با استفاده از RGB
کد رنگ نارنجی با استفاده از RGB
کد رنگ بنفش کم رنگ با استفاده از RGB
کد رنگ بنفش کم رنگ با استفاده از RGB

ناگفته نمونه که با استفاده از تابع ()rgb، می‌تونیم به طیف رنگ‌ها بین سیاه و سفید هم دسترسی داشته باشیم.

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

 تابع ()hsl

در این تابع ما به سه مقدار hue، saturation و lightness برمی‌خوریم که مسلما قبل از این آموزش، این واژه هارو هنگام ویرایش کردن عکس مشاهده کردیم. نحوه استفاده از این سه مقدار به چه شکل هست؟

hsl( hue, saturation, lightness )

منظور از Hue در تعیین رنگ با HSL

عبارت است از درجه رنگ‌بندی که می‌­تونه مقادیر بین 0 و 360 رو شامل بشه. 0 برابر با قرمز، 120 برابر با سبز و 240 برابر با آبی هست. اعداد بین هرکدوم از مقادیر طیف رنگ بین دو رنگ متناظر رو در برمی­‌گیرن. برای مثال، اعداد بین 120 و 240، عبارتند از طیف رنگ بین سبز و آبی.

کد رنگ قرمز با استفاده از HSL
کد رنگ قرمز با استفاده از HSL
کد رنگ آبی با استفاده از HSL
کد رنگ آبی با استفاده از HSL
کد رنگ سبز با استفاده از HSL
کد رنگ سبز با استفاده از HSL

منظور از Saturation در تعیین رنگ با HSL

درصدی هست که هر چی بیشتر به سمت صفر میل کنه، رنگ رو به طیف سیاه و سفید می­‌کشونه و هر چی بیشتر به سمت 100 میل کنه، رنگ‌ها واضح‌تر به نظر می‌رسن.

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

منظور از Lightness در تعیین رنگ با HSL

تقریبا از اسمش مشخصه، روشن‌بودن یا تاریک‌بودن رنگ رو مشخص می­‌کنه. فقط باید دقت کنید که با saturation اشتباه گرفته نشه.

کد رنگ مشکی با استفاده از HSL
کد رنگ مشکی با استفاده از HSL
کد رنگ آبی پر رنگ با استفاده از HSL
کد رنگ آبی پر رنگ با استفاده از HSL
کد رنگ سفید با استفاده از HSL
کد رنگ سفید با استفاده از HSL

نتیجه گیری

در این مقاله با تعیین رنگ با HSL و RGB آشنا شدیم. در مقاله بعد در رابطه با rgba و hsla صحبت خواهیم کرد.

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

مدیر محتوا: علی اسمعیلی

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

1 نظر

یک پاسخ

  1. ممنون خیلی واضحه فقط اگر ممکنه دوره جاوااسکریپت هم مثل این ترتیب بدید خیلی عالیه.

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

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=