سیر تا پیاز رنگها ( color ) در CSS ( قسمت دوم )

- visibility ۴ mode_comment

در این مطلب میخوام مطلب قبلی رو ادامه بدم.

css-colors

3. RGBA :

RGBA در واقع مقداری از RGB پیشرفته تر هست و با استفاده از اون میتونین رنگهای شفاف درست کنید. میتونین کارای جالبی با اون انجام بدین. یک مثال رو ببینید :

خروجی :

css-colors7

میبینید که برای رنگ اون متن یک رنگ شفاف انتخاب کردیم. سه مقدار اول که همون قرمز ، سبز و آبی رو مشخص میکنن و مقدار چهارم هم شفافیت ( Alpha ) رو مشخص میکنه. فرمت کلی بصورت زیر  هست :

مقدار شفافیت میتونه عددی بین 0 و یک باشه. اگر 0 بزارین یعنی ناپدید بشه و اگر 1 بزارین یعنی شفافیت نداشته باشه. برای مطالعه بیشتر در مورد RGBA میتونین به این لینک برید.

3. HSL :

مثال :

خروجی :

css-colors8

HSL مختصر کلمه های Hue و Saturation و Lightness هست.

قاعده کار با HSL کلا با قاعده RGB فرق داره. در RGB میومدیم و به میزانی که میخواستیم از رنگهای موجود با هم مخلوط میکردیم و رنگ مورد نظر بدست میومد. ولی در اینجا متفاوت هست و بیشتر به طبیعت و دور و اطراف ما نزدیک هست.

فرمت کلی بصورت زیر هست :

HUE همون رنگی هست که ما میبینیم. اگر همه رنگایی که میتونیم ببینیم و در محدوده مرئی هست رو جمع کنیم ، بصورت یک دایره در میاد، بنابراین میتونیم برای HUE عددی بین 0 تا 360 درجه رو قرار بدیم.

css-colors9

اگر در دایره بالا دقت کنید ، میبینید که قرمز در 0 درجه هست. سبز در 90 درجه و ارغوانی در 270 درجه.

با استفاده از saturation میتونین میزان اشباع بودن رنگ انتخابی رو تغییر بدین. برای این قسمت میتونین عددی بین 0 تا 100 درصد رو انتخاب کنید. هر چی به سمت 0 برید ، رنگتون مات تر میشه و هر چی بسمت 100 برید ، رنگتون براقتر و روشن تر میشه.

با استفاده از lightness هم میتونین میزان روشنایی و تاریکی رنگ رو مشخص کنید. مقدار این قسمت هم میتونه عددی بین 0 تا 100 درصد باشه. هر میزان که به 100 نزدیکتر باشه ، شفافتر و نورانی تر هست.

در واقع شما با استفاده از HUE رنگ مورد نظر رو انتخاب میکنید و با استفاده از lightness و saturation با اون بازی میکنید ، تا به رنگ دلخواه خودتون برسید.

حالا اگر بخوایم یک رنگ قرمز خالص درست کنیم ، بصورت زیر میشه :

css-colors10

خروجی بصورت زیر هست :

css-colors11

حالا برای درست کردن یک رنگ قرمز مات میتونین saturation رو کاهش بدین :

css-colors12

خروجی :

css-colors13

برای دزست کردن قرمز تیره ، میتونین lightness رو کم کنید :

css-colors14

خروجی :

css-colors15

 

جلسه بعد ادامه مطلب رو خدمتتون عرض میکنم.

خب دوستان خسته نباشید.

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

موفق باشید. یا علی

comment دیدگاه کاربران
سعید

❓ ❓ ❓
عالی بود

محمد اسفندیاری

موفق باشید دوست عزیز

علی امینی

سلام داداش
ممنون از این مطلب مفیدت؛ تا حالا با hsl کار نکرده بودم. به نظرم اگه فرمت hsla رو هم به این مطلب اضافه میکردی بهتر بود.
با تشکر

محمد اسفندیاری

سلام
در قسمت آخر قرار داده شده
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.