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 తో దీన్ని చేయడం అన్ని చ్యానెల్‌ల పునర్నిర్ణయం అవసరం.

## ఆల్ఫా / పారదర్శకత

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

`/ alpha` సిన్టాక్స్ (0 = పారదర్శక, 1 = అపారదర్శక) అర్ధ-పారదర్శక రంగులను తయారు చేసే విధానం, ఓవర్‌లేలు మరియు నీడలకు ఉపయోగకరమైనది. (గమనిక: ఒక మూలకంపై `opacity` మొత్తం మూలకం ఫేడ్ చేస్తుంది, బిడ్డలతో సహా — ఆల్ఫా రంగులు ఆ రంగును మాత్రమే ఫేడ్ చేస్తాయి.)

## ఆధునిక ఫార్మాట్‌లు

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

## ఇది ఎందుకు ముఖ్యమైనది

ఫార్మాట్‌లను తెలుసుకోవడం సరైన సాధనాన్ని ఎంచుకోవడానికి మిమ్మల్ని అనుమతిస్తుంది: ఒక్క సారి రంగుల కోసం hex/rgb, **డిజైన్ సిస్టమ్‌ల కోసం HSL/OKLCH** (సులభమైన, సహజమైన నీడ వైవిధ్యాలు), మరియు పారదర్శకత కోసం `/ alpha` సిన్టాక్స్.

HSL ముఖ్యంగా సামర్థ్యవంతమైన, థీమ్‌-సంబంధిత రంగుల పాలెట్‌ను నిర్మించడం చాలా సులభం చేస్తుంది.