UI デザイナーがカラーパレットで悩んだときに参考になるサービス5選

root UIデザイナーの古里です。
UIデザインをやっていると、度々カラーパレットで悩む場面に遭遇します。特に情報が多くなってきたときは大変ですよね。
そんなとき参考にしている便利なサービス5つ紹介します！

1.Coolors(https://coolors.co/)

スペースバーを押すとカラーパレットを自動生成してくれるサービス。
ログインすると自分のカラーパレットを保存できるだけではなく、他のユーザーが保存したカラーパレットを参照することができます。
そして、撮影した写真から色をスポイトしたり、一部のカラーのみロックして他の色だけ変えたり、RBA, CMYK, HSBなど様々なカラーコードでチューニングすることが可能です。iOS/Androidアプリもリリースしており、Photoshopやイラストレーターで使えるプラグインもリリースしています。いつでもどこでも簡単にさくっとカラーパレットが作れるので重宝しているサービスです。

2.Adobe Color CC(https://color.adobe.com/ja/create/color-wheel/)

kulerというサービス名で運用されていた純正のadobeのサービスです。
coolorsを使うかAdobe Colorを使うかで意見がわかれるところではないでしょうか？Coolorsと同じように他のユーザーが保存したカラーパレットの参照が可能で、撮影した写真からカラーパレットを生成できるiOS/Androidアプリもリリースしています。浮かんできたインスピレーションをすぐにアイデアとして形に残すことができます。

3.HUE 360(http://hue360.herokuapp.com/)

HUE360はまず明度を選択し、メインカラーを選ぶと自動的にバランスの良い色を残して表示してくれます。直感的に色を選ぶことができますし、UIがシンプルでイケてるイチオシのサービスです。

4.Brand Colors(http://brandcolors.net/)

Brand ColorsはAmazonやebayからコカ・コーラやIKEAまで、様々なブランドカラーを集めたサービスです。ブランドロゴではなくブランドカラーを軸にキュレーションされたものはあまり見たことがないので面白いなと思いました。選択したブランドカラーをASE（adobe専用のスウォッチファイル）、css、scss、less、stylusにデータを書き出せるので参考にしたいときに便利ですね。

5.Material Palette(http://www.materialpalette.com)

Material Paletteは選べる色は少ないですが、2色選べばマテリアルレイアウトのモックアップへ吐き出してくれるので、イメージが湧かないときに触ってみてはいかがでしょうか？

まとめ

いかがでしたか？
UIデザインで使う配色はバランスが大切ですが、サービス内でその色が持つ意味も重要になってきます。ユーザーが直感的に使うことができるサービスは、一貫した色の使い方と、厳選されたカラーパレットを徹底しているように感じます。ぜひ参考にしてみてください！]]>