Webデザイン・UIデザイン関連のカラーツールまとめ

color-iphone-light

こんにちは、デザイナー・ブロガーの
ゆっきー(@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

FLAT UI COLORS 2は、
フラットなUIデザインなどのための
カラーパレットを一覧にしたサイト。

 特徴 ・UIデザインのカラーの勉強で役立つ。
・各色をクリックすることによって、
 Web制作に役立つHEX、RGB、RGBAを
 コピーすることができる。
 その他  

FLAT UI COLORS 2

② PALX

palx

PALXは、ベースとする色を決めると
カラーパレットを作ってくれるツール。

 特徴 ・便利な配色カラーツール。
・作成された調和のとれた全配色は、
 CSSやSass、JSON等でも使える。
 その他  

PALX

Automatic UI Color Palette Generator

③ Hello Color

hello-color

Hello Colorは、
クリックして出る2色を決めることで
類似色・補色を表示してくれるサイト。

 特徴 ・2色の配色パターン見本サイト
・スペースキーを押すと類似色・補色
 一覧を見れるシンプルなデザイン
・色の表示画面が全体的に大きいので、
 イメージが直感的にしやすい。
 その他  

Hello Color

④ Paletton

paletton.com

Palettonは、カラースキームを
自動で選んでくれるツールの1つ。

 特徴 ・配色設計を助けてくれるカラースキーム
・ベースのカラーを選択するとそれに対して
 補色、同類色、トライアド、テトラード等
 相性の良いカラーを表示してくれる。
・「EXAMPLE」をクリックすることで、
 カラーコードを合わせたサンプルの
 サイトが見れイメージがしやすい。
・「Adobe Colors」のように1色決めれば、
 他の色を決めやすい。
 その他  

Paletton

In love with colors, since 2002. A designer tool for creating color combinations that work together well. Formerly known as Color Scheme Designer. Use the color

⑤ Colorable

colorable

Colorableは、配色のコントラストを
確認するのに便利なカラーツール。

 特徴 ・便利な配色ツールの1つ。
・文字の微妙な色合いのチェックに役立つ。
・文字テキストの配色の最終確認に使える。
 その他  

Colorable

Color contrast tester

⑥ Color Library

color-library

Color Libraryは、
印刷で使用される「CMYK」では
表せないスポットカラーを選んで、
色を確認可能なデータベースサイト。

 特徴 ・スポットカラーを選択し色を確認できる
 カラープロファイル用データベースサイト
・予め用意された画像をカラーをしぼって
 表示することが可能。
 その他  

Color Library

Color Library – Convert color images in multi-channel for printing devices

⑦ ColorHexa

colorhexa

ColorHexaは、色名を検索にかけると、
そのカラー情報・説明を表示するサイト。

 特徴 ・カラー情報が載っている世界最大規模の
 検索サービス(カラー百科事典)
・かなり細かい色の情報や説明を見れる。
・RGB、CMYK、HSL、HSVなどの
 様々な数値も出してくれるので便利。
 その他  

ColorHexa

Color hex encyclopedia providing information about any color.

⑧ LOL Colors

lol-colors

LOL Colorsは、
Webデザイン参考用に現役デザイナーが
集めた綺麗な配色パレットの一覧サイト。

 特徴 ・4色の配色パターン見本サイト
・Webデザインのための配色パレット
・涙のような配色パレットが可愛い。
・お気に入り登録数で配色パターンの
 人気を確認できる。
・クリックでHEX値のコピーが可能。
 その他  

LOL Colors

⑨ Color Designer

color-designer

Color Designerは、好みの色を選ぶと
その純色に白・黒それぞれを混ぜた色を
段階的に表示してくれるカラーツール。

 特徴 ・デザイナーのためのカラーツール
・Tints (純色に白を混ぜた色) と
 Shades (純色に黒を混ぜた色)を表示できる。
 その他  

Color Designer

The main purpose of this tool is to help with building a color palette and generate tints and shades based on it. Just pick a color, and the app does the rest.

まとめ

以上が、Web・UIデザイン関連
カラーツール9選まとめでした。

なお、その他の無料カラーツールは
下の記事に一通りまとめています。

また、配色に関わる書籍・本は 
次の記事を参考にしてみてください。

スポンサーリンク

シェアする