# daisyUI Color Names & Class Cheatsheet: 테마 전환을 위한 필수 표

daisyUI를 쓰는 가장 큰 이유는 **테마 전환을 쉽게 하기 위해서**라고 생각합니다. 그런데 이 장점은 개발자/디자이너가 `bg-blue-500` 같은 Tailwind의 “고정 색상”을 직접 박아 넣는 순간 바로 깨져요. 대신 daisyUI가 제공하는 `primary`, `base-100`, `error` 같은 **의미 기반 색 이름**으로 `btn-primary`, `bg-base-200`, `text-error`처럼 HTML을 작성해두면, 나중에 테마만 바꿔도 UI 전체 톤이 자동으로 따라옵니다.

그래서 결국 핵심은 **색 이름(color names)과 클래스 패턴을 알고, 둘을 조합해서 마크업하는 것**입니다. 숙련된 디자이너라면 이미 감으로 외우고 쓰겠지만, 초심자나 가끔 UI를 만지는 백엔드/풀스택 개발자라면 매번 문서를 뒤적이기보다 **이 치트시트를 옆에 띄워두고 작업하는 게 훨씬 빠릅니다.** 이번 글은 바로 그 목적을 위해, “언제 어떤 색 이름을 쓰는지”와 “어떤 클래스에 어떻게 결합하는지”를 표로 깔끔하게 정리했습니다.

![로봇개발자와 색상팔레트 카드](/media/editor_temp/6/726cb8ce-603f-45b6-becf-365e5d4f8b12.png)

---

## Color Names (언제 쓰는지) {#sec-4d3fa8b26445}

| Color name          | 언제 사용? (짧게)           | 대표 사용 예          |
| ------------------- | --------------------- | ---------------- |
| `primary`           | 브랜드의 메인 테마 색상            | 주요 버튼, 핵심 CTA    |
| `primary-content`   | `primary` 위 텍스트/아이콘   | primary 버튼의 글자색  |
| `secondary`         | 보조 액션/서브 브랜드          | 서브 버튼, 보조 강조     |
| `secondary-content` | `secondary` 위 텍스트/아이콘 | secondary 영역 글자색 |
| `accent`            | 포인트/하이라이트             | 배지, 링크 강조, 강조 요소 |
| `accent-content`    | `accent` 위 텍스트/아이콘    | accent 배경 위 글자색  |
| `neutral`           | 중립 UI(어두운 톤)          | 네비게이션, 푸터, 딥톤 패널 |
| `neutral-content`   | `neutral` 위 텍스트/아이콘   | neutral 영역 글자색   |
| `base-100`          | 기본 페이지 배경             | 페이지/캔버스 바탕       |
| `base-200`          | 한 단계 떠있는 표면           | 카드, 섹션 배경        |
| `base-300`          | 더 강한 구분/층             | 구분선, 깊은 패널       |
| `base-content`      | base 계열 위 텍스트/아이콘     | 기본 본문 텍스트        |
| `info`              | 정보/가이드                | 안내 배너, 힌트        |
| `info-content`      | `info` 위 텍스트/아이콘      | info 배경 위 글자색    |
| `success`           | 성공/정상                 | 완료/성공 알림         |
| `success-content`   | `success` 위 텍스트/아이콘   | success 배경 위 글자색 |
| `warning`           | 주의/경고                 | 주의 메시지, 확인 필요    |
| `warning-content`   | `warning` 위 텍스트/아이콘   | warning 배경 위 글자색 |
| `error`             | 오류/위험                 | 실패/에러/파괴적 액션     |
| `error-content`     | `error` 위 텍스트/아이콘     | error 배경 위 글자색   |

---

## Class Patterns (색 이름 결합 규칙) {#sec-5007f90f39f0}

| 목적            | 패턴                          | 예시                                     |
| ------------- | --------------------------- | -------------------------------------- |
| 배경색           | `bg-{COLOR}`                | `bg-primary`, `bg-base-200`            |
| 글자색           | `text-{COLOR}`              | `text-base-content`, `text-error`      |
| 테두리           | `border-{COLOR}`            | `border-neutral`, `border-base-300`    |
| 그라디언트 시작/중간/끝 | `from- / via- / to-{COLOR}` | `from-primary via-accent to-secondary` |
| 링(포커스)        | `ring-{COLOR}`              | `ring-primary`                         |
| 링 오프셋         | `ring-offset-{COLOR}`       | `ring-offset-base-100`                 |
| SVG 채움        | `fill-{COLOR}`              | `fill-accent`                          |
| SVG 선         | `stroke-{COLOR}`            | `stroke-neutral-content`               |
| 그림자           | `shadow-{COLOR}`            | `shadow-primary`                       |
| 아웃라인          | `outline-{COLOR}`           | `outline-info`                         |
| 구분선(divide)   | `divide-{COLOR}`            | `divide-base-300`                      |
| 폼 accent      | `accent-{COLOR}`            | `accent-primary`                       |
| 캐럿            | `caret-{COLOR}`             | `caret-primary`                        |
| 밑줄/장식         | `decoration-{COLOR}`        | `decoration-accent`                    |
| placeholder   | `placeholder-{COLOR}`       | `placeholder-base-content`             |

---

## Opacity로 농도 조절 {#sec-c72e6700b4d3}

| 목적       | 패턴                    | 예시                               |
| -------- | --------------------- | -------------------------------- |
| 연한 배경    | `bg-{COLOR}/10`       | `bg-primary/10`, `bg-success/15` |
| 은은한 테두리  | `border-{COLOR}/30`   | `border-error/30`                |
| 약한 텍스트   | `text-{COLOR}/70`     | `text-base-content/70`           |
| 호버 강도 조절 | `hover:bg-{COLOR}/80` | `hover:bg-primary/80`            |

> 색상의 농도를 조절하고 싶을 때는, 클래스 + 색상조합에 `/숫자(퍼센트)` 로 조절하세요. 위 색상이름을 오버라이드해서 색상을 변환하는 것은 괜찮지만, html에 위 색상이름 이외로 추가하는 것은 디자인의 통일성에도 바람직하지 않고 테마전환에서 해당 색상이 너무 튈 수 있으니 권장하지 않습니다. 

---

**관련글 읽기** : 

- [daisyUI 테마: 35개 색상 팔레트로 색 고민 끝내기](/ko/whitedec/2026/1/25/daisyui-theme-35-colors/)  
- [Tailwind CSS 플러그인 daisyUI 소개: 클래스만으로 빠르게 UI 만들기](/ko/whitedec/2026/1/25/tailwind-css-plugin-daisyui-intro-quick-ui-creation/)