誰でもプロ並みの色調が作れる無料のカラーパレットサービス厳選8選

高機能なCMSが続々とリリースされている今、特別な技術がなくてもホームページやランディングページを作成できる環境が整ってきました。
Web制作会社やデザイナー等の専門職の方に頼らずにWebページを制作される方も増えてきていると思いますが、制作時につまづきやすいのが「配色」の選定です。
配色はページ全体の印象を決めますが、作成者のセンスに左右されるため、デザイナーのように配色の知識が無い方は何かと時間をとられてしまいます。

今回は、配色に自信の無い方でも最新のホームページのような配色ができる無料のカラーパレットをご紹介します。
あらかじめ配色が決まっているもの、自分で配色を調整できるものなど様々なパレットがあるので、目的に沿って使い分けてみましょう。

目次

1. カラーパレットを利用する前にカラーコードの基本を知っておこう
2. イマドキな配色パターンが豊富なカラーパレットまとめ
3. まとめ

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

カラーパレットを利用する前にカラーコードの基本を知っておこう

基本的に、Web上で使われる全ての色には番号が振られており、色ごとに振られた番号をカラーコードと呼びます。
カラーコードは6桁の英数字で構成され、全部で256色あります。

一度使った色を再び使いたい場合は、カラーコード単位で記録しておくと感覚頼りになることもありません。
特に、複数色の微妙な組み合わせが肝となる配色パターンを形成する場合は、確実にカラーコードを把握しておいた方が良いでしょう。

カラーパレットを利用する前に、カラーコードの基本的な仕組みを理解しておきましょう。

参考：
16進数のカラーコードより色を推測するメソッド(カラーコードの仕組みについて)
こちらのブログでカラーコードの構成について非常にわかりやすく解説されています。

イマドキな配色パターンが豊富なカラーパレットまとめ

既に流通している配色パターンを利用すれば、自分で考える手間が省けるうえ、配色のメソッドから大きく外れることもありません。
こちらでは、フラットデザインやマテリアルデザインに最適な配色パターンを掲載しているサービスを集めました。

1.Coolors

Coolors.co - The super fast color schemes generator

CoolorsもCOLOURloversと同じく、ユーザーが作成した配色パターンを共有することができます。
配色パターンの上にカーソルを置き、「EXPORT」をクリックするとカラーコード付きの配色パターン画像をPNGやPDFなどの形式でダウンロードできます。

2.Oto255

0to255 – A simple tool that helps web designers find variations of any color

TOPページ下部にある色一覧で、好きな色を選ぶとその色のグラデーションが表示されます。自分の好みの色が選びやすくなっているのが特徴です。

3.NIPPON COLORS

NIPPON COLORS - 日本の伝統色

日本独特の伝統食を再現できるカラーパレットです。Webサイトで和を表現したいときに重宝したいサービスです。

4.COLOURlovers

Browse Palettes :: COLOURlovers

COLOURloversのユーザーが作成した配色パターンを自由に閲覧、利用することができます。
こちらも、配色パターンをクリックすると各色のカラーコードが確認できます。

5.Material Design Color Palette Generator - Material Palette

Material Design Color Palette Generator - Material Palette

マテリアルデザインに最適化された色を揃えており、この中から2色選択すると自動的に配色パターンを提示してくれます。

2色をクリックしたら右側にサイトイメージが表示されます。

6.[ HUE / 360 ] The Color Scheme Application

[ HUE / 360 ] The Color Scheme Application

先に明度を選択し、好きな色を1色クリックすると、その色と組み合わせてもおかしくない色のみが表示されます。

まず「Bright（明るさ）」を選択します。

次に好きな色をクリックすると、その色と相性の良い色だけが表示されます。
各色をクリックすると画面下側に選択した色が配置されていきます。

7.colourcode - find your colour scheme

colourcode - find your colour scheme

こちらは、直感的なマウス操作で配色を決めることができます。

画面左端に表示されているマークをクリックし、好みの配色パターンを選びます。
配色パターンを選択後、マウスを上に動かすと色が暗くなり、下に動かすと明度が上がります。左右に動かすと色が変更され、マウスのホイールなどでスクロールすると彩度を変更できます。

配色が決まったらクリックしましょう。色が固定されたことを表すロックマークと、各色のカラーコードも表示されます。

8.Adobe Color CC

Adobe Color CC
Adobe社が提供する配色ツールです。
こちらも簡単な操作で複数色の配色を決めることができます。

先に「カラールール」を選択します。

画面中央の円の中にある「◯」をクリックし、そのままドラッグすると、様々な配色パターンが表示されます。

各色をクリックすると、1色を基準に微調整ができる仕様になっています。
（1色を変更すると、それに合わせて他の色も変化します。）
下部にカラーコードが表示されています。

まとめ

複数色の配色バランスを考えることは、デザイナー職でない方にとってはかなり難しい作業になります。
配色は感覚的に見えて、実はシステマチックに構築できるため、一般的なホームページであればカラーコードを元に機械的に判別された配色を利用する方が効率的です。

自分が不得意と感じる分野は、積極的にテンプレや既存のサービスを利用し、自分が本来時間をかけるべき部分に注力できるよにしましょう。

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

このニュースを読んだあなたにおすすめ

Photoshop初心者必見！Photoshopを使いこなすために知っておくべき情報まとめ
印刷OKで商用無料の人気フリーフォント26選