Color Palette from Image
Extract dominant colors from any image using k-means clustering with CSS, Tailwind, Figma, and ASE export.
このツールについて
Upload any image and extract its dominant color palette using k-means clustering — the same algorithm used by professional design tools. Choose 5, 8, 10, or 12 colors with the slider. Each extracted color is matched to the nearest named CSS color for easy reference. Export in four formats: CSS custom properties, Tailwind CSS config, Figma-compatible JSON, or Adobe ASE binary. The harmony analyzer checks whether your palette is complementary, analogous, triadic, or split-complementary. The built-in accessibility checker computes WCAG contrast ratios between all color pairs and flags which combinations pass AA or AAA standards.
使い方
- 1 Click 'Upload Image' or drag-and-drop any JPG, PNG, WebP, or GIF.
- 2 Adjust the color count slider to 5, 8, 10, or 12 swatches.
- 3 Click 'Extract Palette' — results appear with hex codes and nearest CSS color names.
- 4 Choose an export format (CSS variables, Tailwind, Figma JSON, ASE) and click Download.
- 5 Review the Harmony Analysis and Contrast Accessibility panels below the palette.
よくある質問
画像をアップロードして主要な色を美しいパレットとして抽出します。
補色、類似色、三色配色などのハーモニールールを使用してベースカラーから調和のとれたカラーパレットを生成します。
前景色と背景色のペアのWCAG 2.1コントラスト比を確認し、合否結果を即座に取得します。
Generate random single colors or harmony-aware palettes with HSL constraints, locked colors, export to CSS/HEX/RGB/HSL, and palette history.