컬러 세트·OKLCH·color-mix,
미리 보고 바로 복붙.

라이트/다크 컬러 세트 변수와 그라디언트 사용 코드, OKLCH 팔레트와 hex fallback, color-mix hover 배경까지 역할별로 나눠 만들고 필요한 코드만 복사하세요.

컬러 세트 만들기그라디언트·패턴 도구
Color quick start

처음이면 이렇게 시작하세요

  1. 역할별 색상 정하기bg, font, primary, point 역할을 나눠 라이트/다크 컬러 세트를 만듭니다.
  2. 그라디언트·OKLCH 확인기준 색상과 각도를 조정하며 고급 그라디언트와 OKLCH 팔레트를 미리 봅니다.
  3. 필요한 코드 복사컬러 세트 변수, 그라디언트, OKLCH·hex fallback 코드를 각각 복사합니다.
Color CSS

색상 흐름 CSS 생성기

기준 색상과 각도를 정하면 고급 그라디언트, 라이트/다크 컬러 세트, OKLCH 팔레트 코드를 함께 뽑습니다.

컬러 세트light/dark 변수 + 그라디언트

라이트

다크

LightLanding section

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

Card surfaceborder / card / surfacePrimary actionInput surface
DarkLanding section

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

Card surfaceborder / card / surfacePrimary actionInput surface
전체 컬러 세트
: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는 본문/보조 텍스트 대비 기준으로 사용합니다.
고급 그라디언트스톱·투명도·레이어
스톱 기반 CSS
.advanced_gradient {
  background: linear-gradient(135deg, #ff8a1e 0%, #ffe2a6 34%, #22d3ee 68%, #fef3c7 100%);
  background: linear-gradient(135deg, color-mix(in oklch, #ff8a1e 88%, transparent) 0%, color-mix(in oklch, #ffe2a6 88%, transparent) 34%, color-mix(in oklch, #22d3ee 88%, transparent) 68%, color-mix(in oklch, #fef3c7 88%, transparent) 100%);
}

피그마 캔버스에 붙여넣으면 스톱까지 편집 가능한 그라디언트 벡터로 들어갑니다.

OKLCH 팔레트hex fallback 포함
PrimaryAccentSurfaceSoft
OKLCH 전체 묶음
:root {
  --brand-primary: #e8560f;
  --brand-accent: #f6c84f;
  --brand-surface: #fff7e6;
  --brand-primary-hover: #b94308;
  --brand-primary-soft: #ffe8bf;
}

@supports (color: oklch(50% 0.1 120)) {
  :root {
    --brand-primary: oklch(64% 0.18 43);
    --brand-accent: oklch(82% 0.16 82);
    --brand-surface: oklch(97% 0.03 88);
    --brand-primary-hover: color-mix(in oklch, var(--brand-primary) 78%, black);
    --brand-primary-soft: color-mix(in oklch, var(--brand-primary) 18%, var(--brand-surface));
  }
}

.button_primary {
  background: var(--brand-primary);
  color: #fff;
}

.button_primary:hover {
  background: var(--brand-primary-hover);
}

.surface_soft {
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
}
1. HEX fallback 변수
:root {
  --brand-primary: #e8560f;
  --brand-accent: #f6c84f;
  --brand-surface: #fff7e6;
  --brand-primary-hover: #b94308;
  --brand-primary-soft: #ffe8bf;
}
2. OKLCH 지원 브라우저
@supports (color: oklch(50% 0.1 120)) {
  :root {
    --brand-primary: oklch(64% 0.18 43);
    --brand-accent: oklch(82% 0.16 82);
    --brand-surface: oklch(97% 0.03 88);
    --brand-primary-hover: color-mix(in oklch, var(--brand-primary) 78%, black);
    --brand-primary-soft: color-mix(in oklch, var(--brand-primary) 18%, var(--brand-surface));
  }
}
3. CSS 사용 코드
.button_primary {
  background: var(--brand-primary);
  color: #fff;
}

.button_primary:hover {
  background: var(--brand-primary-hover);
}

.surface_soft {
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
}
다른 CSS 도구
그라디언트·패턴레이아웃·유틸
컬러 세트 작업 기준 더 보기

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

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 생성기 — 라이트/다크 변수 복붙 | 복붙랩