HTML COLORS 


HTML Colors क्या है?

Website में colors का होना बहुत ही Important है क्योकि इससे Webpage देखने में सुंदर और Attractive लगता है।

Colors के बिना Webpage अधुरा है।

यानी की आप ऐसा मान सकते हो की colors के बिना Website की कल्पना भी नहीं की जा सकती है।

आज कल हर Website को Attractive बनाने में colors का बहुत बड़ा हाथ होता है और colors का इस्तेमाल हर website में किया जाता है।

HTML रंग पूर्वनिर्धारित रंग नामों के साथ या RGB, HEX, HSL, RGBA या HSLA Values के साथ Specify किए जाते हैं।

HTML supports 140 standard color names.

रंग के प्रकारों की सूची है :

  1. Text Color
  2. Background Color
  3. Border Color
  4. Color Values : 

                      RGB Color Code in HTML
                      RGBA Color Code in HTML
                      HEX Color in HTML
                      HSL Color Code in HTML
                      HSLA Color Code in HTML


HTML में टेक्स्ट कलर :

Text Color द्वारा text के color को change किया जाता है। 
Text का default color black होता है, क्योकि यह white page में आसानी से दिख जाता हैं।

उदाहरण :

<!DOCTYPE html>

<html>

<body>

       <h3 style="color: Tomato;">Tech By Antim Shinde</h3>

       <p style="color: DodgerBlue;">Welcome to Tech By Antim Shinde</p>

</body>

</html>

Output :

Tech By Antim Shinde

Welcome to Tech By Antim Shinde


HTML में Background कलर :

आप HTML Elements के लिए Background Color सेट कर सकते हैं।

Background का default color white होता हैं। 

इसके change करने के लिए आपको background-color property का use करना होगा।

यह भी एक CSS property हैं।

उदाहरण :

<!DOCTYPE html>

<html>

<body>

       <h3 style="background-color: Tomato;">Tech By Antim Shinde</h3>

       <p style="background-color: DodgerBlue;">Welcome to Tech By Antim Shinde</p>

</body>

</html>

Output :

Tech By Antim Shinde

Welcome to Tech By Antim Shinde


HTML में Border कलर :

आप style attribute के द्वारा border के color को define कर सकते हो।

HTML में border को define border style से किया जता है।

Border की value अलग-अलग हो सकती है जैसे की solid, dotted, dashed और double।

हम border की width को भी set कर सकते हैं। यह maximum time pixels में होती हैं।

उदाहरण :

<!DOCTYPE html>

<html>

<body>

       <h3 style="border: 2px solid Tomato;">Tech By Antim Shinde</h3>

       <p style="border: 2px solid DodgerBlue;">Welcome to Tech By Antim Shinde</p>

</body>

</html>

Output :

Tech By Antim Shinde

Welcome to Tech By Antim Shinde


HTML में RGB कलर कोड :

RGB का मतलब हैं red green blue, इन्ही तीनों की मद्त से color को change किया जाता हैं।

इन तीनों color की intensity 0 से 255 के बीच में होती हैं।

RGB को इस प्रकार से Define किया जाता हैं :

                      rgb(0, 0, 0) 

जब सभी red, green, blue जीरो हों तो color black होता हैं।

उदाहरण :

<!DOCTYPE html>

<html>

<body>

       <h1 style=”background-color:rgb(255,0,0);”>rgb(255,0,0)</h1>

       <h1 style=”background-color:rgb(0,0,0);”> rgb(0,0,0)</h1>

       <h1 style=”background-color:rgb(0,0,255);”> rgb(0,0,255)</h1>

</body>

</html>

Output :

rgb(255, 99, 71)

rgb(0,0,0)

rgb(0,0,255)


HTML में RGBA कलर कोड :

यह rgb का upgraded version है। इसमें last के A का मतलब alpha channel हैं।

rgba(red, green, blue, alpha) जिसके जरिये आप color को transparence कर सकते हो।

यह ( 0.0) से शरू होकर (1.0) तक हो सकती हैं।

उदाहरण  :

<!DOCTYPE html>

<html>

<body>

       <h1 style="background-color: rgba(255, 99, 71, 0.5);">Tech By Antim Shinde</h1>

       <h1 style="background-color: rgba(0,0,0, 0.2);">Tech By Antim Shinde</h1>

       <h1 style="background-color: rgba(0,0,255, 0.7);">Tech By Antim Shinde</h1>

</body>

</html>

Output :

Tech By Antim Shinde

Tech By Antim Shinde

Tech By Antim Shinde


HTML में HEX कलर कोड :

HTML में hex से भी color को define किया जाता हैं।

Hex का मतलब होता है hexadecimal value।

यह कुछ इस प्रकार की होती हैं : #rrggbb

यहां पर rr का मतलब red और gg का मतलब green और bb का मतलब blue होता हैं।

Hex value 00 से शरू होकर ff तक खतम होती हैं।

उदाहरण  :

<!DOCTYPE html>

<html>

<body>

       <h1 style="background-color: mediumseagreen;">#ff0000</h1>

      <h1 style="background-color: red;">#3cb371</h1>

</body>

</html>

Output :

#ff0000

#3cb371


HTML में HSL कलर कोड :

HSL का मतलब होता है hue, Saturation, lightness यह कुछ इस form में होता हैं :

hsl(hue, saturation, lightness)

Hue color की degree को define करता है। यह 0 से 360 तक होती हैं।

Hue में 0 का मतलब red और 120 का मतलब green तथा 240 का मतलब blue हैं।

Saturation हमेशा percentage में होती है और यह 0% से 100% तक हो सकती हैं।

Saturation में 0 का मतलब gray की shade और 100% का मतलब वही color से हैं।

Lightness भी प्रतिशत में होती है 0% मतलब black, 50% यानि black white कोइ भी नहीं, 100% यानि white।

उदाहरण  :

<!DOCTYPE html>

<html>

<body>

       <h1 style=”background-color: hsl(0,100%,50%);”>hsl(0,100%,50%)</h1>

       <h1 style=”background-color: hsl(240,100%,50%);”> hsl(240,100%,50%)</h1>

</body>

</html>

Output :

hsl(0,100%,50%)

hsl(240,100%,50%)


HTML में HSLA कलर कोड :

यह HSL का upgraded version है। यह में extra feature alpha का हैं।

जिसके जरिये आप color को transparence कर सकते हो।

यह ( 0.0) से शरू होकर (1.0) तक हो सकती हैं।

इसे कुछ इस प्रकार से define किया जाता हैं :

                                hsla(hue, saturation, lightness, alpha)

उदाहरण  :

<!DOCTYPE html>

<html>

<body>

       <h1 style=”background-color: hsl(0,100%,50%);”>hsl(0,100%,50%)</h1>

       <h1 style=”background-color: hsl(240,100%,50%);”> hsl(240,100%,50%)</h1>

</body>

</html>

Output :

hsla(240,100%,50%)

hsla(0, 100%, 50%, 0.5)