رنگ ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

CSS بیشتر از ۱۴۰ نام رنگ، مقادیر HEX، مقادیر RGB، مقادیر RGBA، مقادیر HSL، مقادیر HSLA و opacity (به فارسی: کدری) را پشتیبانی می‌کند.[۱]

رنگ های RGBA

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

یک مقدار رنگ RGBA به صورت زیر مشخص می‌شود: rgba(red, green, blue, alpha). پارامتر آلفا عددی بین ۰٫۰ (تمام شفاف) و ۱٫۰ (تمام کدر) است.

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

مثال
1 #p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
2 #p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
3 #p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */


رنگ های HSL

HSL (سرواژهٔ: lightness (به فارسی: روشنی)، saturation (به فارسی: اشباع رنگ)، hue (به فارسی: رنگ)) است.

یک مقدار رنگ HSL به صورت زیر تعریف می‌شود: hsl(رنگ، میزان اشباع، میزان روشنی) ↔ hsl(hue, saturation, lightness).

  1. hue درجه‌ای از رنگ (به انگلیسی: color) است (از ۰ تا ۳۶۰)
    • ۰ (یا ۳۶۰) قرمز است
    • ۱۲۰ سبز است
    • ۲۴۰ آبی است
  2. اشباع، مقداری بر حسب درصد است: ۱۰۰٪ رنگ کامل است.
  3. میزان روشنایی نیز بر حسب درصد است؛ ۰٪ تیره (سیاه) و ۱۰۰٪ سفید است.

مثال زیر مقادیر رنگ hsl متفاوت را تعریف می‌کند:

مثال
1 #p1 {background-color: hsl(120, 100%, 50%);}  /* green */
2 #p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
3 #p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
4 #p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */


رنگ های HSLA

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

یک مقدار رنگ HSLA اینگونه تعریف می‌شود: hsla(رنگ، میزان اشباع رنگ، میزان روشنایی، میزان آلفا) ↔ hsla(hue, saturation, lightness, alpha). که پارامتر آلفا میزان کدری را تعریف می‌کند. پارامتر آلفا عددی بین ۰٫۰ (تمام شفاف) و ۱٫۰ (تمام کدر) است.

مثال زیر مقادیر رنگ HSLA متفاوت را تعریف می‌کند:

مثال
1 #p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
2 #p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
3 #p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
4 #p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */


Opacity (به فارسی: میزان کدری)

ویژگی opacity میزان کدری را برای کل عنصر تنظیم می‌کند (هم رنگ پس زمینه و هم متن کدر/شفاف خواهند بود)

مقدار ویژگی opacity می‌بایست عددی بین ۰٫۰ (تمام شفاف) و ۱٫۰ (کاملاً کدر) باشد.

توجه داشته باشید که متن بالا هم شفاف/کدر خواهد بود.

مثال زیر عناصر متفاوت را با opacity را نشان می‌دهد:

مثال
1 #p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
2 #p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
3 #p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */


خود را با تمرینها امتحان کنید!


منابع آموزشی