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