컬러 세트·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 팔레트 코드를 함께 뽑습니다.

Palette

마음에 드는 조합을 고르면 아래 생성기에 그대로 올라갑니다. 색 하나만 눌러 HEX를 복사할 수도 있어요.

토스
카카오
네이버
배달의민족
당근
라인
애플
구글
슬랙
스포티파이
에어비앤비
넷플릭스
디스코드
인스타그램
유튜브
트위치
스트라이프
링크드인
우버
파스텔 인디고
틸 톤
틸 톤 2
레드 톤
비비드 핑크
레트로 틸
파스텔 인디고 2
파스텔 블루
비비드 틸
비비드 퍼플
파스텔 틸
비비드 레드
파스텔 블루 2
파스텔 틸 2
파스텔 퍼플
파스텔 레드
비비드 틸 2
파스텔 인디고 3
파스텔 인디고 4
레트로 퍼플
블루 톤
파스텔 블루 3
블루 톤 2
블루 톤 3
비비드 블루
비비드 레드 2
비비드 퍼플 2
비비드 블루 2
파스텔 퍼플 2
파스텔 인디고 5
다크 핑크
파스텔 레드 2
파스텔 레드 3
파스텔 틸 3
비비드 레드 3
틸 톤 3
파스텔 레드 4
비비드 오렌지
블루 톤 4
비비드 틸 3
비비드 인디고
파스텔 그린
파스텔 틸 4
비비드 틸 4
비비드 레드 4
비비드 레드 5
블루 톤 5
다크 레드
컬러 세트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: #ff8a1e;
  --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: #ff8a1e;
  --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 생성기 — 라이트/다크 변수 복붙 | 복붙랩