CSS Colors

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

CSS از ۱۴۰ نام رنگ استاندارد پشتیبانی می‌کند، مانند:

color: red; /* قرمز */
color: blue; /* آبی */
color: lightgreen; /* سبز روشن */
color: tomato; /* گوجه‌ای */

۲. رنگ‌های هگزادسیمال (Hex)

رنگ‌ها را با کدهای شش‌رقمی یا سه‌رقمی تعریف می‌کنید:

color: #FF0000; /* قرمز */
color: #00FF00; /* سبز */
color: #0000FF; /* آبی */
color: #0F0; /* معادل کوتاه شده برای #00FF00 */

۳. رنگ‌های RGB

ترکیب قرمز، سبز و آبی با عددهای بین ۰ تا ۲۵۵:

color: rgb(255, 0, 0); /* قرمز */
color: rgb(0, 255, 0); /* سبز */
color: rgb(0, 0, 255); /* آبی */

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

مانند RGB است اما شامل مقدار شفافیت (alpha) بین ۰ تا ۱ هم می‌شود:

color: rgba(255, 0, 0, 0.5); /* قرمز نیمه‌شفاف */

۵. رنگ‌های HSL

ترکیب رنگ بر اساس Hue (فام)، Saturation (اشباع) و Lightness (روشنایی):

color: hsl(120, 100%, 50%); /* سبز روشن */
color: hsl(0, 100%, 50%); /* قرمز */

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

همانند HSL است، اما شامل شفافیت نیز می‌باشد:

color: hsla(240, 100%, 50%, 0.3); /* آبی نیمه‌شفاف */

نکته اضافی: استفاده از متغیرهای CSS برای رنگ

می‌توانید رنگ‌ها را به صورت متغیر تعریف و استفاده کنید: