色の組み合わせ「配色」センス向上できるサイト・アプリ6選

0

あらゆる場面で色の組み合わせ、即ち「配色」について悩む機会が多いと思います。グラフィックデザイナーにWebデザイナー、デザインやアパレル関係の仕事以外にも、プレゼン資料から報告書、ちょっとした手書きカードや店舗のPOPなどの印刷物、日常生活では洋服のコーディネイトや部屋のインテリア雑貨のチョイスまで、私たちの仕事から生活に至るまで、配色について「センスがあれば」と困った人も多いのでは?そこで今回は、苦手な人も多い配色選びを手軽に行うことができる、無料のオンラインツール・サイトやPhone/Androidアプリで使える配色ツールをご紹介します!

Adobe color CC

スクリーンショット 0028-08-19 18.00.53
https://color.adobe.com/ja/create/color-wheel/
Adobe製品でおなじみの「Adobe Color CC」。Adobe Creative CloudのアカウントIDが必要になりますが、IllustratorやPhotoshopといったAdobe製品を使用している方はアプリケーションとの連携機能もあり使いやすいかと。使用方法は指定したカラールールに基づき、カラーホイールを用いた操作が扱いやすく、様々な色の組み合わせを確認でき何色ものパターンも用意されています。
iPhone,iPad,Android向けのアプリもあり、撮影した写真、映像から色を抽出し配色カラーパレットを作成機能や、保存したカラーテーマを他のAdobeサービスと同期して利用できるアプリツール。

HUE/360

スクリーンショット 0028-08-19 18.55.04
http://hue360.herokuapp.com/
最初のキーカラーを決めれば、色相、彩度、明度から自動的に相性の良い配色を選出してくれます。
画面のデザインも分かりやすく操作方法もシンプルです。選択された色が下部に表示され、色の比較をすることも可能です。知識がない方でも、色の三要素についての理解を深めることに役立ち、プレゼン資料や報告書・企画書などの作成時にも役立ちそうです。

Colordot

スクリーンショット 0028-08-19 18.42.16
http://color.hailpixel.com/
ブラウザ上のマウスポインタを動かしクリックする度にカラーを記憶して行く、シンプル且つ直感的なサイトです。画面の左側にクリックした時に記憶した色が配置され、右側が色を選択座標(X軸が彩度/Y軸が明度)を選択できる分かりやすいインターフェイスです。イロイロな色の組み合わせを試してみてください。
iOS版もhttps://color.hailpixel.com/ios/

coolors.co

スクリーンショット 0028-08-19 18.38.08
https://coolors.co/
ランダムに5つの配色を選出してくれるサイトです。URLにアクセス後、キーボードの「スペースキー」を押すと自動的にハイセンスな配色がブラウザ上に展開されていきます。カラーコードの取得も可能です。何も考えず困った時に役立つサイトです。

日本の伝統色「NIPPON COLORS」

スクリーンショット 0028-08-19 17.51.48
http://nipponcolors.com/
日本の伝統色を一目で調べることができ、何よりもデザイン・アニメーションが美しく、見ていても飽きないサイトです。日本古来色の名前をクリックすると、サイト全体に色が反映され、各CMYKのカラーモード、RGBのカラーコードが瞬時に表示されます。改めて日本の伝統色の美しさを実感でき色の名前を覚えてみても良いかもしれません。

グラデーションの「shade」

スクリーンショット 0028-08-19 17.58.11
http://jxnblk.com/shade/
ブラウザ上にてグラデーションを作ることができるサイトです。カラーコードを入力後、ベースカラーを確定し、色やグラデーションの各バーの値を調整してグラデーションを作成して行きます。作成した色のCSSプロパティがそのまま表示されるのでオススメです。

DICデジタルカラーガイド

スクリーンショット 0028-08-19 18.24.00
http://www.dic-graphics.co.jp/products/dcguide/
色見本帳の「DICカラーガイド」をMac/iPhone/iPad/アンドロイド/にて確認できる便利ツールです。
カラーチップが手元になかった場合、写真やデータの中にある色のカラーコードなどの情報を瞬時に検索し、尚且つ類似色を数色表示してくれ、その場で調べる事ができる優れものです。かDICナンバーからCMYK,RGB値も表示してくれます。デザイナーさんにはトーンアンドマナーであわせる時にオススメのツールです。