色の組み合わせ方の参考にいい!Webサイトやスマホアプリに適したカラーパレットを生成する無料ツール -Color
Post on:2019年2月4日
指定したカラー、画像、Webページなどをベースに、カラーパレットを生成し、カスタマイズできる無料のオンラインツールを紹介します。
カラーパレットは、Webサイトやスマホアプリに特化されており、コンテンツに使用されるさまざまな要素への適用、アクセシブルなカラーの組み合わせなどが生成されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201901/2019020304.png)
Colorでは、さまざまなリソースを元にカラーパレットを生成し、カスタマイズできます。
- 既存のWebページをベースに
- 指定したカラーをベースに
- カラーボックスをベースに
- 画像をベースに
- JSONをベースに
生成したカラーパレットは、CSS, Sass, JSONなどに書き出すことができ、色の名前なども分かります。
まずは、2019年のトレンドカラー「Living Coral」をベースに作成してみました。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201901/2019020305-01.png)
指定したカラーをベースに、カラーパレットを生成
生成されたカラーパレットは、カスタマイズも可能。
変更したくないカラーにはロックをかけ、「Add color」をクリックすると自由にカラーを加えることができます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201901/2019020306.gif)
カラーパレットのカスタマイズ
画像をベースにする際は、手元の画像をアップロードしたり、Unsplashの画像を利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201901/2019020305-03.png)
画像をベースに、カラーパレットを生成
既存のWebページをベースにカラーパレットを生成する機能も非常に便利です。そのままカラーのガイドラインとして使用したり、リニューアル時のデザインの参考資料としても役立つと思います。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201901/2019020307.png)
当ブログをベースに、カラーパレットを生成
sponsors