色の組み合わせ方の参考にいい!Webサイトやスマホアプリに適したカラーパレットを生成する無料ツール -Color

指定したカラー、画像、Webページなどをベースに、カラーパレットを生成し、カスタマイズできる無料のオンラインツールを紹介します。

カラーパレットは、Webサイトやスマホアプリに特化されており、コンテンツに使用されるさまざまな要素への適用、アクセシブルなカラーの組み合わせなどが生成されます。

サイトのキャプチャ

Color
Color -GitHub

Colorでは、さまざまなリソースを元にカラーパレットを生成し、カスタマイズできます。

  • 既存のWebページをベースに
  • 指定したカラーをベースに
  • カラーボックスをベースに
  • 画像をベースに
  • JSONをベースに

生成したカラーパレットは、CSS, Sass, JSONなどに書き出すことができ、色の名前なども分かります。

まずは、2019年のトレンドカラー「Living Coral」をベースに作成してみました。

サイトのキャプチャ

指定したカラーをベースに、カラーパレットを生成

生成されたカラーパレットは、カスタマイズも可能。
変更したくないカラーにはロックをかけ、「Add color」をクリックすると自由にカラーを加えることができます。

サイトのキャプチャ

カラーパレットのカスタマイズ

画像をベースにする際は、手元の画像をアップロードしたり、Unsplashの画像を利用できます。

サイトのキャプチャ

画像をベースに、カラーパレットを生成

既存のWebページをベースにカラーパレットを生成する機能も非常に便利です。そのままカラーのガイドラインとして使用したり、リニューアル時のデザインの参考資料としても役立つと思います。

サイトのキャプチャ

当ブログをベースに、カラーパレットを生成

sponsors

top of page

©2024 coliss