CSS Colors

Color अक्सर वह सबसे पहली चीज़ होती है जिसके लिए CSS इस्तेमाल होता है, और पता चलता है कि CSS में एक ही color को describe करने के कई अलग-अलग तरीके हैं। आप plain color names जैसे blue इस्तेमाल कर सकते हैं, hex codes जैसे '#1a73e8' (यह format आप असली projects में सबसे ज़्यादा इस्तेमाल होते देखेंगे), red, green, और blue numbers से बने rgb() values, या hue, saturation, और lightness से बने hsl() values। rgb या hsl में एक a जोड़ना (इसे rgba या hsla बनाकर) आपको transparency control करने भी देता है। एक बार जब आप hex और rgb values पढ़ने में सहज हो जाते हैं, तो आप cookiescursor.com जैसी किसी असली site पर किसी design file के किसी भी color को exactly match कर पाएँगे।

In this page:

Named Colors
Hex Colors
RGB और RGBA
HSL और HSLA
Accessible Color Contrast चुनना

Syntax

css

selector {
  color: colorValue;
  background-color: colorValue;
}

Named Colors

CSS plain English color names का एक set समझती है, जैसे red, blue, और white, जिन्हें आप बिना किसी special formatting के सीधे एक value की तरह इस्तेमाल कर सकते हैं।

Note:

Named colors quick prototypes के लिए बहुत अच्छे हैं, लेकिन जब आपको exact brand color चाहिए हो तो hex या rgb पर switch करें।
Accepted values:
named color — red, teal, tomato जैसे keywords
#rrggbb — hex code, जैसे #ff6600
rgb(r, g, b) — 0 से 255 तक channels
hsl(h, s%, l%) — hue, saturation, lightness
rgba() / hsla() — एक alpha (opacity) channel जोड़ता है
transparent — पूरी तरह transparent
currentcolor — element की text color इस्तेमाल करता है

Warning: Named colors एक fixed list तक सीमित हैं, वे उन precise, custom shades को express नहीं कर सकतीं जो ज़्यादातर असली brands असल में इस्तेमाल करते हैं।

उदाहरण: Named Colors

css

<style>
p {
  color: blue;
  background-color: white;
}
</style>
<p>Named colors example</p>

Hex Colors

एक hex color एक hash के बाद छह characters के रूप में लिखा जाता है जो red, green, और blue को pairs में represent करते हैं, जैसे #1a73e8। असली projects में एक exact color express करने का यह सबसे common तरीका है।

Note:

Design tools लगभग हमेशा colors को hex codes के रूप में export करते हैं, इसलिए इन्हें पढ़ना सीखना किसी design को CSS में translate करना कहीं तेज़ बना देता है।
Accepted values:
#rrggbb — छह hex digits, जैसे #ff0000
#rgb — shorthand, जैसे #f00
#rrggbbaa — alpha channel के साथ
#rgba — alpha के साथ short form
Digits 0-9 और a-f होते हैं, case sensitive नहीं

Warning: एक hex code को exactly छह characters चाहिए होते हैं (या shorthand के लिए तीन); एक character की typo पूरी तरह अलग color बना देती है।

उदाहरण: Hex Colors

css

<style>
p {
  color: #1a73e8;
}
</style>
<p>Hex color example</p>

RGB और RGBA

rgb() function red, green, और blue के लिए 0 से 255 के बीच तीन numbers से एक color बनाता है। एक चौथी value (rgba) जोड़ने से opacity control होती है, 0 (invisible) से 1 (पूरी तरह solid) तक।

Note:

जब भी आपको ऐसा color चाहिए जो थोड़ा see-through हो, जैसे किसी image के ऊपर एक subtle overlay, तो rgba() इस्तेमाल करें।
Accepted values:
rgb(r, g, b) — हर channel 0 से 255
rgb(r g b) — modern space-separated syntax
rgb(r g b / a) — slash के बाद alpha जोड़ता है
rgb(0% 50% 100%) — channels percentages के रूप में
rgba(r, g, b, a) — 0 से 1 तक alpha वाला legacy alias

Warning: rgba() में alpha value 0 से 1 के बीच एक number है, 0 से 100 जैसी percentage नहीं।

उदाहरण: RGB and RGBA

css

<style>
p {
  color: rgb(26, 115, 232);
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
<p>RGB and RGBA example</p>

HSL और HSLA

hsl() function किसी color को hue (color wheel पर एक position, 0 से 360), saturation (color कितना vivid है), और lightness (वह कितना हल्का या गहरा है) से describe करता है, जो कई लोगों को rgb से ज़्यादा intuitive लगता है।

Note:

HSL matching color variations बनाना आसान बना देता है, बस lightness value को ऊपर या नीचे adjust करें ताकि उसी hue के हल्के या गहरे shades मिल जाएँ।
Accepted values:
hsl(h, s%, l%) — hue, saturation, lightness
hue — 0 से 360 तक का angle (0 red, 120 green, 240 blue)
saturation — 0% gray है, 100% पूरी तरह vivid है
lightness — 0% black है, 50% pure color है, 100% white है
hsl(h s% l% / a) — alpha वाला modern syntax

Warning: 360 degrees पर hue फिर से घूम जाता है, इसलिए 370 जैसी value 10 जैसा ही behave करती है, जो confusing हो सकता है अगर आप भूल जाएँ कि यह circular है।

उदाहरण: HSL and HSLA

css

<style>
p {
  color: hsl(210, 82%, 51%);
}
</style>
<p>HSL color example</p>

Accessible Color Contrast चुनना

हर color combination पढ़ने में आसान नहीं होता। Accessible design का मतलब है text और उसके background के बीच इतना contrast चुनना कि कम vision या color blindness वाले visitors भी उसे सहजता से पढ़ सकें।

Note: एक simple rule of thumb के तौर पर, light background पर dark text (या इसका उल्टा) मजबूत contrast के साथ लगभग हमेशा light-on-light या dark-on-dark से ज़्यादा safe है।

Warning: White background पर light gray text stylish लग सकता है, लेकिन यह कुछ visitors के लिए genuinely मुश्किल या असंभव हो सकता है पढ़ना।

उदाहरण: Choosing Accessible Color Contrast

css

<style>
.good-contrast {
  color: #111111;
  background-color: #ffffff;
}
.poor-contrast {
  color: #eeeeee;
  background-color: #ffffff;
}
</style>
<p class="good-contrast">Easy to read</p>
<p class="poor-contrast">Hard to read</p>

Live Example

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Inheritance Next Lesson → CSS RGB Colors

CSS Colors

Named Colors

Hex Colors

RGB और RGBA

HSL और HSLA

Accessible Color Contrast चुनना

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code