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

- visibility ۴ mode_comment

در این مطلب میخوام توضیحات کلی در مورد انواع مختلف سیستم رنگ در CSS رو خدمتتون معرفی کنم و اونارو توضیح بدم. شاید شما با بیشتر اونا آشنا باشید ، ولی چیزای جدیدی هم یاد خواهید گرفت.

مواردی که به اونا اشاره خواهد شد :

  1. کدهای هگزادسیمال ( در مبنای 16 )
  2. RGB
  3. RGBA
  4. HSL
  5. HSLA
  6. کلمه های کلیدی دیگر

css-colors

1. کدهای هگزادسیمال ( در مبنای 16 ) :

برای شروع یک مثال میزنم :

نتیجه این مورد در خروجی به شکل زیر هست :

css-colors1

میبینید که یک رنگ سیاه تولید شده و در خروجی نمایش داده شد. کلا هگزادسیمال یک روش برای مشخص کردن رنگ هست که مثلا میگیم اینقد قرمز و سبز و آبی رو با هم مخلوط کن و نتیجه رو به ما برگردون. نحوه مقدار دادن در این مدل در مبنای 16 هست ، بخاطر همین بهش میگن هگزادسیمال. عددهایی که ما در روزمره از اونا استفاده میکنیم ، در مبنای ده هستن و به اونا دسیمال گفته میشه.

اگر ریاضی تا حدی بلد باشید ، حتما با مبناها آشنایی کمی دارید ، پس باید بدونید که در مبنای 16 میتونن عددهای 0 تا 15 وجود داشته باشند. همونطور که در مبنای 10 ، عددهای 0 تا 9 وجود دارن. در هگزا دسیمال عددهای 10 تا 15 رو به ترتیب با A و B و C و D و E و F نمایش میدن. کوچک یا بزرگ بودن حروف فرقی نداره.

پس وقتی میگیم F یعنی 15 و بیشترین مقدار هست. یک کد هگزا دسیمال استاندارد با هش ( # ) شروع میشه و از 6 کاراکتر هم تشکیل شده.

  • مقدار قرمز بودن بوسیله 2 کاراکتر اول مشخص میشه
  • مقدار سبز بودن بوسیله 2 کاراکتر دوم
  • مقدار آبی بودن بوسیله 2 کاراکتر آخر

اگر بجای دو کارکتر 00 گذاشتیم ، یعنی کمترین مقدار موجود که همون 0 در مبنای 10 میشه و یعنی اینکه هیچ مقداری از اون رنگ مورد نظر رو در رنگ نهایی مخلوط نکن. اگر بجای دو کارکتر FF بزاریم بمعنای بیشترین مقدار هست که همون 255 در مبنای 10 خواهد بود.

در مثال بالا نوشتیم #000000. یعنی نه قرمز میخوایم ، نه سبز و نه آبی. پس در خروجی سیاه نمایش داده میشه. بصورت زیر :

css-colors

حالا بنظرتون اگه یک رنگ آبی بخوایم باید چکار کنیم؟

میتونیم دو رقم آخر رو که مربوط به رنگ آبی هستن رو ، برابر با FF قرار بدیم. بصورت زیر :

css-colors3

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

css-colors4

خروجی بصورت زیر خواهد بود :

css-colors5

میبینید که برای قرمز و آبی مقادیر 80 رو قرار دادیم. اگر 80 رو که در مبنای 16 هست ، به مبنای 10 تبدیل کنیم ، برابر با 128 خواهد شد. میدونیم که بیشترین مقدار 255 هست ، پس یعنی 128 تا از 255 برداشتیم ، یعنی نصف.

همونطور که قبلا گفتم حروف بزرگ با حروف کوچک هیچ فرقی ندارن. یعنی #ffffff با #FFFFFF برابر هست. همچنین در روش هگزادسیمال اگر شرایط خاصی برقرار باشه ، میتونین خلاصه نویسی کنید. شرطش اینه که ، هر زمان دو کاراکتر هر رنگ با هم برابر بود ، میتونیم بجای اونا یکی قرار داد. یعنی #FFFFFF رو میشه بصورت #FFF نوشت و #DD00AA رو میشه بصورت #D0A نوشت و بشکل 3 کاراکتر در آورد.

2. RGB :

این روش همون کار روش قبلی رو انجام میده ولی تفاوت کلیش در این هست که در مبنای 10 هست و از اونجایی که ما بیشتر از مبنای 10 استفاده میکنیم ، این روش میتونه طرفدار بیشتری داشته باشه.

مانند گذشته با یک مثال بحث رو جلو میبریم :

نتیجه در خروجی :

css-colors1

همونطور که میبینید نتیجه خروجی سیاه شد. فرمت کلی این روش بصورت زیر هست :

میبینید که مانند گذشته بترتیب باید مقادیر قرمز ، سبز و آبی رو مشخص کنید. در اینجا میتونین از 0 که حداقل مقدار هست ، تا 255 که حداکثر مقدار هست ، برای هر رنگ استفاده کنید. در مثال بالا برای هر سه رنگ مقدار 0 رو در نظر گرفتیم و نتیجه رنگ سیاه شد.

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

css-colors6

در جلسه بعد ادامه میدیم.

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

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

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

comment دیدگاه کاربران
وحید صالحی

ممنون محمد جان مطلب بسیار خوبیه…

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

خواهش میکنم داش وحید

maxsoft

ممنون خیلی واضح بود
حیف که اشتراک گذاری صفحه نداره که تو پلاس به اشتراکش میزاشتم

خیلی کاربردیه
نمیدونم چرا زیر پستای این سایت نیس آخه!

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

سلام هستا
گوگل ، فیس بوک ، لینکدین و تویتر میتونین share کنید
در پایین هر مطلب قرار داره

نیاز به لاگین

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