CSS में rgb के माध्यम से रंग निर्दिष्ट करना

ट्यूटोरियल की शुरुआत में, जब हम रंगों के बारे में पढ़ रहे थे, मैंने आपको बताया था कि रंग को या तो अंग्रेजी शब्द से, या rgb के माध्यम से, या # के माध्यम से निर्दिष्ट किया जा सकता है। अंतिम दो प्रारूप किसी भी रंग की छाया प्राप्त करने की अनुमति देते हैं। आइए जानें कि ये प्रारूप वास्तव में कैसे काम करते हैं।

इन तरीकों को समझने के लिए, सबसे पहले हमें यह समझने की आवश्यकता है कि कंप्यूटर स्क्रीन पर आवश्यक रंग कैसे प्राप्त होता है।

वास्तव में, स्क्रीन का एक अलग बिंदु (पिक्सेल) उन सभी रंगों से नहीं चमक सकता जिनकी आवश्यकता है, क्योंकि तकनीकी रूप से यह बहुत कठिन होगा। स्क्रीन का प्रत्येक बिंदु केवल तीन रंगों से चमक सकता है: लाल, हरा और नीला। लेकिन एक साथ और विभिन्न अनुपात में।

इन रंगों को संयोजित करके हम कोई भी आवश्यक रंग प्राप्त कर सकते हैं, ठीक उसी तरह जैसे पेंटर्स पेंट के साथ करते हैं: कई रंगों को मिलाकर वे एक और नया रंग प्राप्त करते हैं।

CSS में रंगों को मिलाने के लिए, संपत्ति के मान के रूप में कीवर्ड rgb निर्दिष्ट करना होगा, जिसके बाद अल्पविराम से अलग करके यह निर्दिष्ट करना होगा कि इन तीन मूल रंगों को किस अनुपात में लेना है। रंग स्वयं 0 से 255 तक बदल सकते हैं। और शून्य - रंग की अनुपस्थिति है, और 255 - शुद्ध रंग है (उदाहरण के लिए, शुद्ध लाल)।

अक्षर rgb का विस्तार red, green, blue के रूप में किया जाता है।

आइए उदाहरणों पर नजर डालें।

उदाहरण

आइए शुद्ध लाल और शुद्ध नीला रंग मिलाएं। इसके लिए पहला मान 255 पर सेट करें, दूसरा 0 पर, और तीसरा - 255 पर। हमें बैंगनी रंग मिलेगा:

html<p>
  पाठ
</p>

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

Результат:

उदाहरण

आइए अब पहला मान 255 पर सेट करें, और बाकी सभी - शून्य पर। परिणामस्वरूप, हमें शुद्ध लाल रंग मिलेगा:

html<p>
  पाठ
</p>

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

Результат:

उदाहरण

इस तरह हमें शुद्ध हरा रंग मिलेगा:

html<p>
  पाठ
</p>

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

Результат:

उदाहरण

और अगर हरे के लिए 255 के बजाय 100 सेट करें, तो आंशिक रूप से हरा रंग मिलेगा:

html<p>
  पाठ
</p>

cssp {
  color: rgb(0, 100, 0);
}

Результат:

उदाहरण

आइए सभी तीन रंगों को मनमाने अनुपात में मिलाएं। देखिए, क्या मिला:

html<p>
  पाठ
</p>

cssp {
  color: rgb(200, 100, 125);
}

Результат:

उदाहरण

अगर सभी मान 255 पर सेट कर दें, तो शुद्ध सफेद रंग मिलेगा:

cssp {
  color: rgb(255, 255, 255);
}

उदाहरण

अगर सभी मान 0 पर सेट कर दें, तो शुद्ध काला रंग मिलेगा:

cssp {
  color: rgb(0, 0, 0);
}

व्यावहारिक कार्य