رنگ‌ها (Colors)

تمام روش‌های تعریف رنگ در CSS: نام رنگ، HEX، RGB، RGBA، HSL، HSLA و رنگ‌های مدرن

رنگ در CSS

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

روش‌های تعریف رنگ

روشمثالتوضیح
نام رنگred۱۴۰ رنگ نام‌گذاری‌شده
HEX#ff0000سیستم شانزده‌شانزدهی
RGBrgb(255, 0, 0)قرمز، سبز، آبی
RGBArgba(255, 0, 0, 0.5)RGB با شفافیت
HSLhsl(0, 100%, 50%)رنگ، اشباع، روشنی
HSLAhsla(0, 100%, 50%, 0.5)HSL با شفافیت
currentColorcurrentColorرنگ فعلی متن

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

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

p { color: red; }
    h1 { color: dodgerblue; }
    .box { background-color: coral; }
    .transparent { background-color: transparent; }

رنگ‌های پرکاربرد

نامHEXنمایش
red#ff0000قرمز
green#008000سبز
blue#0000ffآبی
white#ffffffسفید
black#000000مشکی
orange#ffa500نارنجی
gray#808080خاکستری

۲. کدهای HEX (هگزادسیمال)

رایج‌ترین روش در طراحی وب. از ۶ رقم شانزده‌شانزدهی تشکیل شده — دو رقم برای هر رنگ اصلی:

/* #RRGGBB */
    p { color: #ff0000; }  /* قرمز خالص */
    h1 { color: #00ff00; }  /* سبز خالص */
    a { color: #0000ff; }  /* آبی خالص */
    div { background: #3498db; }  /* آبی روشن */

مخفف‌نویسی HEX (Shorthand)

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

/* کامل → مخفف */
    #ff0000 → #f00   /* قرمز */
    #ffffff → #fff   /* سفید */
    #000000 → #000   /* مشکی */
    #aabbcc → #abc   /* خاکستری مایل به آبی */

HEX با شفافیت (۸ رقم)

/* #RRGGBBAA */
    background: #ff000080;  /* قرمز با ۵۰٪ شفافیت */

۳. RGB و RGBA

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

/* RGB — هر کانال ۰ تا ۲۵۵ */
    p { color: rgb(255, 0, 0); }       /* قرمز */
    h1 { color: rgb(0, 0, 0); }        /* مشکی */
    div { background: rgb(52, 152, 219); } /* آبی */

RGBA با شفافیت

پارامتر چهارم (Alpha) بین ۰ (کاملاً شفاف) تا ۱ (کاملاً مات):

/* RGBA — alpha از ۰ تا ۱ */
    .overlay {
        background: rgba(0, 0, 0, 0.5);   /* مشکی نیمه‌شفاف */
    }
    .glass {
        background: rgba(255, 255, 255, 0.2); /* شیشه‌ای */
    }

۴. HSL و HSLA

HSL روشی شهودی‌تر است — بر اساس رنگ (Hue)، اشباع (Saturation) و روشنایی (Lightness):

/* HSL */
    p { color: hsl(0, 100%, 50%); }    /* قرمز */
    h1 { color: hsl(120, 100%, 50%); } /* سبز */
    a { color: hsl(240, 100%, 50%); }  /* آبی */
پارامترمحدودهتوضیح
Hue (رنگ)۰ تا ۳۶۰زاویه روی چرخه رنگ
Saturation (اشباع)۰٪ تا ۱۰۰٪۰٪ خاکستری، ۱۰۰٪ کامل
Lightness (روشنایی)۰٪ تا ۱۰۰٪۰٪ مشکی، ۵۰٪ نرمال، ۱۰۰٪ سفید

چرخه رنگ HSL

Hueرنگ
۰قرمز
۶۰زرد
۱۲۰سبز
۱۸۰فیروزه‌ای
۲۴۰آبی
۳۰۰بنفش
۳۶۰قرمز (یک دور کامل)

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

hex با alpha

background: #ff000080;  /* قرمز ۵۰٪ شفاف */

color-mix()

/* ترکیب دو رنگ */
    background: color-mix(in srgb, red 50%, blue 50%);

color() function

/* فضای رنگی جدید */
    background: color(display-p3 1 0 0);

۶. کلمات کلیدی خاص

کلمهتوضیح
transparentکاملاً شفاف
currentColorرنگ متن فعلی عنصر
inheritرنگ را از والد به ارث ببرد
initialرنگ پیش‌فرض مرورگر

ویژگی‌های مرتبط با رنگ

.element {
        color: #333;              /* رنگ متن */
        background-color: #fff;   /* رنگ پس‌زمینه */
        border-color: #ddd;       /* رنگ حاشیه */
        outline-color: blue;      /* رنگ طرح کلی */
        text-decoration-color: red; /* رنگ خط زیر لینک */
        box-shadow: 0 0 10px rgba(0,0,0,0.3); /* رنگ سایه */
        filter: hue-rotate(90deg);  /* چرخش رنگ */
    }

گرادیانت رنگی

/* گرادیانت خطی */
    .gradient {
        background: linear-gradient(to right, red, blue);
    }
    
    /* گرادیانت شعاعی */
    .radial {
        background: radial-gradient(circle, yellow, red);
    }

بهترین شیوه‌ها

نکات مهم

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

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