رنگ ها در CSS

با نحوه استفاده از رنگ ها در CSS و همینطور نحوه استفاده از نام های رنگی ، شاخص های ارزش RGB ، HEX و HSL آشنا می شوید.

با استفاده از کلمات کلیدی ، یک علامت عملکردی RGB ، یک علامت رشته هگزادسیمال ، و یک علامت عملکردی HSL می توانید رنگ های CSS را روی عناصر HTML تنظیم کنید.

تعریف رنگ ها در CSS

• توصیف یک رنگ در CSS به معنای دادن دستورالعمل هایی است که کامپیوترها می توانند به یک رنگ خاص تبدیل شوند.
• شما می توانید رنگ های CSS را با مدل RGB نشان دهید (اشاره به RED / GREEN / BLUE و زنگ های مربوطه).
• 4 نوع مقدار برای رنگهای CSS وجود دارد:
• نام های رنگی – آبی
• مقادیر RGB – rgb (0 ، 0 ، 250)
• مقادیر HEX – # 0000FF
• مقادیر HSL – hsl (240 ، 90٪ ، 78٪)

کلمات کلیدی رنگی

لیستی از کلمات کلیدی وجود دارد که به نام رنگ موجود اشاره دارد. استفاده از آن ها ساده ترین روش برای تنظیم رنگ ها در CSS و HTML به جای کدهای عددی رنگها است.

تمام آنچه شما باید انجام دهید این است که یک خاصیت یک ظاهر طراحی شده را انتخاب کنید و سپس یک نام رنگی اختصاص دهید که به عنوان یک مقدار عمل کند.

اعلامیه رنگ به حروف کوچک و بزرگ حساس نیست. آبی همان آبی یا آبی است.

نکته: هیچ نام رنگی برای رنگ های منحصر به فرد یا نادر وجود ندارد. کلمات کلیدی مخفف رنگ های استاندارد و ثانویه ، سایه های خاکستری و برخی از ترکیبات رنگ است.

مثال زیر نشان می دهد که یک عنصر <h1> دارای ویژگی پس زمینه است. مقدار رنگ پس زمینه CSS آبی است.

<h1 style="background-color: blue;">
Heading with blue background
</h1>

استفاده از کدهای رنگی

بیان رنگ های RGB به سه روش امکان پذیر است:

