UIデザイン用に、AIで色彩理論に基づいたカラーパレットを生成してくれる無料オンラインツール -AI Color Combination Generator
Post on:2024年4月3日
AIによる便利ツールが増えてきましたね!
WebサイトやスマホアプリのUIデザイン用に、入力されたプロンプトを元に色彩理論に基づいたカラーパレットを生成してくれる無料オンラインツールを紹介します。
![AIが色彩理論に基づいたカラーパレットを生成してくれる無料オンラインツール -AI Color Combination Generator](http://coliss.com/wp-content/uploads-202402/2024040201@2x.png)
AI Color Combination Generator
AI Color Combination Generatorの使い方は簡単、登録など面倒なことは一切不要です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202402/2024040202-01@2x.png)
AI Color Combination Generator
サイトにアクセスして、キーワードとなるテキストのプロンプトを入力すると、カラーパレットを生成してくれます。プロンプトは、下記のような感じです。季節や気分、テーマ、カラーに関するキーワードがお勧め。
![プロンプトの例](http://coliss.com/wp-content/uploads-202402/2024040203@2x.png)
プロンプトの例
プロンプトを入力すると、AIが色彩理論に基づいてカラーテーマをデザインし、カラーホイール上のカラーを調和して、美しいカラーパレットを生成してくれます。
たとえば「color palette blue」を入力すると、ブルーのカラーパレットが生成されました。カラーの値はクリックでコピーしたり、ダウンロードボタンからSVGでダウンロードできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202402/2024040202-02@2x.png)
下部のボタンをクリックすると、新たなカラーパレットを生成してくれます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202402/2024040202-03@2x.png)
ほかのプロンプトを試してみます。「color palette spring」で春のカラーパレットを生成。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202402/2024040202-04@2x.png)
再生成したら、桜っぽい感じになりました。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202402/2024040202-05@2x.png)
「Edit color pallet」をクリックすると、そのカラーパレットをUIデザインに適用したサンプルを見ることができます。カラーパレットの各カラーは明るさを変化させたり、まったく違うカラーに変更することもできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202402/2024040203-01@2x.png)
「color palette blue」で生成したカラーパレット
「UI Kit」のプルダウンからUIを変更できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202402/2024040203-02@2x.png)
「color palette blue」で生成したカラーパレット
sponsors