رنگ‌ها در HTML

سیستم‌های مختلف رنگ در HTML: نام، RGB، HEX و HSL

رنگ‌ها در HTML

HTML چند روش مختلف برای مشخص کردن رنگ ارائه می‌دهد. رنگ‌ها می‌توانند برای متن، پس‌زمینه، حاشیه و سایر عناصر استفاده شوند.

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

ساده‌ترین روش استفاده از نام انگلیسی رنگ‌ها است:

<p style="color: red;">متن قرمز</p>
<p style="color: blue;">متن آبی</p>
<p style="color: green;">متن سبز</p>
<p style="color: orange;">متن نارنجی</p>

۱۴۰ نام رنگ استاندارد در HTML وجود دارد.

۲. رنگ‌های RGB

RGB مخفف Red, Green, Blue است. هر رنگ از ترکیب سه رنگ اصلی با مقادیر ۰ تا ۲۵۵ ساخته می‌شود:

rgb(red, green, blue)
رنگمقدار RGBنتیجه
قرمزrgb(255, 0, 0)متن
سبزrgb(0, 255, 0)متن
آبیrgb(0, 0, 255)متن
سفیدrgb(255, 255, 255)متن
سیاهrgb(0, 0, 0)متن

۳. رنگ‌های RGBA (با شفافیت)

RGBA نسخه RGB با پارامتر آلفا (شفافیت) است:

rgba(red, green, blue, alpha)

پارامتر alpha بین ۰ (شفاف) تا ۱ (کاملاً opaque) است:

rgba(255, 0, 0, 0.5)  /* قرمز نیمه شفاف */
rgba(0, 0, 255, 0.3)  /* آبی ۳۰٪ شفاف */

۴. رنگ‌های HEX

HEX (Hexadecimal) رایج‌ترین روش برای مشخص کردن رنگ است:

#RRGGBB

هر جفت رقم نشان‌دهنده مقدار RGB به صورت hexadecimal است:

رنگRGBHEX
قرمزrgb(255, 0, 0)#FF0000
سبزrgb(0, 255, 0)#00FF00
آبیrgb(0, 0, 255)#0000FF
سفیدrgb(255, 255, 255)#FFFFFF
سیاهrgb(0, 0, 0)#000000

می‌توان از نسخه کوتاه ۳ رقمی هم استفاده کرد: #F00 = #FF0000

۵. رنگ‌های HSL

HSL مخفف Hue, Saturation, Lightness است:

hsl(hue, saturation%, lightness%)
رنگمقدار HSL
قرمزhsl(0, 100%, 50%)
سبزhsl(120, 100%, 50%)
آبیhsl(240, 100%, 50%)
خاکستریhsl(0, 0%, 50%)

۶. رنگ‌های HSLA (با شفافیت)

مانند RGBA، HSLA هم پارامتر آلفا دارد:

hsla(hue, saturation%, lightness%, alpha)

مقایسه سیستم‌های رنگ

سیستممزایامعایب
نامساده، خوانامحدود (۱۴۰ رنگ)
RGBدقیق، استانداردکمی طولانی
HEXکوتاه، رایجخوانایی کم
HSLتنظیم آسانکمتر شناخته‌شده

نکات مهم

این مبحث بخشی از دوره آموزش کامل HTML است.

ابزارهای مرتبط