CSS Colors

CSS Colors का उपयोग HTML elements के text, background, border और दूसरे parts को रंग देने के लिए किया जाता है। CSS में colors define करने के कई तरीके होते हैं।

CSS में Color कहां-कहां use होते हैं?

• color → text color
• background-color → background color
• border-color → border color

Example:

p {
  color: red;
}

CSS Color Names

CSS में predefined color names available होते हैं।

h1 {
  color: blue;
}

p {
  background-color: yellow;
}

Common color names:

• red
• blue
• green
• black
• white
• yellow
• gray

CSS HEX Colors

HEX Color # से start होता है और 6 characters का होता है।

Format:

#RRGGBB

Example:

p {
  color: #ff0000;
}

यह red color को represent करता है।

CSS RGB Colors

RGB का मतलब होता है Red, Green, Blue।
Value 0 से 255 के बीच होती है।

h1 {
  color: rgb(0, 0, 255);
}

यह blue color देगा।

CSS RGBA Colors

RGBA RGB जैसा ही होता है, लेकिन इसमें alpha value होती है जो transparency control करती है।

div {
  background-color: rgba(255, 0, 0, 0.5);
}

Alpha value:

• 0 → fully transparent
• 1 → fully visible

CSS HSL Colors

HSL का मतलब:

• Hue
• Saturation
• Lightness

p {
  color: hsl(120, 100%, 50%);
}

CSS HSLA Colors

HSLA में alpha value add होती है।

div {
  background-color: hsla(240, 100%, 50%, 0.3);
}

Background Color Example

body {
  background-color: lightgray;
}

पूरे page का background light gray हो जाएगा।

Text Color Example

p {
  color: green;
}

Border Color Example

div {
  border: 2px solid red;
}

Transparent Color

Transparent color के लिए transparent keyword use किया जाता है।

div {
  background-color: transparent;
}

CSS Color Best Practices

• Readable colors use करें
• Text और background में proper contrast रखें
• Too bright colors avoid करें

Summary

• CSS colors text, background और border के लिए use होते हैं
• Color define करने के multiple methods हैं
• Color names easy होते हैं
• HEX, RGB, HSL ज्यादा control देते हैं
• RGBA और HSLA transparency support करते हैं