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 किए जाते हैं।
रंग के प्रकारों की सूची है :
- Text Color
- Background Color
- Border Color
- 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 में टेक्स्ट कलर :
<!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>
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>
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>
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>
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>
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>
#ff0000
#3cb371
HTML में HSL कलर कोड :
HSL का मतलब होता है hue, Saturation, lightness यह कुछ इस form में होता हैं :
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>
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>
0 Comments