How does the color palette generator work?

Enter any hex color as the seed. The tool uses HSL color theory to generate 5 harmonious shades — complementary, analogous, triadic, and tinted/shaded variants.

Can I export the palette as CSS variables?

Yes. Click 'CSS Variables' to copy :root { --color-1: ...; } code directly. You can also export as Tailwind config or download a PNG image.

Is this tool free to use?

Completely free. No signup, no login, no watermarks. Works entirely in your browser.

Design Tool · T-001

AI Color Palette Generator AI 컬러 팔레트 생성기

Pick a seed color → get 5 harmonious shades → export as CSS, Tailwind, or PNG. 시드 컬러 선택 → 5가지 조화로운 색상 생성 → CSS, Tailwind, PNG로 내보내기.

Seed Color 시드 컬러

Harmony Type 조화 유형

Saturation 채도 80%

Your Palette 생성된 팔레트

How to Use the Color Palette Generator 컬러 팔레트 생성기 사용 방법

Pick Your Seed Color

시드 컬러 선택

Click the color picker or type any hex value. The seed is the base your palette is built from. 컬러 피커를 클릭하거나 헥스 값을 직접 입력하세요. 시드 컬러가 팔레트의 기반이 됩니다.

Choose Harmony Type

조화 유형 선택

Analogous = similar hues. Complementary = opposite hues. Triadic = 3 evenly spaced. Shades = dark→light. 유사색(Analogous), 보색(Complementary), 3색(Triadic), 명도 변화(Shades) 중 선택.

Export & Use

내보내기 및 사용

Copy as CSS variables (paste into :root), Tailwind config (paste into tailwind.config.js), or download PNG. CSS 변수(:root에 붙여넣기), Tailwind 설정, 또는 PNG로 저장하세요.

What is HSL color theory? HSL 색상 이론이란?

HSL stands for Hue, Saturation, Lightness. Hue is the color wheel angle (0–360°), saturation controls vividness, and lightness controls brightness. HSL makes harmonic colors easy to compute — just shift the hue angle. HSL은 색조(Hue), 채도(Saturation), 밝기(Lightness)의 약자입니다. 색조는 색상환 각도(0~360°), 채도는 선명도, 밝기는 밝고 어두운 정도입니다. HSL을 이용하면 조화로운 색상 계산이 쉬워집니다.

How do I use CSS variables from this tool? 이 도구의 CSS 변수를 어떻게 사용하나요?

Copy the CSS Variables output and paste into your stylesheet's :root block. Then use var(--color-1) anywhere in your CSS. This lets you change your entire palette by updating just 5 variables. CSS Variables 출력을 복사해 스타일시트의 :root 블록에 붙여넣으세요. 그런 다음 CSS 어디서든 var(--color-1)으로 사용할 수 있습니다.

Can I save my palettes? 팔레트를 저장할 수 있나요?

Yes — your last generated palette is automatically saved to localStorage and restored when you return. You can also download as PNG or copy the hex codes. 네 — 마지막으로 생성한 팔레트는 localStorage에 자동 저장되어 다시 방문 시 복원됩니다. PNG 다운로드 또는 헥스 코드 복사도 가능합니다.