आप 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 */
```

एक हल्का/गहरा रंग बनाना तुच्छ है — एक संख्या बदलें। hex या 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 */
```

## यह क्यों मायने रखता है

प्रारूपों को जानने से आप सही उपकरण चुन सकते हैं: एकबारी रंगों के लिए hex/rgb, **डिज़ाइन सिस्टम के लिए HSL/OKLCH** (आसान, सहज शेड भिन्नताएं), और पारदर्शिता के लिए `/ alpha` सिंटैक्स।

HSL विशेष रूप से सुसंगत, थीम योग्य रंग पैलेट्स बनाना बहुत आसान बनाता है।