مقدارهای رنگ معتبر CSS

رنگ‌های CSS

رنگ‌ها در CSS می‌توانند با روش‌های زیر مشخص شوند:

  • رنگ‌های هگزادسیمال
  • رنگ‌های هگزادسیمال با شفافیت
  • رنگ‌های RGB
  • رنگ RGBA
  • رنگ HSL
  • رنگ HSLA
  • نام‌های رنگ پیش‌تعریف شده/کلیه مرورگرها
  • با استفاده از currentcolor کلمات کلیدی

رنگ‌های هگزادسیمال

رنگ‌های هگزادسیمال با استفاده از #RRGGBB مشخص کنید، که RR (قرمز)، GG (سبز) و BB (آبی) مقادیر هگزادسیمال تعیین‌کننده اجزا (بخش‌ها) رنگ هستند. همه مقادیر باید بین 00 تا FF باشند.

مثلاً، مقدار #0000ff به رنگ آبی نمایش داده می‌شود، زیرا مقادیر بخش آبی به بالاترین مقدار ممکن (ff) تنظیم شده است و مقادیر دیگر به 00 تنظیم شده‌اند.

مثال

رنگ‌های HEX مختلف را تعریف کنید:

#p1 {background-color: #ff0000;}   /* قرمز */
#p2 {background-color: #00ff00;}   /* سبز */
#p3 {background-color: #0000ff;}   /* آبی */

آزمایش کنید

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

رنگ‌های هگزادسیمال را با استفاده از #RRGGBB مشخص کنید. برای افزایش شفافیت، دو عدد اضافی بین 00 و FF قرار دهید.

مثال

رنگ‌های HEX با شفافیت را تعریف کنید:

#p1a {background-color: #ff000080;}   /* قرمز با شفافیت */
#p2a {background-color: #00ff0080;}   /* سبز با شفافیت */
#p3a {background-color: #0000ff80;}   /* آبی با شفافیت */

آزمایش کنید

رنگ‌های RGB

مقدارهای رنگ RGB توسط توابع rgb()تعریف می‌کند، نحوه استفاده از این تابع به شرح زیر است:

rgb(red, سبز, blue)

هر پارامتر (red, سبز, blueمقدار شدت رنگ می‌تواند عدد صحیح بین 0 تا 255 یا درصدی بین 0% تا 100% باشد.

مثلاً، رنگ rgb(0,0,255) به رنگ آبی نمایش داده می‌شود، زیرا پارامتر blue به بالاترین مقدار ممکن (255) تنظیم شده است و پارامترهای دیگر به 0 تنظیم شده‌اند.

علاوه بر این، موارد زیر رنگ‌های مشابه را تعریف می‌کنند: rgb(0,0,255) و rgb(0%,0%,100%)。

مثال

تعریف رنگ‌های مختلف RGB:

#p1 {background-color: rgb(255, 0, 0);}   /* قرمز */
#p2 {background-color: rgb(0, 255, 0);}   /* سبز */
#p3 {background-color: rgb(0, 0, 255);}   /* آبی */

آزمایش کنید

رنگ RGBA

رنگ RGBA گسترشی از RGB است که دارای کانال آلفا است - شفافیت اشیاء را مشخص می‌کند.

رنگ RGBA از طریق توابع rgba()تعریف می‌کند، نحوه استفاده از این تابع به شرح زیر است:

rgba(red, سبز, blue, alpha)

alpha پارامترها اعداد بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً غیرشفاف) هستند.

مثال

تعریف رنگ‌های مختلف RGB با شفافیت:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* قرمز با شفافیت */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* سبز با شفافیت */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* آبی با شفافیت */

آزمایش کنید

رنگ HSL

HSL به معنای نوایی (hue)، تراکم (saturation) و سطوع (lightness) است - نمودار استوانه‌ای رنگ.

با استفاده از توابع hsl()مقدار رنگ HSL مشخص می‌کند، نحوه استفاده از این تابع به شرح زیر است:

hsl(hue, saturation, lightness)

نوایی درجه‌ای در حلقه رنگ است (از 0 تا 360) - 0 (یا 360) قرمز است، 120 سبز و 240 آبی.

تراکم نیز یک درصد است؛ 0٪ تیرگی و 100٪ رنگ کامل.

سطوع نیز یک درصد است؛ 0٪ سیاه و 100٪ سفید.

مثال

تعریف رنگ‌های مختلف HSL:

#p1 {background-color: hsl(120, 100%, 50%);}   /* سبز */
#p2 {background-color: hsl(120, 100%, 75%);}   /* سبز روشن */
#p3 {background-color: hsl(120, 100%, 25%);}   /* دکل سبز تیره */
#p4 {background-color: hsl(120, 60%, 70%);}    /* سبز نرم */

آزمایش کنید

رنگ HSLA

مقدار رنگ HSLA یک گسترش از مقدار رنگ HSL است که کانال آلفا را نیز دارد - شفافیت شیء را مشخص می‌کند.

مقدار رنگ HSLA از توابع hsla()تعیین می‌کند، نحوه استفاده از این تابع به شرح زیر است:

hsla(hue, saturation, lightness, alpha)

alpha پارامترها اعداد بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً غیرشفاف) هستند.

مثال

تعریف رنگ‌های HSL با شفافیت:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* سبز با شفافیت */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* سبز روشن با شفافیت */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* سبز تیره با شفافیت */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* سبز روشن با شفافیت */

آزمایش کنید

نام‌های رنگ پیش‌تعریف شده/کلیه مرورگرها

در استانداردهای رنگ HTML و CSS، 140 نام رنگ پیش‌تعریف شده وجود دارد.

مثلاً:blue،red،coral،brown و غیره:

مثال

تعریف نام‌های رنگ‌های مختلف:

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}

آزمایش کنید

لیست تمام نام‌های پیش‌تعریف شده را می‌توانید در دفترچه مرجع رنگ‌های ما پیدا کنید.

کلید currentcolor

currentcolor استفاده از مقادیر رنگ color属性 عناصر.

مثال

رنگ لبه <div> عناصر به رنگ آبی خواهد بود، زیرا رنگ متن <div> عناصر آبی است:

#myDIV {
  color: blue; /* رنگ متن آبی */
  border: 10px solid currentcolor; /* رنگ آبی برای لبه */
}

آزمایش کنید