• RGB
• RGBA
• هگزادسیمال (در ابتدا با #)

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

RGB و RGBA

RGB یک تابع CSS rgb () است که دارای مقادیر پارامترهای رنگ های قرمز ، سبز و آبی است.

در این مثال ، ما از رنگ های RGB استفاده می کنیم:

#exmpl-b {background-color: rgb(0, 0, 255);}   /* blue */
#exmpl-r {background-color: rgb(255, 0, 0);} /* red */
#exmpl-g {background-color: rgb(0, 255, 0);} /* green */

مثال زیر مقادیر رنگ RGBA را اعمال می کند:

#exmpl-b {background-color: rgba(0, 0, 255, 0.4);}   /* blue with 0.4 opacity */
#exmpl-r {background-color: rgba(255, 0, 0, 0.4);} /* red with 0.4 opacity */
#exmpl-g {background-color: rgba(0, 255, 0, 0.4);} /* green with 0.4 opacity */

توجه: از آنجا که سطح رنگ های CSS 4 ، CSS rgba () همان rgb () است. مرورگرهایی که از استاندارد سطح 4 پشتیبانی می کنند ، این عملکردها را به همین ترتیب تفسیر می کنند.

RGB و RGBA به طور مشابه کار می کنند ، اما RGBA چهارمین پارامتر کدری است.

مقادیر قرمز ، سبز و آبی باید بین 0 تا 255 باشد. به عنوان یک گزینه دیگر ، می توانید مقادیر را با درصدی از 0٪ تا 100٪ بنویسید.

وقتی می خواهید رنگ کاملاً شفاف باشد ، در RGBA مقدار کد 0.0 را بنویسید. برای رنگ های ثابت ، 1.0 را بنویسید. بر حسب درصد ، 0٪ نشان دهنده مقدار 0.0 و 100٪ به 1.0 نشان می دهد.

به عنوان مثال ، کدهای رنگی rgb (0 ، 0 ، 255 ، 0.3) نشان دهنده رنگ آبی است که 30٪ شفاف است.

این مثال از یک عنصر <h1> استفاده می کند و خاصیت یک ظاهر طراحی شده به رنگ پس زمینه را به آن اختصاص می دهد. تنها تفاوت این است که رنگ پس زمینه HTML با استفاده از یک نشانگر مقدار rgb تغییر خواهد کرد.

<h1 style="background-color: rgb(0, 0, 255);">
Heading with blue background
</h1>

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

<h1 style="background-color: rgba(0, 0, 255, 0.5);">
Heading with blue background that is 50% opaque
</h1>

نماد هگزادسیمال

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

این مثال رنگ های HEX را تعریف می کند:

#exmpl-b {background-color: #0000ff;}   /* blue */
#exmpl-r {background-color: #ff0000;} /* red */
#exmpl-g {background-color: #00ff00;} /* green */

توجه: در #RRGGBB ، RR مخفف Red ، GG برای Green و BB برای Blue است. هر یک از آن ها دارای ارزش هگزادسیمال است که بین 00 و FF است.

دو روش برای نمایش کدهای رنگی CSS در قالب هگزادسیمال وجود دارد:

• به عنوان اعداد از 0 تا 255 (0x00 و 0xFF)
• به عنوان اعداد از 0 تا 15 (0x0 و 0xF)

نکته: یک رشته هگزادسیمال همیشه با # شروع می شود و ارقام هگزادسیمال نیز دنبال می شود.

مقادیر هگزادسیمال به حروف کوچک و بزرگ حساس نیستند ، بنابراین # fa0001 همان # FA0001 است. به عنوان مثال ، # 00FF00 سبز است. پارامتر سبز (#RRGGBB) روی بالاترین مقدار (FF) تنظیم شده است و پارامترهای دیگر 00 هستند.

در این مثال ، می بینیم که عنصر <h1> دارای رنگ خاصیت یک ظاهر طراحی شده است. رنگ با استفاده از مقدار هگزادسیمال # 0000FF تعریف می شود. بنابراین ، متن در <h1> آبی خواهد بود.

<h1 style="color: #0000FF;">
Text color of the heading is set to Blue using #0000FF
</h1>

نشانگر HSL

مخفف hue ، اشباع ، و سبک بودن است. مقدار رنگ HSL با hsl (رنگ ، اشباع ، سبک بودن) مشخص شده است.

مثال زیر از مقادیر رنگی HSL استفاده می کند:

#exmpl-pb {background-color: hsl(240, 60%, 70%);}  /* pastel blue */
#exmpl-db {background-color: hsl(240, 100%, 25%);} /* dark blue */
#exmpl-lb {background-color: hsl(240, 100%, 75%);} /* light blue */
#exmpl-b {background-color: hsl(240, 100%, 50%);} /* blue */

توجه: رنگ یک درجه در چرخ رنگ است (از 0 تا 360): 0 (یا 360) قرمز ، 120 سبز ، 240 آبی است. اشباع یک مقدار درصد است: 100٪ تمام رنگ است. شدت رنگ را توصیف می کند.

شما می توانید سبک بودن را با یک پارامتر درصد توصیف کنید: 0٪ تیره (سیاه) و 100٪ سفید است.

نکته: طراحان و گرافیست ها شاخص HSL را دوست دارند زیرا به آنها امکان می دهد تمام جنبه های رنگ CSS را در یک خط تعریف کنند.

مثال زیر از ویژگی سبک background-color استفاده می کند.

نشانگر مقدار hsl (120 ، 100٪ ، 50٪) تن رنگ ، اشباع و سبک بودن را تنظیم می کند.

<h1 style="background-color: hsl(120, 100%, 50%);">
Heading with green background
</h1>

نشانگر HSLA

HSL و HSLA یکسان هستند ، اما HSLA پارامتر دیگری از کدری را می پذیرد.

این مثال از رنگ های HSLA استفاده می کند:

#exmpl-pb {background-color: hsla(240, 60%, 70%, 0.4);} /* pastel blue with 0.4 opacity */
#exmpl-db {background-color: hsla(240, 100%, 25%, 0.4);} /* dark blue with 0.4 opacity */
#exmpl-lb {background-color: hsla(240, 100%, 75%, 0.4);} /* light blue with 0.4 opacity */
#exmpl-b {background-color: hsla(240, 100%, 50%, 0.4);} /* blue with 0.4 opacity */

رنگ HSLA این مقادیر را می پذیرد:

• رنگ
• اشباع
• سبکی
• آلفا

آلفا (کدری) که روی 0 تنظیم شده کاملاً شفاف است ، اگر روی 1 تنظیم شود کاملاً جامد است.

در زیر ، می توانید ببینید که چگونه پارامتر آلفا نحوه درک یک رنگ با همان مقادیر رنگ ، اشباع و سبک را تغییر می دهد.

در مثال زیر خواهید دید که عنصر <h1> دارای پس زمینه سبز روشن است که 50٪ شفاف است.

<h1 style="background-color: hsl(120, 100%, 50%, 0.5);">
Heading with green background that is 50% opaque
</h1>

• نشانگر مقدار hsl (120 ، 100٪ ، 50٪ ، 0.5) به ما می گوید که رنگ سبز است زیرا 120 به عنوان اولین مقدار تعیین شده است.
•   100٪ نشان می دهد که بسیار اشباع / روشن است.
•   50٪ می گوید که این رنگ نه روشن است و نه تیره.
• 0/5 مشخص می کند که نصف نیمه کاره است.

تیرگی رنگ ها در CSS

خاصیت opacity رنگ CSS شفافیت کل عنصر را تنظیم می کند.

مقدار ویژگی opacity باید یک عدد بین 0.0 (کاملاً شفاف) و 1.0 (کاملا مات) باشد.

توجه: با استفاده از انتخابگر hover و میزان کدورت ، می توانید شفافیت تصاویر و رنگ ها را روی ماوس تغییر دهید.

معمولاً استفاده از کدری برای پس زمینه های نیمه شفاف استفاده می شود. در زیر می توانید همان رنگ را با مقادیر تیرگی متفاوت به آن اختصاص دهید.

این مثال به شما نشان می دهد که <h1> دارای پس زمینه و خاصیت کدری است.

<h1 style="background-color: rgb(0, 255, 0); opacity: 0.5;">
Heading with green background that is 50% opaque
</h1>

• نشانگر CSS rgb () رنگ زمینه را تعیین می کند.
• کدری دارای مقدار 0.5 است.
• رنگ فقط به پس زمینه اضافه می شود. متن روی پیش فرض مرورگر تنظیم می شود.
• با این حال ، هر دو عنصر کدری 50٪ خواهند داشت.

نکات مهم رنگ ها در CSS:

• می توانید کدهای رنگی CSS را با استفاده از ابزار Pickeristic ما دریافت کنید. این به شما امکان می دهد رنگ ها را انتخاب کنید ، پالت ایجاد کنید و کدهای رنگی را به طور تصادفی برای خود انتخاب کنید.
• مرورگرهای مدرن از هزاران رنگ پشتیبانی می کنند. بنابراین ، برای اطمینان از اینکه همه مرورگرها آن ها را نمایش می دهند ، نیازی به استفاده از رنگ های ایمن وب نیست.
• HSL امکان تنظیم رنگ ، اشباع و سبک بودن برای عناصر جداگانه را فراهم می کند. بنابراین ، توسعه دهندگان اغلب HSL را برای ایجاد پالت هایی با رنگ های متناسب انتخاب می کنند.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.