# Figmaで画像からカラーパレットを生成するプラグイン「Image Palette」

URL: https://webrandum.net/figma-plugin-image-palette/
公開日: 2022-10-07
更新日: 2022-10-05
カテゴリー: デザイン
タグ: Figma, Figmaプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

カラーパレットをすばやく作成したいときに、画像内のカラーを抽出すると早く作成できます。

今回はFigmaで画像からカラーパレットを生成するプラグインの「Image Palette」について紹介します。

## Image Palette

![Image Palette](https://webrandum.net/mskz/wp-content/uploads/2022/10/image_1-3-scaled.jpg)

[![](https://www.google.com/s2/favicons?domain=www.figma.com)Figma![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/3a432660ff8e1800f4c3beaf1169151e63a983f241b785f7e5f88bfbb2b2abae.webp)Figmahttps://www.figma.com/community/plugin/731841207668879837/Image-PaletteFigma Community plugin - Extracts a colour palette of 5 different colours from the selected images.Note: This uses a median cut algorithm, which roughly approximates the most prominent different colours in the image. The algorithm is fast but can sometimes lead to unusual results, such as with low-colour images, images...](https://www.figma.com/community/plugin/731841207668879837/Image-Palette)

「Image Palette」はその名の通り、画像からカラーパレットを生成するプラグインです。

画像を選択して、プラグインを実行するだけで画像の下に抽出されたカラーが並びます。

### Palette

似たようなプラグインに「Palette」もあります。

「Image Palette」が画像下にカラーが並ぶのに対して、こちらは別モーダルで色が表示されます。

[![](https://www.google.com/s2/favicons?domain=www.figma.com)Figma![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/5e6ebc81652ea48c0fc75f40c0a12279c2af7eede4aa857d9d0f135ce889efad.webp)Figmahttps://www.figma.com/community/plugin/742549221432366731/PaletteFigma Community plugin - Palette helps you create the perfect color palette through machine learning from Colormind.UsageWhen you open Palette it will detect which shapes you have selected and use their fill colors (up to 5) or an image fill to seed your new color palette.Color palettes are generated automatically ...](https://www.figma.com/community/plugin/742549221432366731/Palette)

## 基本的な使い方

まずは画像をFigma上に配置して、選択状態にします。

![画像の配置](https://webrandum.net/mskz/wp-content/uploads/2022/10/image_2-3.png)

あとは「Image Palette」を実行するだけで、画像下に5種類のカラーが円として追加されます。

![「Image Palette」の実行](https://webrandum.net/mskz/wp-content/uploads/2022/10/image_3-3.png)

複数画像を選択した状態で実行すると、すべての画像で一気にカラーを抽出してくれます。