配色はデザインの命です。選ぶ色ひとつでWebサイトの印象が大きく左右されます。Webデザイナーの方々は、頭を悩ませる要素かと思います。本来であれば、多くの優れたデザインを見ることで、色彩感覚を養ったり、色彩理論を学ぶことで、色の組み合わせを学んでいく必要があるのですが、実務ではそうは言っていられない状況もあるはず。
今回は、そんなときに役立つ、10のカラーパレットサービスをご紹介します。どれも無料でWebサイト上で使えるサービスなので、気軽に使えます。初心者デザイナーにとっては助け舟となることでしょう。
目次
1. 0to255
0to255
選んだ色のグラデーションを表示することができるカラーパレットサービス。どのくらいの色の濃さがいいのかはプロでも難しいもの。このサービスを使えば、一目で比較できるので便利です。
2. HUE/360
HUE/360
色に関する理論的な知識やセンスがなくても、合う色の組み合わせを選ぶことができるカラーパレットサービス。メインカラーを選ぶと、それに合わない色が自動で消えて、必然的に合う色だけを選べるという仕組みです。これは便利。
3. Color of Book
Color of Book
実際の雑誌や書籍の表紙に使われている色を表示することができるという、紙媒体のデザイナーなら感動もののサービスです。Amazonから雑誌・書籍名で検索したり、ファッション誌なら細かいテイストから選ぶことができます。これは仕事でヘビロテ間違いなし。
4. NIPPON COLORS – 日本の伝統色
NIPPON COLORS – 日本の伝統色
こちらは、日本の伝統色を再現することのできる配色サービス。色の名称がどれも和を感じるものばかりで風情があります。和のイメージを強調したいWebサイトを作るときにきっと大活躍してくれるでしょう。
5. ウェブ配色ツール Ver2.0
ウェブ配色ツール Ver2.0
Webサイトの配色を半自動的に選んでくれるカラーパレットツール。メインとなるカラーを選ぶと、その色に合った色でWebサイト全体の配色を決めてくれます。直接サイトのプレビューを見ながら、色を選び、調整していくことができるので、配色に自信のない初心者でもおすすめ。
6. BrandColors
BrandColors
ここを見れば、企業のブランドカラーの配色のカラーコードが一目でわかるというサイト。GoogleにAmazonにFacebookなど、名だたる企業の配色が丸わかりです。各企業のブランディングの象徴ともいえるブランドカラー。ぜひ参考にしてみてください。
7. Adobe Color CC
Adobe Color CC
Adobe公式のカラーパレットサービスで、Creative Cloudに登録すれば無料で使うことができます。iPhoneアプリ版もあります。Photoshopなどの他のAdobeサービスと同期して使えるので、Adobeユーザーであれば使い勝手抜群です。
8. Paletton
Paletton
カラーパレットから使いたい色をクリックするだけで、直感的に色の組み合わせを作ることができるサービス。作った色を実際のWebサイトで見ることができる機能も付いているので、便利です。
9. Material UI Colors
Material UI Colors
マテリアルデザインに使われている、色を選ぶことができるカラーチャート。カラーチャートから色を選ぶと、カラーコードが表示されるというシンプルなサービスなので、用途がはっきりしていて使いやすいです。
10. Coleure
※2020年8月現在サービス終了
ポップなUIが魅力的なカラーパレットサービス。色を選んで、比較したり、混ぜ合わせることもできます。好きな色は右側のスペースに保存することも可能。遊び感覚で使うことができるので、色に迷ったときは試してみるといいかも。
もう配色には悩まない！
日々の業務においてぶち当たる配色の悩み。紹介したカラーパレットのWebサービスを使えば、すぐに解決できますよ。これがあれば、どの色が良いかわからなくなって、「自分には色彩センスがない……」と落ち込む必要はもうありません。
今後のWebサイトデザインに、ぜひ活用してみてください。
※掲載している情報は記事更新時点のものです。
※本サイトは、法律的またはその他のアドバイスの提供を目的としたものではありません。当社は本サイトの記載内容（テンプレートを含む）の正確性、妥当性の確保に努めておりますが、ご利用にあたっては、個別の事情を適宜専門家にご相談していただくなど、ご自身の判断でご利用ください。