CSS Colors

अगर आप अपनी वेबसाइट को आकर्षक बनाना चाहते हैं, तो Colors (रंग) सबसे ज़रूरी हिस्सा हैं। रंग आपकी वेबसाइट की look, mood, और readability सब बदल सकते हैं। CSS में रंगों को define करने के कई तरीके हैं, और इस लेसन में हम उन सभी को simple बोलचाल की भाषा में समझेंगे

CSS Colors क्या होते हैं?

h1 {
  color: blue; /* टेक्स्ट का रंग नीला */
}

div {
  background-color: yellow; /* बैकग्राउंड का रंग पीला */
}

आप चाहे तो text, background, border, shadow — हर चीज़ को रंग सकते हैं।

CSS में Colors देने के 5 Main तरीके

Color Names (रंगों के नाम से)

p {
  color: green;
}
div {
  background-color: orange;
}

CSS में 140 से ज़्यादा color names होते हैं जैसे: red, blue, yellow, pink, purple, brown, cyan, magenta वगैरह।

HEX Colors (Hexadecimal Code)

HEX Code हर color को #RRGGBB format में दिखाता है।

हर value 00 से FF तक होती है (0 से 255 in decimal)। Example

h1 {
  color: #ff0000; /* Red */
}
p {
  color: #00ff00; /* Green */
}
div {
  background-color: #0000ff; /* Blue */
}

#f00  /* #ff0000 */
#0f0  /* #00ff00 */
#00f  /* #0000ff */

RGB Colors (Red, Green, Blue)

RGB का मतलब — Red, Green, Blue mix करके color बनाना। Syntax

rgb(red, green, blue)

हर value 0 से 255 तक होती है। Example:

h2 {
  color: rgb(255, 0, 0);   /* Red */
}
p {
  color: rgb(0, 255, 0);   /* Green */
}
div {
  color: rgb(0, 0, 255);   /* Blue */
}

Mix करके interesting shades बना सकते हैं:

color: rgb(255, 165, 0); /* Orange */
color: rgb(128, 0, 128); /* Purple */

RGBA Colors (Transparency वाला Color)

RGBA = RGB + Alpha Alpha value बताती है कि color कितना transparent है (0 से 1 तक)। Example

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

यहाँ 0.3 का मतलब है color थोड़ा पारदर्शी (30% visible)।

HSL Colors (Hue, Saturation, Lightness)

यह तरीका designers के लिए बहुत natural होता है 🎨 Syntax:

hsl(hue, saturation, lightness)

Example :

div {
  color: hsl(0, 100%, 50%);   /* Pure Red */
}
p {
  color: hsl(120, 100%, 25%); /* Dark Green */
}
span {
  color: hsl(240, 100%, 50%); /* Blue */
}

Transparent Color

कभी-कभी आप चाहते हैं background transparent रहे — CSS में इसके लिए keyword है:

background-color: transparent;

Gradient Colors (Multiple रंग एक साथ)

Gradient का मतलब होता है — एक color से दूसरे color में smooth transition। Example

div {
  background: linear-gradient(to right, red, yellow);
}

to right मतलब left से right की तरफ रंग बदलना।

Browser Safe Colors क्या होते हैं?

#000000, #333333, #666666, #999999, #CCCCCC, #FFFFFF

Tips for Choosing Colors

Quick Recap

Final Thoughts

Colors सिर्फ सुंदरता नहीं, बल्कि user experience को भी affect करते हैं। सही color combination आपकी website को professional और eye-catching बनाता है।