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 உடன் செய்வதற்கு அனைத்து சேனல்களையும் மீண்டும் கணக்கிட வேண்டும்.

## Alfa / அஸ்पष्टता

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

`/ alpha` சொல்‌(0 = வெளிப்படையான, 1 = opaque) அரைவெளிப்படையான வண்ணங்களை உருவாக்குவது, மேலிடைகள் மற்றும் நிழல்களுக்கு பயனுள்ளதாக இருக்கும். (குறிப்பு: ஒரு உপাদனத்தில் `opacity` முழு உপாদனத்தையும் மங்கச் செய்கிறது, குழந்தைகள் உட்பட — alfa வண்ணங்கள் அந்த வண்ணத்தை மங்கச் செய்கிறது.)

## நவீன வடிவங்கள்

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

## இது ஏன் முக்கியம்

வடிவங்களைத் தெரிந்துகொள்ளுதல் சரியான கருவியைத் தேர்வு செய்ய உங்களை அனுமதிக்கிறது: ஒரு முறை வண்ணங்களுக்கு hex/rgb, **வடிவமைப்பு அமைப்புகளுக்கு HSL/OKLCH** (எளிமையான, உள்ளுணர்வு நிழல் மாறுபாடுகள்), மற்றும் `/ alpha` வாক்கியறிப்பு வெளிப்படைத்தன்மைக்கு।

HSL குறிப்பாக சிறந்த, தீம்-சரியான வண்ணக்குவியை கட்டுவதை மிகவும் எளிதாக்குகிறது.