คุณระบุสีใน 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 ต้องคำนวณช่องทั้งหมดใหม่

## อัลฟา / ความโปร่งใส

```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 โดยเฉพาะทำให้การสร้างจานสีที่สอดคล้องและปรับแต่งตามธีมเป็นเรื่องง่ายมาก