سی ای اس رنگ

CSS کا سپورٹ 140 سے زیادہ رنگ کے نام، نیز چودہ رقمی کا مطلب، RGB کا مطلب، RGBA کا مطلب، HSL کا مطلب، HSLA کا مطلب اور شفافیت

RGBA رنگ

RGBA رنگ کا مطلب یہ ہے: RGB رنگ کا مطلب کا توسیع، جس میں آلفا چینل شامل ہے - جو رنگ کی شفافیت کو طہر دیتا ہے。

RGBA رنگ کا مطلب یہ ہے: rgba(لال, سبز, نیلا, آلفا) آلفا پارامتر 0.0 (کاملاً شفاف) اور 1.0 (کاملاً غیر شفاف) کے درمیان کا عدد ہوتی ہے。

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

درجہ بندی کا مثال RGBA رنگ تعریف کرتا ہے:

مثال

#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(hue, saturation, lightness);

باریقی کُلک بُلندی کُلک چکر پر کُنوکشن (درجہ) ہوتی ہے (0 سے 360 تک):

  • 0 (یا 360) لال ہوتی ہے
  • 120 سبز ہوتی ہے
  • 240 نیلا ہوتی ہے

باریقی اُمتیازی ساتُریتی بُلندی بھی ہوتی ہے: 100٪ پورا رنگ ہوتی ہے。

باریقی اُمتیازی بُلندی بھی ہوتی ہے: 0٪ تاریک (سوراج) ہوتی ہے، اور 100٪ وُسطی ہوتی ہے。

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

درج ذیل مثال مختلف 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(hue, saturation, lightness, alpha)، جس میں alpha پارامتر غیر شفافیت کا معیار ہے۔ alpha پارامتر 0.0 (پورا شفاف) اور 1.0 (پورا غیر شفاف) کے درمیان کا عدد ہوتا ہے۔

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

درج ذیل مثال مختلف HSLA رنگوں کا تعریف کرتا ہے:

مثال

#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);}   /* غیر شفاف کا ملنامائی زرد */

آزمایش کنید

نمائش غیر شفافیت

CSS opacity پورا علامت غیر شفاف ہو سکتا ہے (پس منظر اور متن دونوں غیر شفاف/شفاف رہ سکتے ہیں).

opacity کیفیت والا بہتر ہونا چاہئیے 0.0 (پورا شفاف) اور 1.0 (پورا غیر شفاف) کے درمیان کا عدد.

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

لطفاً توجه داشته باشید که متن بالا نیز شفاف/کمرنگ خواهد بود!

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

مثال

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* با شفافیت کمرنگ قرمز */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* با شفافیت کمرنگ سبز */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* با شفافیت کمرنگ آبی */

آزمایش کنید