रंग - सीएसएस-ट्रिक्स

Anonim

colorसीएसएस में संपत्ति पाठ और पाठ सजावट का रंग सेट करता है।

p ( color: blue; )

मूल्यों

colorसंपत्ति किसी भी सीएसएस रंग मान स्वीकार कर सकते हैं।

  • नामित रंग: उदाहरण के लिए, "एक्वा"।
  • हेक्स रंग: उदाहरण के लिए, # 00FFFF या # 0FF।
  • RGB और RGBa रंग: उदाहरण के लिए, rgb (0, 255, 255) और rgba (0, 255, 255, .5)।
  • HSL और HSLa रंग: उदाहरण के लिए, hsl (180, 100%, 50%) और hsla (180, 100%, 50%, .5)।

जिसका नाम कलर्स रखा गया है

p ( color: aqua; )

नामित रंगों को कीवर्ड रंग, X11 रंग या SVG रंग के रूप में भी जाना जाता है। सभी नामित रंग डिफ़ॉल्ट रूप से अपारदर्शी हैं transparent, जो पूरी तरह से पारदर्शी या "स्पष्ट" हैं। नामित रंगों की सूची के लिए हमारे नामांकित रंग और हेक्स इक्विप्लेंट्स स्निपेट देखें।

हेक्स रंग

हेक्स रंग, या हेक्सिडेसिमल रंग अल्फ़ान्यूमेरिक मूल्यों के साथ निर्दिष्ट हैं। वर्णों की पहली जोड़ी लाल मूल्य का प्रतिनिधित्व करती है, दूसरी जोड़ी हरे रंग के मूल्य का प्रतिनिधित्व करती है, और तीसरी जोड़ी नीले मूल्य का प्रतिनिधित्व करती है, सभी 00 से एफएफ तक की सीमा में है।

p ( color: #00FFFF; )

यदि लाल, नीले, और हरे रंग के मूल्यों के जोड़े सभी युगल हैं, तो आप हेक्स मान को 3-वर्ण शॉर्टहैंड में संक्षिप्त कर सकते हैं - उदाहरण के लिए, # 00FFFF को # 0FF में संक्षिप्त किया जा सकता है।

.full-hex ( color: #00FFFF; /* aqua */ ) .abbreviated-hex ( color: #0FF; /* also aqua */ )

RGB और RGBa कलर्स

RGB रंगों को तीन संख्यात्मक मानों (0 से 255 तक) या प्रतिशत मान (0% से 100% तक) की अल्पविराम से अलग सूची के साथ निर्दिष्ट किया जाता है। पहला मान लाल मूल्य का प्रतिनिधित्व करता है, दूसरा हरा मूल्य का प्रतिनिधित्व करता है, और तीसरा नीला मूल्य का प्रतिनिधित्व करता है। आरजीबी रंग डिफ़ॉल्ट रूप से अपारदर्शी हैं।

p ( color: rgb(0, 255, 255); )

RGBa अल्फा चैनल के लिए एक चौथा मान जोड़ता है, जो रंग की अस्पष्टता निर्धारित करता है। अल्फा मान 0.0 (पूरी तरह से पारदर्शी) से 1 (पूरी तरह से अपारदर्शी) तक की सीमा के भीतर की एक संख्या है।

p ( color: rgba(0, 255, 255, .5); )

HSL और HSLa कलर्स

एचएसएल रंग तीन मूल्यों की अल्पविराम से अलग सूची के साथ निर्दिष्ट हैं: ह्यू की डिग्री (0 से 360 तक की संख्या), एक संतृप्ति प्रतिशत (0% से 100% तक), और एक लपट प्रतिशत (0% से लेकर) 100%)। एचएसएल रंग डिफ़ॉल्ट रूप से अपारदर्शी हैं।

p ( color: hsl(180, 100%, 50%); )

HSLa अल्फा चैनल के लिए रंग की अस्पष्टता को नियंत्रित करने के लिए एक चौथा मूल्य जोड़ता है। अल्फा मान 0.0 (पूरी तरह से पारदर्शी) से 1 (पूरी तरह से अपारदर्शी) तक की सीमा के भीतर की एक संख्या है।

p ( color: hsla(180, 100%, 50%, .5); )

डेमो

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन कलर वैल्यू देखें।

उपयोग नोट्स

colorसंपत्ति cascades। यदि आप इसे शरीर पर सेट करते हैं, तो सभी वंश तत्व उस रंग को प्राप्त कर लेंगे, जब तक कि उपयोगकर्ता एजेंट स्टाइलशीट में उनका अपना रंग सेट न हो।

colorजब तक borderघोषणा में एक रंग मूल्य निर्दिष्ट नहीं किया जाता है तब तक सीमाएँ विरासत में मिलती हैं।

colorसंपत्ति पर लागू होता है text-decorationलाइनों। text-decoration-colorसंपत्ति का समर्थन करने वाले ब्राउज़रों में , आप पाठ और इसकी सजावट लाइनों के लिए अलग-अलग रंग निर्दिष्ट कर सकते हैं।

colorआइटम मार्करों पर भी लागू होता है (जैसे बुलेट पॉइंट और नंबर)। आप सूची आइटम मार्कर के लिए एक अलग रंग सेट नहीं कर सकते, लेकिन आप इसे छवि के साथ list-styleगुण से बदल सकते हैं।

हालांकि नामित रंगों और हेक्स रंगों में अल्फा चैनल नहीं हैं, आप opacityसभी वर्तमान ब्राउज़रों और IE9 + में संपत्ति के साथ अपनी अस्पष्टता निर्धारित कर सकते हैं।

सम्बंधित

  • font
  • text-decoration-color
  • opacity

अधिक जानकारी

  • color W3C कल्पना में
  • color एमडीएन में
  • सीएसएस-ट्रिक्स लेख YL HSLa के लिए

ब्राउज़र का समर्थन

क्रोम सफारी फ़ायर्फ़ॉक्स ओपेरा अर्थात एंड्रॉयड आईओएस
कोई कोई कोई कोई कोई * कोई कोई

* HSL, HSLa, और RGBa IE9 + में समर्थित हैं।