こんにちは、デザイナー・ブロガーの
ゆっきー（@elcielo_design）です。
この記事では、Web・UIデザイン関連
無料カラーツールをまとめています。
この記事の目次
Webデザイン・UIデザイン関連
カラーツール
WebデザインやUIデザイン制作の際、
比較的使うことが多いカラーツールを
紹介しています。
色をCSS・Sassファイルで使える機能や
色のコントラストを確かめれるツール、
HEX値をRGB/CMYKに変更できるもの等、
更に使いやすさを追求できる配色が可能。
特に、次のような人は読んでみて下さい。
- Webデザイン・UIデザイン関連の
カラーツールが知りたい。 -
Webデザイン・UIデザイン関連の
カラーツールを使いたい。 -
Webデザインに使える
カラーツールを探している。
Webデザイン・UIデザイン関連
カラーツールまとめ
「Web・UIデザイン関連カラーツール一覧」
| 系統 | カラーツール名 |
| フラットなUIデザイン等のための カラーパレット |
FLAT UI COLORS 2 |
| 2色の配色パターン見本 | Hello Color |
| カラースキームを 自動で選んでくれるカラーツール |
Paletton |
| 配色のコントラストを 確認するのに便利なカラーツール |
Colorable |
| スポットカラーを選んで、 色を確認可能なデータベースサイト |
Color Library |
| 色名を検索にかけると、そのカラー 情報・説明を表示するサイト |
ColorHexa |
| Webデザイン参考用にデザイナーが 集めた綺麗な配色パレット |
LOL Colors |
| デザインのための12種類の カラーツールが使えるサイト |
Color Designer |
| 終了したカラーツール | PALX |
下でそれぞれ詳しく紹介しています。
FLAT UI COLORS 2
FLAT UI COLORS 2は、
フラットなUIデザイン等のための
カラーパレットを一覧にしたサイト。
| ツール名 | FLAT UI COLORS 2 |
| 特徴 | ・UIデザインのカラーの勉強で役立つ。 ・各色をクリックすることによって、 Web制作に役立つHEX、RGB、RGBAを コピーすることができる。 |
| おすすめの人 | ・フラットなUIデザイン等のための カラーツールを使いたい人 |
| その他 |
FLAT UI COLORS 2
Hello Color
Hello Colorは、
クリックして出る2色を決めることで、
類似色・補色を表示してくれるサイト。
| ツール名 | Hello Color |
| 特徴 | ・2色の配色パターン見本サイト ・スペースキーを押すと類似色・補色 一覧を見れるシンプルなデザイン ・色の表示画面が全体的に大きいので、 イメージが直感的にしやすい。 |
| おすすめの人 | ・クリックして出る2色を決めることで、 類似色・補色を表示してくれるツールを 使いたい人 |
| その他 |
Hello Color
Paletton
Palettonは、カラースキームを
自動で選んでくれるツールの1つ。
| ツール名 | Paletton |
| 特徴 | ・配色設計を助けてくれるカラースキーム ・ベースのカラーを選択するとそれに対して 補色、同類色、トライアド、テトラード等 相性の良いカラーを表示してくれる。 ・「EXAMPLE」をクリックすることで、 カラーコードを合わせたサンプルの サイトが見れイメージがしやすい。 ・「Adobe Colors」のように1色決めれば、 他の色を決めやすい。 |
| おすすめの人 | ・カラースキームを自動で選んでくれる ツールを使いたい人 |
| その他 |
Paletton
Colorable
Colorableは、配色のコントラストを
確認するのに便利なカラーツール。
| ツール名 | Colorable |
| 特徴 | ・便利な配色ツールの1つ。 ・文字の微妙な色合いのチェックに役立つ。 ・文字テキストの配色の最終確認に使える。 |
| おすすめの人 | ・配色のコントラストを確認するのに 便利なカラーツールを使いたい人 |
| その他 |
Colorable
Color Library
Color Libraryは、
印刷で使用される「CMYK」では
表せないスポットカラーを選んで、
色を確認可能なデータベースサイト。
| ツール名 | Color Library |
| 特徴 | ・スポットカラーを選択し色を確認できる カラープロファイル用データベースサイト ・予め用意された画像をカラーをしぼって 表示することが可能。 |
| おすすめの人 | ・スポットカラーを選んで、色を確認可能な データベースサイトを使いたい人 |
| その他 |
Color Library
ColorHexa
ColorHexaは、色名を検索にかけると、
そのカラー情報・説明を表示するサイト。
| ツール名 | ColorHexa |
| 特徴 | ・カラー情報が載っている世界最大規模の 検索サービス (カラー百科事典) ・かなり細かい色の情報や説明を見れる。 ・RGB、CMYK、HSL、HSV等の 様々な数値も出してくれるので便利。 |
| おすすめの人 |
・色名を検索にかけると、そのカラー情報・ 説明を表示するサイトを使いたい人 |
| その他 |
ColorHexa
LOL Colors
LOL Colorsは、
Webデザイン参考用に現役デザイナーが
集めた綺麗な配色パレットの一覧サイト。
| ツール名 | LOL Colors |
| 特徴 | ・4色の配色パターン見本サイト ・Webデザインのための配色パレット ・涙のような配色パレットが可愛い。 ・お気に入り登録数で配色パターンの 人気を確認できる。 ・クリックでHEX値のコピーが可能。 |
| おすすめの人 | ・Webデザイン参考用に現役デザイナーが 集めた綺麗な配色パレットを見たい人 |
| その他 |
LOL Colors
Color Designer
Color Designerは、デザインのための
様々なカラーツールが使えるサイト。
| ツール名 | Color Designer |
| 特徴 | ・デザイナーのためのカラーツール ・12種類の様々なカラーツールがある。 |
| おすすめの人 |
・デザイナーのための様々なカラーツールを 使いたい人 |
| その他 |
Color Designer
終了したWebデザイン・
UIデザイン関連のカラーツール
「終了したカラーツール」
- PALX
今まで大変お世話になったWebデザイン・
UIデザイン関連のカラーツール。
本当にありがとうございました。
PALX
PALXは、ベースとする色を決めると、
カラーパレットを作ってくれたツール。
| ツール名 | PALX |
| 特徴 | ・便利な配色カラーツール。 ・作成された調和のとれた全配色は、 CSSやSass、JSON等でも使えた。 |
| おすすめの人 |
・ベースとする色を決めると、 カラーパレットを作ってくれるツールを 使いたい人 |
| その他 |
まとめ
以上が、Web・UIデザイン関連
カラーツール9選まとめでした。
なお、その他の無料カラーツールは、
下の記事に一通りまとめています。
また、配色に関わる書籍・本は、
次の記事を参考にしてみて下さい。
