तपाईंले 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` syntax (0 = पारदर्शी, 1 = अपारदर्शी) अर्ध-पारदर्शी रङहरू बनाउन को लागि हो, ओभरलेहरु र साया को लागी उपयोगी। (नोट: एक तत्वमा `opacity` पूर्ण तत्व फेड गर्छ, बच्चाहरू सहित — alpha रङहरू केवल त्यो रङ फेड गर्छन्।)

## आधुनिक फरम्याटहरू

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

## किन यो महत्त्वपूर्ण छ

फरम्याटहरू जान्नु तपाईंलाई सही उपकरण छनोट गर्न दिन्छ: एकल रङहरूको लागि hex/rgb, **डिजाइन प्रणालीहरूको लागि HSL/OKLCH** (सजिलो, सहज छाया भिन्नताहरू), र पारदर्शिताको लागि `/ alpha` syntax।

HSL विशेष गरी सुसंगत, थिमेबल रङ प्यालेटहरू निर्माण गर्न धेरै सजिलो बनाउँछ।