디자인 시스템 색상 팔레트

시스템	색 수	구조	공식 소스
Material Design 톤	89	6개 색상 계열 × 13단계	`Material Web v0.192 · md-ref-palette`
Tailwind CSS 팔레트	286	26개 색상 계열 × 11단계	`Tailwind CSS v4 · theme.css`
UnoCSS 팔레트	264	24개 색상 계열 × 11단계	`UnoCSS preset-mini · Tailwind v3 + Windi`
Panda CSS 토큰	242	22개 색상 계열 × 11단계	`Panda CSS · @pandacss/preset-panda`
Vanilla Extract 테마	3	의미 토큰 3개	`vanilla-extract · createTheme docs example`
StyleX 토큰	6	의미 토큰 6개	`StyleX · defineVars docs example`
Bootstrap 팔레트	29	의미 토큰 29개	`Bootstrap v5.3.8 · _variables.scss`
Ant Design 팔레트	130	13개 색상 계열 × 10단계	`Ant Design · @ant-design/colors 7.2.1`
Open Color	130	13개 색상 계열 × 10단계	`Open Color 1.9.1 · open-color.js`
Chakra UI 팔레트	100	10개 색상 계열 × 10단계	`Chakra UI · @chakra-ui/theme 3.4.1`
Radix Colors	360	30개 색상 계열 × 12단계	`Radix Colors 3.0.0 · light scales`
Fluent UI 브랜드 컬러	64	4개 색상 계열 × 16단계	`Fluent UI · @fluentui/tokens brandColors`
Primer 팔레트	20	의미 토큰 20개	`Primer · @primer/primitives 11.10.0 light`
Polaris 팔레트	192	12개 색상 계열 × 16단계	`Shopify Polaris · polaris-tokens 9.4.2`

팔레트 활용법

1

제품에서 이미 쓰는 팔레트를 고르면 실제로 배포하는 CSS 변수와 값이 일치합니다.

2

각 스와치에서 색상 페이지를 열어 HEX·RGB·HSL·OKLCH와 대비를 확인합니다.

3

글자와 배경 조합을 확정하기 전에 두 색을 대비 도구에서 검사하세요.

이 색상 값은 어디서 오나요?

각 팔레트는 디자인 시스템이 공개한 패키지(Tailwind의 theme.css, Material·Bootstrap·Ant Design 등의 토큰 파일)에서 파싱합니다. 추정값은 없습니다.

왜 어떤 시스템은 패밀리, 어떤 시스템은 토큰으로 표시되나요?

Tailwind 같은 스케일 기반 시스템은 색상 계열당 11단계를, Primer 같은 토큰 기반 시스템은 의미를 담은 이름을 제공합니다. 각 페이지는 실제 구조를 그대로 보여줍니다.

상업적으로 사용할 수 있나요?

팔레트는 각 프로젝트가 관대한 라이선스(대부분 MIT 또는 Apache-2.0)로 공개합니다. 사용하는 시스템의 라이선스를 확인하세요.

계정이나 API 키가 필요한가요?

필요 없습니다. 모든 값은 페이지에서 바로 읽을 수 있고 같은 데이터를 무료 API로도 제공합니다.

모든 도구 전통색 API 문서 디자인 토큰