पिछले topic में आपने CSS में Selectors के बारे में पढ़ा और समझा , इस topic में हम बात करेंगे कि किसी text के लिए font color या background color कैसे apply करें।


CSS में colors के लिए RGB , HEX , HSL , RGBA, HSLA की कोई भी valid color value assign करके color change कर सकते हैं। या फिर आप direct colors के name भी दे सकते हैं। कुछ colors के नाम इस प्रकार हैं।

indigo
yellow
green
red
goldenrod
greenyellow
rebeccapurple
royalblue
black
rosybrown
violet
lawngreen
lightcoral
lightgreen
orange
lightseagreen
blue
tomato
teal
pink
peru
darkorchid
forestgreen
gold
hotpink
khaki
chartreuse
silver
aqua
powderblue

Difference between rbg, rgba, hls, hlsa

  1. decimal color

    decimal में आप decimal value 0 - 255 enter कर सकते हैं। इस value को आपको hash # के साथ लिखना है। Example : #234

  2. Hexa-Decimal color

    hexa-decimal में आप 6 digits का hexadecimal value पास कर सकते हैं। जिसमे number 0 to 9 और a to f mix कर सकते हैं। Example : #2a3b4c

  3. rgb color

    rgb का मतलब red, green, blue होता है। जिसमे आप decimal value 0-255 enter कर सकते हैं। Example : rgb(123,234,211)

  4. rgba color

    rgba में rgb का मतलब red, green, blue और a का मतलब opacity होता है। Opacity की value min .1 से max 1 के बीच होती है। Example : rgb(123,234,211, .3)

  5. hls color

    hls का mtlb hue, saturation, and lightness होता है। इसमें 3 values pass की जाती हैं , color , saturation, and lightness. Example : hsl(120, 77%, 38%)

  6. hlsa color

    hlsa में hls का mtlb hue, saturation, and lightness होता है। और a का मतलब opacity होता है। Example : hsla(64, 81%, 49%, 0.1)

CSS Text Color

CSS में किसी भी text का font color change करने के लिए color : value; property का use किया जाता है , value में आप RGB , HEX , HSL , RGBA, HSLA में से किस भी type की valid color value provide कर सकते हैं।

CSS Text Color Example
Copy FullscreenClose Fullscreen Run
<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS TEXT Color Example</title>
  </head>
  <body>
    <h2 style="color: blue;">Put Direct Color Name</h2>
    <h2 style="color: #199;">Decimal Color Name</h2>
    <h2 style="color: #e93772;">Hexa Decimal Color</h2>
    <h2 style="color: rgb(255, 99, 71);">RGB Color</h2>
    <h2 style="color: rgba(166, 37, 184, 0.2);">Hexa Decimal Color</h2>
    <h2 style="color: hsl(120, 77%, 38%);">HSL Color</h2>
    <h2 style="color: hsla(64, 81%, 49%, 0.1)">HSLA Color</h2>
  </body>
</html>

CSS Background Color

Background color change करने के लिए background-color property का use किया जाता है।

CSS Background Color Example
Copy FullscreenClose Fullscreen Run
<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Background Color Example</title>
  </head>
  <body>
    <h2 style="background-color: blue;">Put Direct Color Name</h2>
    <h2 style="background-color: #199;">Decimal Color Name</h2>
    <h2 style="background-color: #e93772;">Hexa Decimal Color</h2>
    <h2 style="background-color: rgb(255, 99, 71);">RGB Color</h2>
    <h2 style="background-color: rgba(166, 37, 184, 0.2);">Hexa Decimal Color</h2>
    <h2 style="background-color: hsl(120, 77%, 38%);">HSL Color</h2>
    <h2 style="background-color: hsla(64, 81%, 49%, 0.1)">HSLA Color</h2>
  </body>
</html>

Related Topics :

Rahul Kumar

Rahul Kumar

Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)

Get connected with me. :) LinkedIn Twitter Instagram Facebook

b2eprogrammers