سبد خرید

بستن سبد خرید

سبد خرید شما خالی است.

تعداد محصول: 0 کل قیمت: تومان0

تعیین رنگ با استفاده از ()rgb و ()hsl

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

زمان مطالعه: 10 دقیقه

تعیین رنگ با استفاده از ()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

پست های مشابه

دیدگاه و پرسش