CSS Color Keywords

CSS के साथ लगभग 140 plain-English color names आते हैं जैसे tomato, cornflowerblue, और rebeccapurple, इसलिए किसी color को numeric code के बजाय एक पढ़ने लायक word की तरह लिखा जा सकता है।

In this page:

Named Color Palette
transparent और currentColor
Named Colors कब उपयोगी हैं
Named Colors की Limitations
Practice में currentColor इस्तेमाल करना

Syntax

css

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

Named Color Palette

CSS लगभग 140 standard color keywords define करता है, red, blue, और green जैसे common names से लेकर coral, teal, और orchid जैसे ज़्यादा specific names तक -- हर named color का CSS spec में एक exact hex/rgb value भी defined है, इसलिए ये vague नहीं हैं।

Note:

Accepted values:
named colors — tomato, navy, gold जैसे 140+ keywords
transparent — पूरी तरह transparent
currentcolor — element की text color
System colors — Canvas, CanvasText, LinkText
Keywords case insensitive होते हैं
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: The Named Color Palette

css

<style>
.a { background: coral; }
.b { background: teal; }
.c { background: orchid; }
</style>
<div class="a">coral</div>
<div class="b">teal</div>
<div class="c">orchid</div>

transparent और currentColor

दो special keywords fixed colors नहीं हैं: transparent का मतलब है पीछे चाहे जो भी हो पूरी तरह invisible, और currentColor उसी value पर resolve होता है जो element की खुद की color property पर set है, जिससे border-color या box-shadow जैसी properties बिना दोहराए अपने आप text color से match कर लेती हैं।

Note:

Accepted values:
transparent — पूरी तरह see-through
currentcolor — element की खुद की color value पर resolve होता है
named color — जैसे red, teal, tomato
#rrggbb / rgb() / hsl() — कोई भी दूसरी color value
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: transparent and currentColor

css

<style>
p {
  color: navy;
  border: 2px solid currentColor;
  background: transparent;
}
</style>
<p>Border automatically matches the text color</p>

Named Colors कब उपयोगी हैं

Named colors quick prototyping, README-style documentation, या तब सबसे तेज़ हैं जब किसी color की exact hex value सच में मायने नहीं रखती -- ये code review में उतनी साफ़ पढ़ी जाती हैं जितना #FF6347 नहीं पढ़ा जाता, hex/rgb/hsl से कहीं कम precision की कीमत पर।

उदाहरण: When Named Colors Are Useful

css

<style>
.prototype {
  background: tomato;
}
</style>
<div class="prototype">tomato — clear in code review, quick to prototype with</div>

Named Colors की Limitations

सिर्फ़ ~140 fixed options के साथ, named colors ज़्यादातर brand colors को precisely express नहीं कर सकतीं, और मिलते-जुलते दिखने वाले दो named colors (जैसे grey और darkgrey) अपना relationship उस तरह नहीं दिखाते जैसे दो hex codes या दो hsl() lightness values दिखाते।

उदाहरण: Limitations of Named Colors

css

<style>
.grey { background: grey; }
.darkgrey { background: darkgrey; }
</style>
<div class="grey">grey</div>
<div class="darkgrey">darkgrey — the relationship isn't obvious from the names</div>

Practice में currentColor इस्तेमाल करना

currentColor खासतौर पर SVG icons, borders, और shadows के लिए उपयोगी है जिन्हें हमेशा आस-पास की text color से अपने आप match करना चाहिए -- color को एक बार बदलना हर उस property को update कर देता है जो currentColor को reference करती है, हर related property को अलग-अलग update करने की ज़रूरत के बिना।

Note:

Accepted values:
transparent — पूरी तरह see-through
currentcolor — element की खुद की color value पर resolve होता है
named color — जैसे red, teal, tomato
#rrggbb / rgb() / hsl() — कोई भी दूसरी color value
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Using currentColor in Practice

css

<style>
.icon {
  color: navy;
  border: 2px solid currentColor;
  box-shadow: 0 0 4px currentColor;
}
</style>
<div class="icon">Border and shadow both follow the text color</div>

Live Example

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS HSL Colors Next Lesson → CSS Backgrounds

CSS Color Keywords

Named Color Palette

transparent और currentColor

Named Colors कब उपयोगी हैं

Named Colors की Limitations

Practice में currentColor इस्तेमाल करना

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code