CSS Color property को कैसे use किया जाता है-हिन्दी में

आपने html document में style देकर वेबपेज को कलर तो दिया ही होगा। इसमें सबसे बड़ी समस्या ये थी कि आपको हर बार html element के साथ कलर को भी add करना पड़ता था। इस समस्या से छुटकारा पाने के लिए आप css color property का इस्तेमाल कर सकते हो।
CSS में आप हर element के लिए color rules को define कर सकते हो। इससे आप font-color, border-color, outline-color सब कुछ कर सकते हो।

CSS Color add करने के तरीके

Color को declare करने के बहुत से तरीके css में दिए गए है। इसमें आप 2 value को add कर सकते हो। जो इस प्रकार हैं:-
1. CSS Color Name
2. CSS Color value

अगर अपने हमारे ये आर्टिकल नहीं पढे हैं अभीतक तो सबसे पहले आप इनको पढ़ें ताकि आपको कोई परेशानी ना हो। CSS सीखने के लिए आपको step by step ही चलना होगा।

CSS क्या है और इसके फायदे?

किसी webpage में CSS कैसे Add करें

CSS Selector क्या है और इसका use कैसे किया जाता है?

CSS Border Property का प्रयोग कैसे करें- हिन्दी मे पूरी जानकारी

1. CSS color Name

आप css में कलर को उसके नाम से भी declare कर सकते हो। जैसे- red , green , blue etc. पर इसमें सबसे बड़ी समस्या ये है कि हम सभी colors का नाम याद नहीं रख सकते। जब हमको color का नाम हियाद नहीं होगा तो हम उसको ऐड भी नहीं कर सकते और ना ही गूगल में सर्च कर सकते है।
Color के मामलें में ladies कुछ ज्यादा ही intersted होती हैं। वो बहुत सारे कलर के नाम याद रख सकती है और उनको पहचान भी सकती है। सबसे बड़ी बात ये है कि सभी browsers कलर name को support भी नहीं करते हैं।
अब तक W3C – World Wide Web Consortium द्वारा लगभग 140 Colors को Standard Color माना गया हैं। इनकी संख्या में प्रतिदिन लगातार इजाफा भी हो रहा हैं।

2. Color value

CSS में color को RGB values, HEX values, HSL values, RGBA values, and HSLA values से specified किया जा सकता है।
उदाहरण के लिए आप red color को इस प्रकार भी define कर सकते हो:-

Output

RGB Color Value

सभी ब्राउजर RGB color value को support करते हैं। RGB color value को इस प्रकार specified किया जाता है:- rgb(red, green, blue)
इसमें हर parameter को उसकी intensity , जो 0 से 255 के बीच होती है , के द्वारा define किया जाता है। जैसे:-
rgb(255, 0, 0 ) red color को show करेगा क्योंकि red color को highest value (255) दी गई है जबकि green और blue को सबसे कम 0 value दी गई है।
rgb(0, 0, 0) इसमें black color दिखाने के लिए सभी values को 0 set किया जाता है।
rgb( 255, 255, 255) इसमें white कलर को शो करने के लिए सभी parameter को highest value 255 दी गई है।
Example :-

इसकी Output इस प्रकार होगी-

HEX Color Value:- #rrggbb

Hexadecimal color values को सभी browsers में support करता है। इसमें कलर को #rrggbb value द्वारा specified किया जाता है। इसमें rr का मतलब red , gg का मतलब green और bb का मतलब blue कलर होता है।
इसमें Hexadecimal नंबर सिस्टम का प्रयोग होता है जिसमें कुल 16 अंक होते है। इस सिस्टम में 10 अंक और 6 letters का प्रयोग होता है।

ये 16 अंक इस प्रकार होते है:-
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

इसमें F सबसे highest value और 0 को सबसे lowest value माना जाता है। उदाहरण के लिए देखें:-
#FF0000 में red कलर value highest (F) और green व blue color की value lowest (0) होने के कारण ये red color को show करेगा। उसी प्रकार #00FF00 वैल्यू green कलर और #0000FF वैल्यू blue कलर को show करेगी।

HSL color Value

HSL का प्रयोग Hue , Saturation और Lightness के लिए किया जाता है। HSL को इस प्रकार define किया जाता है :-  hsl( hue, saturation, lightness) .

अब इसको विस्तार से समझते हैं।
Hue:- ये एक color की degree होती है जो 0 से 360 तक होती है। इसमें 0 का मतलब red , 120 का मतलब green और 240 का मतलब blue कलर होता है।
Saturation
ये एक percentage वैल्यू होती है जिसमें 0% का मतलब gray कलर की shade और 100% का मतलब full color होता है।
Lightness
ये भी एक percentage वैल्यू होती है जिसमें 0% का मतलब black , 50% का मतलब ना black ना white और 100% का मतलब white कलर होता है।

जैसे:-
hsl( 0, 100%, 50%) का मतलब Red color

इसी प्रकार
hsl( 240, 100%, 50%) का मतलब Blue color
hsl( 120, 100%, 50%) का मतलब Green color

आपने css color property के बारें में पढ़ा। मेरा सुझाव है कि आप HEX color value का इस्तेमाल करें जो सबसे best भी है और आसान भी है। मेरा ये मानना है कि आप हमारे css tutorial को पढ़ते समय अपने कंप्युटर का नोटपैड भी साथ साथ इस्तेमाल करते रहें जिससे आपको सीखने में आसानी होगी।