色の悩みを解決してくれるアプリやサービス

アプリを開発するときに、いつも色で悩みます（色って難しいですよね）。
今回は、色についての悩みを解決してくれる色々なサービス（色だけに）を紹介します。

## 色の名づけどうする？ 

まずは、色の名づけです。

たとえば、アプリでこんな色をつかうことになりました。

![color01.png](https://qiita-image-store.s3.amazonaws.com/0/38924/4659607b-a3a2-6d2e-95cc-9515dbf2a2a6.png)


毎回カラーコードを入力するのは大変なので、定数にカラーコードを登録しようとします。しかし、そのとき、ハタと手が止まります。

定数の名前はなににしよう？　と。

濃い青だからdarkBlueで、普通っぽい青はbuleで、緑っぽい青はgreenBlueで、ってわけがわからんわー！　となります。

そんなときに活躍するのが、[Coolors](https://coolors.co "Coolors")です。

![color02.png](https://qiita-image-store.s3.amazonaws.com/0/38924/ae142b76-d613-38f9-fe1e-2723dca380f3.png)


こちらのサイトでは、カラーコードだけでなく、色の名前が表示されます。この名前をつかえば、名づけで悩むこともありません。

また、名づけルールが統一されるので、チームで開発するときにも混乱しませんし、作業を引き継ぐときにも間違うことはありません。

## これって何色？

外を歩いているとき、ネットを見ているとき、アプリをつかっているとき、この色いいな、アプリにも使いたいな、ということがあります。

でも、何色なのかわからなくて困ってしまう。そんなときに、写真や画像から色を調べてくれるのが[Adobe Color CC](https://color.adobe.com/ja/create/color-wheel/ "Adobe Color CC")というサービス、または[Adobe Capture CC](https://helpx.adobe.com/jp/mobile-apps/how-to/capture-color-theme.html "Adobe Capture CC")というアプリです。

こちらがアプリの画面です。

<img width="414" alt="color03.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/38924/6d1a7a70-2aec-ff4f-5641-ee1725ddb1db.png">


写真を選択すると白丸が現れるので、タップで調べたい色の場所に移動します。そうすると、画面上側に白丸の位置の色が表示されます。

<img width="414" alt="color04.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/38924/5a42c424-b3e8-7a7f-c84e-7932aa151ebe.jpeg">


つぎの画面では、選んだ色の詳細を見ることができます。

さきほど紹介した[Coolors](https://coolors.co "Coolors")でも写真や画像から色を調べることができます。お好みで使いわけてください。

## どんな配色にしよう？

色の悩みといえば、配色があります。
色の組み合わせが悪いと、重要な情報に気がついてもらえず、ユーザーが迷子になってしまいます。

そんなときに便利なのが、さきほども紹介した[Adobe Color CC](https://color.adobe.com/ja/create/color-wheel/ "Adobe Color CC")、または[Adobe Capture CC](https://helpx.adobe.com/jp/mobile-apps/how-to/capture-color-theme.html "Adobe Capture CC")というアプリです。

<img width="414" alt="color05.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/38924/2c6991a2-7669-c9a8-b761-46edba919e66.png">


このようにいくつかあるルールから選ぶだけで、キーとなる色をもとに、配色のサンプルを作成してくれます。

<img width="414" alt="color06.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/38924/97224d66-6eb2-d84b-8985-3e85bdab29c4.jpeg">


こちらは補色を選んだサンプルです。
このように、とても簡単に見やすくてステキな配色を作成することができます。

また、こちらの[配色完全ガイド！カテゴリー別見本100個とカラーパレットの使い方まとめ](http://photoshopvip.net/78358 "配色完全ガイド！カテゴリー別見本100個とカラーパレットの使い方まとめ")もオススメです。

> 「自然（英; Nature）」、「フード（英: Food & Drink）」、「旅行（英: Travel）」、「ライフスタイル（英: everyday）」4つにカテゴリー分けされた写真を参考に、配色決めでつかえる100種類のカラーパレット組み合わせをご紹介します。

![color07.png](https://qiita-image-store.s3.amazonaws.com/0/38924/ca07b243-aa86-474a-7ff0-dc27b6147f44.png)


説明文に書いてあるように、なんと100種類もの組み合わせが紹介されています。
どの組み合わせにもステキな写真がついているので、実際にその色をつかったときのイメージがしやすいところもいいですね。

## おまけ

色についての悩みを解決してくれる便利なサービスやアプリを紹介しました。

最後にもうひとつ、おもしろいアプリを紹介します。

それは、[コピックコレクション](https://copic.jp/product/app/ "コピックコレクション")です。

もともとは、コピックというアルコールマーカーを管理するためのアプリなのですが、アップデートでおもしろい機能が追加されました。

たとえば、写真や画像から色を選択すると近い色のコピックを教えてくれたり、使用した色を記載してイラストをSNSにシェアしたりできます。

<img width="414" alt="color08.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/38924/a0c590bd-5513-3707-7b5a-bbfda7fa9511.png">


また、こちらのように補色を表示したり、

<img width="414" alt="color09.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/38924/ff7791d4-d99f-7597-b17f-deff6bd9c08e.png">


色名の由来を見ることもできるので、いろいろな色を眺めているだけでも楽しいです。

いろいろなサービスやアプリを活用して、楽しく色で遊びましょう。