CSS에서 색상을 어떻게 지정하나요?

Question

Accepted Answer

CSS는 여러 색상 형식을 제공합니다. 같은 색을 만들어내며 — 선택은 가독성과 투명도 필요 여부에 관한 것입니다.

```css
.a { color: red; }                      /* 이름 키워드 (~150개) */
.b { color: #ff5733; }                  /* hex: #RRGGBB */
.c { color: #ff5733cc; }                /* alpha가 있는 hex: #RRGGBBAA */
.d { color: rgb(255 87 51); }           /* red green blue (0–255) */
.e { color: rgb(255 87 51 / 0.8); }     /* 80% 불투명도 */
.f { color: hsl(9 100% 60%); }          /* hue saturation lightness */
.g { color: hsl(9 100% 60% / 0.5); }    /* alpha가 있는 HSL */
```

## 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%); } /* lightness만 올리면 됨 */
.primary-dark  { background: hsl(var(--brand-h) 80% 30%); } /* 그냥 낮추면 됨 */
```

더 밝거나 어두운 음영을 만드는 것이 간단합니다 — 숫자 하나만 바꾸면 됩니다. hex나 rgb로 같은 작업을 하려면 모든 채널을 다시 계산해야 합니다.

## Alpha / 투명도

```css
background: rgb(0 0 0 / 0.5); /* 50% 투명한 검정 — 오버레이용 */
```

`/ alpha` 문법(0 = 투명, 1 = 불투명)은 반투명 색을 만드는 방법으로 오버레이와 그림자에 유용합니다. (참고: 요소의 `opacity`는 자식을 포함한 *전체* 요소를 흐리게 하지만, alpha 색은 그 색만 흐리게 합니다.)

## 최신 형식

```css
color: oklch(70% 0.15 220); /* 지각적으로 균일함; 색상 시스템에 더 적합 */
```

## 왜 중요한가

형식을 알면 적절한 도구를 고를 수 있습니다. 일회성 색상에는 hex/rgb, 디자인 시스템에는 **HSL/OKLCH**(쉽고 직관적인 음영 변형), 투명도에는 `/ alpha` 문법을 사용하세요.

특히 HSL은 일관되고 테마화 가능한 색상 팔레트 구축을 훨씬 쉽게 만듭니다.