منظور از تعیین رنگ با تابع rgb چیست؟ منظور از تعیین رنگ با تابع hsl چیست؟ چگونه میتونیم بهترین رنگ ها رو با rgb و hsl ایجاد کنیم؟ در این مقاله به صورت کامل با این دو تابع یعنی rgb و hsl آشنا میشیم.
سرفصلهای پست
یاد آوری رنگ در CSS
همانطور که در فصل رنگ ها گفتیم، رنگ ها اصلی ترین و اساسی ترین دلیل چشم نوازی وب سایت شماست.
برای تغییر رنگ متون از ویژگی color و برای تغییر رنگ پس زمینه از ویژگی Background-color استفاده میکنیم.
در ادامه با دو تابع Rgb و Hsl آشنا خواهیم شد.
تابع ()rgb
تابع ()rgb از سه کلمهی red،green و blue تشکیل شده و به شکل مقابل تعریف میشه:
rgb( red, green, blue)
این تابع بر اساس مقدار هرکدوم از این سه رنگ، رنگ عنصر مورد نظر ما رو تعیین میکنه. اجازه بدید با استفاده از ویژگی background-color که رنگ پسزمینه رو تعریف میکرد با این تابع بیشتر آشنا بشیم.
همونطور که مشاهده میکنیم این تابع هم با عدد ۲۵۵ که در جلسه قبل یاد گرفتیم سر و کار داره!
تفاوت تابع ()rgb با مقادیر HEX در اینه که مقدار تاریکی و روشنایی رنگ، در مبنای ۱۰ تعیین میشه. بنابراین نیاز نیست که برای تاریک کردن اثر یک رنگ یا روشن کردن اون، از 00 تا ff حرکت کنیم. 0 تاریک ترین حالت رنگ، و 255 روشن ترین حالت اون رنگ هست.
حالا رنگ های دیگه رو بررسی کنیم.
برای مثال، میدونیم که رنگ بنفش، مخلوط رنگ قرمز و آبی هست. اون رو میتونیم به فرم زیر نمایش بدیم.
نکته اینجاست که 255 روشنترین حالت ممکنه. ما میتونیم با زیاد کردن مقادیر تابع، رنگ مورد نظرمون رو به روشن بودن نزدیکتر کنیم.
نمونههای دیگهای از این تلفیق رنگها توسط ()rgb رو میتونیم در پایین مشاهده کنیم.
ناگفته نمونه که با استفاده از تابع ()rgb، میتونیم به طیف رنگها بین سیاه و سفید هم دسترسی داشته باشیم.
تابع ()hsl
در این تابع ما به سه مقدار hue، saturation و lightness برمیخوریم که مسلما قبل از این آموزش، این واژه هارو هنگام ویرایش کردن عکس مشاهده کردیم. نحوه استفاده از این سه مقدار به چه شکل هست؟
hsl( hue, saturation, lightness )
منظور از Hue در تعیین رنگ با HSL
عبارت است از درجه رنگبندی که میتونه مقادیر بین 0 و 360 رو شامل بشه. 0 برابر با قرمز، 120 برابر با سبز و 240 برابر با آبی هست. اعداد بین هرکدوم از مقادیر طیف رنگ بین دو رنگ متناظر رو در برمیگیرن. برای مثال، اعداد بین 120 و 240، عبارتند از طیف رنگ بین سبز و آبی.
منظور از Saturation در تعیین رنگ با HSL
درصدی هست که هر چی بیشتر به سمت صفر میل کنه، رنگ رو به طیف سیاه و سفید میکشونه و هر چی بیشتر به سمت 100 میل کنه، رنگها واضحتر به نظر میرسن.
منظور از Lightness در تعیین رنگ با HSL
تقریبا از اسمش مشخصه، روشنبودن یا تاریکبودن رنگ رو مشخص میکنه. فقط باید دقت کنید که با saturation اشتباه گرفته نشه.
نتیجه گیری
در این مقاله با تعیین رنگ با HSL و RGB آشنا شدیم. در مقاله بعد در رابطه با rgba و hsla صحبت خواهیم کرد.
اگه نکته، پیشنهاد و انتقادی در رابطه با آموزشها دارین، خیلی خیلی خوشحال میشیم که اون رو در بخش دیدگاههای پایگاه دانش میزفا ارسال کنین.
مدیر محتوا: علی اسمعیلی
یک پاسخ
ممنون خیلی واضحه فقط اگر ممکنه دوره جاوااسکریپت هم مثل این ترتیب بدید خیلی عالیه.