Color Palette
컬러 팔레트
한 제품·브랜드에서 사용할 색의 모음으로, 주 색·보조 색·강조 색·배경 색을 체계적으로 정해 두는 디자인 토큰의 핵심 요소입니다.
쉽게 말하면?
회사 로고가 빨강이라고 모든 화면을 빨강으로 칠하면 눈이 피로해집니다. 컬러 팔레트는 '주 색은 어디, 강조는 어디, 배경은 어디' 같은 규칙을 정해 두는 약속입니다. 한국 토스의 파랑·당근의 주황·네이버의 초록이 모두 팔레트에서 시작됩니다. 미국에서는 Tailwind CSS·Material Design이 추천 팔레트를 제공해, 비전공자도 무료로 표준 팔레트를 가져다 쓸 수 있습니다. AI 시대에는 v0가 사이트 분위기에 맞는 팔레트를 자동 제안합니다.
한 줄로 비유하면?
팔레트는 화가의 물감 트레이입니다. 정해진 몇 색만으로 작품을 그려야 통일감이 생깁니다.
어디에 쓰이나?
토스 · 파랑 팔레트
토스 파랑은 50→900 단계로 정확히 정의됨.
결과: 화면 간 일관성·신뢰감 유지.
Tailwind CSS 기본 팔레트
22개 색상 × 11단계 = 242색이 무료 공개.
결과: 1인 개발자도 검증된 팔레트로 즉시 시작.
주의할 점은?
컬러 팔레트가 입문자에게 중요한 이유는 세 가지입니다.
첫째, 일관성이 곧 신뢰입니다. 색이 화면마다 다르면 사용자가 무의식적으로 '엉성하다'고 느낍니다.
둘째, 무료 팔레트로 시작하면 됩니다. Tailwind·Material·Open Color 모두 무료입니다.
셋째, AI 도구가 자동 제안합니다. v0에 '따뜻한 카페 분위기 사이트' 같은 한 줄로 팔레트가 결정됩니다.
어떻게 발전해 왔나?
2010
Material Color
Google이 표준 색 도구 공개.
2017
Tailwind 팔레트
현대 웹 표준 색 시스템 정립.
2024
AI 팔레트 자동 생성
v0·Bolt가 사이트 분위기에 맞춰 팔레트 자동 제안.
관련 태그
참고 자료
- Tailwind 컬러 가이드 — 공식 대표 페이지 · Tailwind Labs · 2026 접속 — https://tailwindcss.com/docs/customizing-colors
- Material Design Color — Google 색 시스템 · Google · 2025 — https://m3.material.io/styles/color/overview
- Open Color — 무료 오픈소스 팔레트 · Open Color · 2025 — https://yeun.github.io/open-color/
- 토스 디자인 — 한국 팔레트 사례 · 토스 · 2024 — https://design.toss.im/
- State of CSS 2024 — 팔레트 도구 통계 · Devographics · 2024 — https://stateofcss.com/
대표 출처
Tailwind CSS Colors · Material Design이 페이지에 대한 의견을 남겨주세요
여러분의 의견은 다음 갱신에 반영됩니다.