UIデザインに特化された配色ツール! Webサイトやスマホアプリで使用する色に悩んだときに便利 -Goodpalette

見栄えの良い4色または5色を組み合わせる配色ツールはいろいろありますが、WebサイトやスマホアプリのUIデザインだとうまく機能しないことがあります。

カラーブランディングに成功しているWebサイトを見ると、そんなに数多くの色は使用されていません。デザインの一貫性を保つには、プライマリーカラーを1つ、アクセントカラーを1つ、あとはニュートラルトーンのベースカラーを使用しています。

この3つのカラーに9つの色合いを組み合わせたカラーパレットを生成する配色ツールを紹介します。

UIデザインに特化された配色ツール! Webサイトやスマホアプリで使用する色に悩んだときに便利 -Goodpalette

Goodpalette

GoodpaletteはUIデザインに特化されたオンラインの配色ツールで、無料で使用できます。登録など面倒なことは一切不要。

使い方は簡単で、上部の「Generate」ボタンをクリックするだけです。生成した配色は、WebサイトやSlackやダッシュボードでどんな感じになるか確認できます。

サイトのキャプチャ

Goodpalette

特定のカラーをプライマリーカラーにしたい場合は、上部のスポイトをクリックし、カラーを設定します。

プライマリーカラーの変更

プライマリーカラーの変更

生成した配色は、CSS/SCSSの変数として簡単に利用できます。

配色のエクスポート

配色のエクスポート

SVGにも対応しているので、FigmaやSketchにペーストするとカラーパレットが作成されます。

Figmaに配色をエクスポート

Figmaに配色をエクスポート

プライマリーカラー、アクセントカラー、ベースカラーにはそれぞれ9つの色合いが生成され、コントラストの確認もできます。

コントラストの確認

コントラストの確認

生成した配色はURLも発行され、プライマリーカラー、アクセントカラー、ベースカラーの3色を使用した状態で表示することもできます。

サイトのキャプチャ

Goodpalette(画像と同じ状態で表示されます)

どんな感じになるか、他にも試して見ました。

サイトのキャプチャ

Goodpalette(画像と同じ状態で表示されます)

プライマリとアクセントにニュートラルトーンのカラー、9つのシェードが生成されるのは便利ですね。

サイトのキャプチャ

Goodpalette(画像と同じ状態で表示されます)

sponsors

top of page

©2022 coliss