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

Question

Accepted Answer

CSS अनेक रंग प्रारूप प्रदान करते. ते समान रंग तयार करतात — निर्णय वाचनीयतेबद्दल आणि आपल्याला पारदर्शकता आवश्यक आहे की नाही यावर आहे.

```css
.a { color: red; }                      /* named keyword (~150 of them) */
.b { color: #ff5733; }                  /* hex: #RRGGBB */
.c { color: #ff5733cc; }                /* hex with alpha: #RRGGBBAA */
.d { color: rgb(255 87 51); }           /* red green blue (0–255) */
.e { color: rgb(255 87 51 / 0.8); }     /* with 80% opacity */
.f { color: hsl(9 100% 60%); }          /* hue saturation lightness */
.g { color: hsl(9 100% 60% / 0.5); }    /* HSL with alpha */
```

## HSL अनेकदा सर्वात उपयोगी असते

HSL रंगाचे वर्णन **H**ue (रंग चक्रावर 0–360°), **S**aturation, आणि **L**ightness म्हणून करते — जे मानव कसे रंगाचा विचार करतात यामुळे मॅप केले जाते, भिन्नता अंतर्ज्ञानास्पद करते:

```css
:root { --brand-h: 220; }
.primary       { background: hsl(var(--brand-h) 80% 50%); }
.primary-light { background: hsl(var(--brand-h) 80% 70%); } /* just raise lightness */
.primary-dark  { background: hsl(var(--brand-h) 80% 30%); } /* just lower it */
```

हलका/गडद रंग तयार करणे क्षुल्लक आहे — एक संख्या बदला. हेक्स किंवा rgb सह ते करणे सर्व चॅनेल पुन्हा मोजणे आवश्यक आहे.

## Alpha / पारदर्शकता

```css
background: rgb(0 0 0 / 0.5); /* 50% transparent black — for overlays */
```

`/ alpha` सिंटॅक्स (0 = पारदर्शक, 1 = अपारदर्शक) हा अर्ध-पारदर्शक रंग कसे बनवायचे आहे, ओव्हरले आणि सावल्यांसाठी उपयोगी. (नोट: घटकावरील `opacity` संपूर्ण घटकला फिके करते, मुलांसह — alpha रंग फक्त त्या रंगला फिके करते.)

## आधुनिक प्रारूप

```css
color: oklch(70% 0.15 220); /* perceptually-uniform; better for color systems */
```

## हे का महत्वाचे आहे

प्रारूप जाणून घेणे तुम्हाला योग्य साधन निवडू देते: एकबारी रंगांसाठी हेक्स/rgb, **डिজाइन सिस्टमसाठी HSL/OKLCH** (सोपे, अंतर्ज्ञानास्पद रंग भिन्नता), आणि पारदर्शकतेसाठी `/ alpha` सिंटॅक्स.

HSL विशेषत: सुसंगत, थिमेबल रंग पॅलेट तयार करणे अधिक सहज करते.