CSS Legal Color Values

🎨 مقادیر مجاز رنگ در CSS

در CSS، رنگ‌ها برای تعیین رنگ متن، پس‌زمینه، حاشیه و سایر بخش‌های عناصر استفاده می‌شوند. چندین روش قانونی برای نوشتن رنگ وجود دارد 👇

CSS از ۱۴۷ رنگ نام‌گذاری‌شده پشتیبانی می‌کند (مثل red، blue، green و غیره).

color: red;
background-color: lightblue;
border-color: mediumseagreen;

📘 نمونه‌هایی از رنگ‌های نامی:
black, white, gray, silver, maroon, olive, lime, aqua, teal, navy, fuchsia, purple و …

در این روش رنگ با یک مقدار هگزادسیمال (Hexadecimal) مشخص می‌شود که با # شروع می‌شود و شامل 3، 4، 6 یا 8 رقم است.

color: #ff6347; /* رنگ گوجه‌ای (tomato) */
background-color: #00000080; /* سیاه نیمه‌شفاف */

در این روش با rgb() یا rgba() رنگ بر اساس سه مؤلفه قرمز (Red)، سبز (Green) و آبی (Blue) تعیین می‌شود.

color: rgb(255, 0, 0); /* قرمز */
color: rgb(100%, 0%, 0%); /* قرمز (بر حسب درصد) */
color: rgba(255, 0, 0, 0.5); /* قرمز نیمه‌شفاف */

تابع hsl() یا hsla() از Hue (فام)، Saturation (اشباع) و Lightness (روشنی) استفاده می‌کند.

color: hsl(120, 100%, 25%); /* سبز تیره */
color: hsla(240, 100%, 50%, 0.5); /* آبی نیمه‌شفاف */

hwb() از Hue (فام)، Whiteness (سفیدی)، Blackness (سیاهی) و Alpha (شفافیت) استفاده می‌کند.

color: hwb(200 20% 40%);
color: hwb(200 20% 40% / 0.8); /* ۸۰٪ شفافیت */

از رنگ فعلی عنصر برای ویژگی دیگر (مثل حاشیه) استفاده می‌کند.

border-color: currentColor;

نمایانگر یک رنگ کاملاً شفاف است (معادل rgba(0,0,0,0)).

background-color: transparent;

برای هماهنگی با رنگ‌های سیستم عامل استفاده می‌شود، اما معمولاً دیگر توصیه نمی‌شود.

color: ButtonText;
background-color: ButtonFace;

نوع	مثال	توضیح
رنگ نامی	`color: red;`	۱۴۷ رنگ از پیش تعریف‌شده
HEX	`#ff0000`, `#f00`, `#ff000080`	پشتیبانی از شفافیت
RGB(A)	`rgb(255,0,0)`, `rgba(255,0,0,0.5)`	قرمز، سبز، آبی، آلفا
HSL(A)	`hsl(0,100%,50%)`, `hsla(0,100%,50%,0.3)`	فام، اشباع، روشنایی
HWB	`hwb(0 0% 0%)`	فام، سفیدی، سیاهی
currentColor	`color: currentColor;`	از رنگ فعلی عنصر استفاده می‌کند
transparent	`background: transparent;`	کاملاً شفاف