返回工具

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.