رنگ‌ها در CSS

در CSS، رنگ‌ها با استفاده از نام‌های از پیش تعریف‌شده یا مقادیر RGB, HEX, HSL, RGBA و HSLA مشخص می‌شوند.

نام‌های رنگ در CSS

در CSS، یک رنگ را می‌توان با استفاده از نام‌های از پیش تعریف‌شده مشخص کرد:

• Tomato

• Orange

• DodgerBlue

• MediumSeaGreen

• Gray

• SlateBlue

• Violet

• LightGray

CSS و HTML از ۱۴۰ نام رنگ استاندارد پشتیبانی می‌کنند.

رنگ پس‌زمینه در CSS (Background Color)

شما می‌توانید رنگ پس‌زمینه را برای عناصر HTML تنظیم کنید.

توضیحات:

در کدهای زیر، رنگ پس‌زمینه یک تگ <h1> و یک تگ <p> به ترتیب با نام‌های رنگ DodgerBlue و Tomato تنظیم شده است.

مثال:

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

رنگ متن در CSS (Text Color)

شما می‌توانید رنگ متن را تنظیم کنید.

 توضیحات:

 در این نمونه، رنگ متن برای تگ <h1> و دو تگ <p> با استفاده از نام‌های رنگ Tomato، DodgerBlue و MediumSeaGreen مشخص شده است. 

مثال: 

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

رنگ حاشیه در CSS (Border Color) 

شما می‌توانید رنگ حاشیه‌ها (borders) را تنظیم کنید.

توضیحات:

در کدهای زیر، برای سه تگ <h1> مختلف، یک حاشیه با ضخامت 2px و از نوع solid تعریف شده که رنگ آن به ترتیب Tomato، DodgerBlue و Violet است.

مثال:

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

مقادیر رنگ در CSS (Color Values)

در CSS، رنگ‌ها همچنین می‌توانند با استفاده از مقادیر RGB, HEX, HSL, RGBA و HSLA مشخص شوند.

• معادل نام رنگ "Tomato":

  • rgb(255, 99, 71)

  • #ff6347

  • hsl(9, 100%, 64%)

• معادل نام رنگ "Tomato"، اما با ۵۰٪ شفافیت (transparency):

  • rgba(255, 99, 71, 0.5)

  • hsla(9, 100%, 64%, 0.5)

توضیحات:

در نمونه کد زیر، رنگ پس‌زمینه تگ‌های <h1> با استفاده از فرمت‌های مختلف مقداردهی رنگ تنظیم شده است. سه مورد اول یک رنگ ثابت را نمایش می‌دهند و دو مورد آخر همان رنگ را با ۵۰٪ شفافیت اعمال می‌کنند.

 مثال: