색상·배경 작업대

색을 고르고, 결과를 보면서 조절하고, 필요한 코드를 복사하세요.

레이아웃 CSS

내 컬러함

이 브라우저에 저장됩니다. 재방문해도 사용할 수 있고, 브라우저 데이터를 지우면 삭제됩니다.

색상만 적용하며 각도·간격 등은 유지합니다. 단색은 첫 색상에 적용합니다.

아직 담은 컬러가 없습니다. 위에서 한 색을 저장하거나 도구의 ‘현재 색 담기’를 사용하세요.

편집값은 이 브라우저에 자동 저장됩니다. 색상 조합은 내 컬러함에 담아 다시 쓰세요.

컬러 세트

라이트

LightLanding section

본문 텍스트와 muted 텍스트, 카드 표면, 버튼 대비를 같이 확인합니다.

Card surfaceborder / card / surfacePrimary actionInput surface
DarkLanding section

본문 텍스트와 muted 텍스트, 카드 표면, 버튼 대비를 같이 확인합니다.

Card surfaceborder / card / surfacePrimary actionInput surface
CSS 코드 및 분리 복사
:root {
  --brand-bg: #fbf7f1;
  --brand-surface: #fffdf9;
  --brand-card: #fff7e6;
  --brand-border: #eadfce;
  --brand-font: #221c14;
  --brand-muted: #746b5d;
  --brand-primary: #ff8a1e;
  --brand-point: #f6c84f;
}

[data-theme="dark"] {
  --brand-bg: #17130d;
  --brand-surface: #211a12;
  --brand-card: #2a2118;
  --brand-border: #4a3928;
  --brand-font: #fff5e6;
  --brand-muted: #c7b9a4;
  --brand-primary: #ff9a2f;
  --brand-point: #ffd75a;
}

.page_shell {
  background:
    radial-gradient(circle at 18% 18%, color-mix(in oklch, var(--brand-point) 34%, transparent), transparent 34%),
    linear-gradient(135deg, var(--brand-bg), var(--brand-surface));
  color: var(--brand-font);
}

.card_surface {
  border: 1px solid color-mix(in oklch, var(--brand-border) 76%, transparent);
  background: color-mix(in oklch, var(--brand-card) 86%, var(--brand-surface));
  color: var(--brand-font);
}

.button_primary {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-point));
  color: var(--brand-bg);
}
1. Light 변수
:root {
  --brand-bg: #fbf7f1;
  --brand-surface: #fffdf9;
  --brand-card: #fff7e6;
  --brand-border: #eadfce;
  --brand-font: #221c14;
  --brand-muted: #746b5d;
  --brand-primary: #ff8a1e;
  --brand-point: #f6c84f;
}
2. Dark 변수
[data-theme="dark"] {
  --brand-bg: #17130d;
  --brand-surface: #211a12;
  --brand-card: #2a2118;
  --brand-border: #4a3928;
  --brand-font: #fff5e6;
  --brand-muted: #c7b9a4;
  --brand-primary: #ff9a2f;
  --brand-point: #ffd75a;
}
3. 그라디언트 사용 코드
.page_shell {
  background:
    radial-gradient(circle at 18% 18%, color-mix(in oklch, var(--brand-point) 34%, transparent), transparent 34%),
    linear-gradient(135deg, var(--brand-bg), var(--brand-surface));
  color: var(--brand-font);
}

.card_surface {
  border: 1px solid color-mix(in oklch, var(--brand-border) 76%, transparent);
  background: color-mix(in oklch, var(--brand-card) 86%, var(--brand-surface));
  color: var(--brand-font);
}

.button_primary {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-point));
  color: var(--brand-bg);
}
4. DESIGN.md 메모
## brand 컬러 세트

| 역할 | CSS 변수 | Light | Dark |
|---|---|---|---|
| BG | `--brand-bg` | #fbf7f1 | #17130d |
| Surface | `--brand-surface` | #fffdf9 | #211a12 |
| Card | `--brand-card` | #fff7e6 | #2a2118 |
| Border | `--brand-border` | #eadfce | #4a3928 |
| Font | `--brand-font` | #221c14 | #fff5e6 |
| Muted | `--brand-muted` | #746b5d | #c7b9a4 |
| Primary | `--brand-primary` | #ff8a1e | #ff9a2f |
| Point | `--brand-point` | #f6c84f | #ffd75a |

- primary와 point는 버튼, 링크, 주요 CTA 그라디언트에 사용합니다.
- bg, surface, card는 페이지 배경과 카드 표면 위계를 나눕니다.
- font와 muted는 본문/보조 텍스트 대비 기준으로 사용합니다.
컬러 세트 작업 기준 더 보기

라이트/다크 컬러 세트는 어떻게 쓰나요?

bg, surface, card, border, font, muted, primary, point처럼 역할을 먼저 나누면 페이지 배경, 카드, 버튼, 입력창 색이 서로 따로 놀지 않습니다. 같은 변수명을 :root와 [data-theme="dark"]에서 덮어쓰면 다크모드 전환도 CSS만으로 관리하기 쉽습니다.

OKLCH와 color-mix는 어디에 쓰나요?

같은 두 색이라도 섞는 방식에 따라 중간색이 탁해질 수 있습니다. OKLCH 기반 color-mix는 밝기와 채도를 더 자연스럽게 유지해 hover 배경이나 소프트 그라디언트를 만들 때 유용합니다. 최신 브라우저에는 OKLCH 값을, 구형 브라우저에는 hex fallback을 함께 내보내면 안전합니다.

CSS 컬러 세트·OKLCH·color-mix 생성기 — 라이트/다크 변수 복붙 | 복붙랩