رنگ ها در HTML

رنگ‌ها در HTML

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

 نام رنگ‌ها (Color Names)

در HTML می‌توان رنگ را با استفاده از یک نام رنگ تعریف کرد، مانند:

• Tomato

• Orange

• DodgerBlue

• MediumSeaGreen

• Gray

• SlateBlue

• Violet

• LightGray

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

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

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

کد نمونه

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

 رنگ متن (Text Color)

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

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

کد نمونه

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

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

همچنین می‌توانید رنگ حاشیه‌ها را مشخص کنید.

کد نمونه

```html
<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>
```

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

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

• ✅ مقادیر RGB

• ✅ مقادیر HEX

• ✅ مقادیر HSL

• ✅ مقادیر RGBA (شامل شفافیت)

• ✅ مقادیر HSLA (شامل شفافیت)

⬇️ سه عنصر <div> زیر، با استفاده از مقادیر مختلف رنگ پس‌زمینه دارند:

• rgb(255, 99, 71)

• #ff6347

• hsl(9, 100%, 64%)

⬇️ دو عنصر دیگر دارای شفافیت ۵۰٪ هستند:

• rgba(255, 99, 71, 0.5)

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

💻 کد نمونه

```html
<h1 style="background-color: rgb(255, 99, 71);">
    ...
</h1>
<h1 style="background-color: #ff6347;">
    ...
</h1>
<h1 style="background-color: hsl(9, 100%, 64%);">
    ...
</h1>

<h1 style="background-color: rgba(255, 99, 71, 0.5);">
    ...
</h1>
<h1 style="background-color: hsla(9, 100%, 64%, 0.5);">
    ...
</h1>
```