AIだと簡単で便利！ UIデザイン用に色彩理論に基づいたカラーパレットやUIコンポーネントを生成してくれる無料ツール -ColorMagic

サイト構築 -デザイン

Post on:2025年3月27日

AIを使ってテキストからカラーパレットを生成するツール

ColorMagicは、AIを使用してテキストや画像からカラーパレットを生成できるオンラインツールです。利用にあたっては無料で、登録など面倒なことも一切不要です。アカウントを作成（無料）すると、お気に入りやいいねなどの機能を利用できます。

AIカラーパレットジェネレーター

さっそく使用してみました。
プロンプトに「春っぽいパステルカラー」と入力してみました。色の名前やHexコードを一緒に入力すると、より作りたいカラーパレットになると思います。

プロンプトを入力して「カラーパレットを生成」をクリック

ほんの数秒で、カラーパレットが生成されます。カラーを気に入らなかった場合は、スライダーで調整もできます。また、同じプロンプトで繰り返したり、文言を少し変えてみてもよいでしょう。

生成されたパステルカラーのカラーパレット

生成されたカラーパレットは、さまざまなフォーマットで利用できます。まずは、PNG画像。

カラーパレットのPNG画像

カラーパレットのCSSも生成されます。

カラーパレットのCSS

生成されたCSSは、下記の通り。

/* CSS */
.color-1 {
  color: #f1a7b4;
}
.color-2 {
  color: #f1c3a2;
}
.color-3 {
  color: #f1e5a7;
}
.color-4 {
  color: #a7e1f1;
}
.color-5 {
  color: #a7c6f1;
}

/* CSS Variables */
:root {
  --color-1: #f1a7b4;
  --color-2: #f1c3a2;
  --color-3: #f1e5a7;
  --color-4: #a7e1f1;
  --color-5: #a7c6f1;
}

/* CSS */

.color-1 {

color: #f1a7b4;

}

.color-2 {

color: #f1c3a2;

}

.color-3 {

color: #f1e5a7;

}

.color-4 {

color: #a7e1f1;

}

.color-5 {

color: #a7c6f1;

}

/* CSS Variables */

:root {

--color-1: #f1a7b4;

--color-2: #f1c3a2;

--color-3: #f1e5a7;

--color-4: #a7e1f1;

--color-5: #a7c6f1;

}

さらに、グラデーションも生成されます。

カラーパレットを使用したグラデーション

もちろん、CSSも生成されます。

/* Linear Gradient */
.linear-gradient {
  background: linear-gradient(0.25turn, #f1a7b4, #f1c3a2, #f1e5a7, #a7e1f1, #a7c6f1);
}

/* Radial Gradient */
.radial-gradient {
  background: radial-gradient(circle, #f1a7b4, #f1c3a2, #f1e5a7, #a7e1f1, #a7c6f1);
}