UIデザインに特化された配色ツール！ Webサイトやスマホアプリで使用する色に悩んだときに便利 -Goodpalette
Post on:2022年6月15日
sponsors
見栄えの良い4色または5色を組み合わせる配色ツールはいろいろありますが、WebサイトやスマホアプリのUIデザインだとうまく機能しないことがあります。
カラーブランディングに成功しているWebサイトを見ると、そんなに数多くの色は使用されていません。デザインの一貫性を保つには、プライマリーカラーを1つ、アクセントカラーを1つ、あとはニュートラルトーンのベースカラーを使用しています。
この3つのカラーに9つの色合いを組み合わせたカラーパレットを生成する配色ツールを紹介します。
GoodpaletteはUIデザインに特化されたオンラインの配色ツールで、無料で使用できます。登録など面倒なことは一切不要。
使い方は簡単で、上部の「Generate」ボタンをクリックするだけです。生成した配色は、WebサイトやSlackやダッシュボードでどんな感じになるか確認できます。
特定のカラーをプライマリーカラーにしたい場合は、上部のスポイトをクリックし、カラーを設定します。
プライマリーカラーの変更
生成した配色は、CSS/SCSSの変数として簡単に利用できます。
配色のエクスポート
SVGにも対応しているので、FigmaやSketchにペーストするとカラーパレットが作成されます。
Figmaに配色をエクスポート
プライマリーカラー、アクセントカラー、ベースカラーにはそれぞれ9つの色合いが生成され、コントラストの確認もできます。
コントラストの確認
生成した配色はURLも発行され、プライマリーカラー、アクセントカラー、ベースカラーの3色を使用した状態で表示することもできます。
Goodpalette（画像と同じ状態で表示されます）
どんな感じになるか、他にも試して見ました。
Goodpalette（画像と同じ状態で表示されます）
プライマリとアクセントにニュートラルトーンのカラー、9つのシェードが生成されるのは便利ですね。
Goodpalette（画像と同じ状態で表示されます）
sponsors
