도구로 돌아가기

Color Palette Generator

아름다운 색상 팔레트를 즉시 생성

100% 무료브라우저에서 실행가입 불필요

이 도구에 대해

디자인 프로젝트를 위한 조화로운 색상 구성을 만드세요. 보색, 유사색, 삼원색, 분할보색 모드 중 선택하거나 이미지에서 팔레트를 추출하세요. CSS 변수, JSON, PNG 견본으로 aukimi Inkwell 및 기타 도구용으로 내보내기. aukimi Inkwell의 일부.

기능

  • 다양한 색상 하모니 모드
  • 이미지에서 색상 추출
  • CSS, JSON 또는 PNG로 내보내기
  • 조절 가능한 채도와 밝기
  • 개별 색상 코드 복사

사용 사례

웹사이트 및 앱 색상 구성브랜드 아이덴티티 팔레트일러스트 색상 계획

이 도구 공유

다른 사람들이 발견하도록

HN

무료 계정을 만들어 워터마크를 제거하세요

작업을 저장하고, 전체 크리에이티브 스위트에 접근하고, 워터마크 없이 내보내세요.

무료 계정 만들기

더 필요하신가요?

aukimi Inkwell 사용해보기

레이어, 마스크, 필터, 전체 태블릿 지원을 갖춘 전문적인 비트맵 편집.

자세히 보기무료 계정 만들기

How to create a color palette

Generate a 5-color palette using harmony rules, extract from an image, or browse community palettes — then export to code.

  1. 1

    Pick a harmony mode

    Trending (curated), complementary, triadic, tetradic, analogous, split-complementary, or monochromatic.

  2. 2

    Press Space to regenerate

    Each press rolls a new palette within your chosen harmony. Lock any color (padlock icon) to keep it between rolls.

  3. 3

    Or extract from an image

    Click Extract and drop a photo — k-means pulls 5 dominant colors.

  4. 4

    Check contrast

    Open the Contrast panel to see WCAG AA/AAA ratios for every color pair.

  5. 5

    Export

    Choose Tailwind, SCSS, CSS Variables, SVG strip, Figma JSON, or PNG from the Export bar.

자주 묻는 질문

How are the "Trending" palettes chosen?

The 177-palette curated list is hand-picked from highly-rated community sources (ColourLovers top-rated, Coolors trending, industry designers). Pressing Space rolls a new trending palette each time.

Can I extract a palette from my own image?

Yes. Click Extract from Image, drop a photo or artwork, and the tool runs a k-means clustering on the pixels to pull out 5 dominant colors. Works great for mood-board analysis and photo-derived brand palettes.

What is the difference between complementary, triadic, and tetradic harmonies?

Complementary picks one color plus its opposite on the wheel (max contrast). Triadic uses three colors 120° apart (vibrant but balanced). Tetradic picks four colors in two complementary pairs (rich, harder to balance). Analogous uses neighbors on the wheel (calm, cohesive).

How do I export to Figma / Tailwind / SCSS?

Use the Export bar at the bottom. Tailwind emits a config snippet ready to paste under `theme.extend.colors`. SCSS gives you `$name-N` variables plus a map. Figma format is native JSON importable via the Figma Tokens plugin.

Do my palettes get saved?

If you are signed in, you can save palettes to My Palettes. Otherwise, use the Share button — you get a link that encodes the palette and lets anyone load it without account.

What does the Contrast Check assess?

WCAG AA (4.5:1) and AAA (7:1) contrast ratios for every pair of colors in the palette, so you know which combinations are safe for body text vs large text vs decoration only.