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