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

※ アフィリエイト広告を利用しています。
color-iphone-light

こんにちは、デザイナー・ブロガーの
ゆっきー(@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 2024 - Webデザイン・UIデザイン関連のカラーツールまとめ

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

 ツール名  FLAT UI COLORS 2
 特徴 ・UIデザインのカラーの勉強で役立つ。
・各色をクリックすることによって、
 Web制作に役立つHEX、RGB、RGBAを
 コピーすることができる。
 おすすめの人 ・フラットなUIデザイン等のための
 カラーツールを使いたい人
 その他  

FLAT UI COLORS 2

280 handpicked colors ready for COPY & PASTE

Hello Color

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

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

 ツール名  Hello Color
 特徴 ・2色の配色パターン見本サイト
・スペースキーを押すと類似色・補色
 一覧を見れるシンプルなデザイン
・色の表示画面が全体的に大きいので、
 イメージが直感的にしやすい。
 おすすめの人 ・クリックして出る2色を決めることで、
 類似色・補色を表示してくれるツールを
 使いたい人
 その他  

Hello Color

Paletton

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

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

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

Paletton

Colorable

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

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

 ツール名  Colorable
 特徴 ・便利な配色ツールの1つ。
・文字の微妙な色合いのチェックに役立つ。
・文字テキストの配色の最終確認に使える。
 おすすめの人 ・配色のコントラストを確認するのに
 便利なカラーツールを使いたい人
 その他  

Colorable

Color Library

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

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

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

Color Library

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

ColorHexa

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

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

 ツール名   ColorHexa
 特徴 ・カラー情報が載っている世界最大規模の
 検索サービス (カラー百科事典)
・かなり細かい色の情報や説明を見れる。
・RGB、CMYK、HSL、HSV等の
 様々な数値も出してくれるので便利。
 おすすめの人
・色名を検索にかけると、そのカラー情報・
 説明を表示するサイトを使いたい人
 その他  

ColorHexa

Color hex encyclopedia providing information about any color.

LOL Colors

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

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

 ツール名  LOL Colors
 特徴 ・4色の配色パターン見本サイト
・Webデザインのための配色パレット
・涙のような配色パレットが可愛い。
・お気に入り登録数で配色パターンの
 人気を確認できる。
・クリックでHEX値のコピーが可能。
 おすすめの人 ・Webデザイン参考用に現役デザイナーが
 集めた綺麗な配色パレットを見たい人
 その他  

LOL Colors

Color Designer

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

Color Designerは、デザインのための
様々なカラーツールが使えるサイト。

 ツール名  Color Designer
 特徴 ・デザイナーのためのカラーツール
・12種類の様々なカラーツールがある。
 おすすめの人
・デザイナーのための様々なカラーツールを
 使いたい人
 その他  

Color Designer

Welcome to the most comprehensive color tools platform. Unleash your creativity using color wheel, devise harmonious palettes with the Color Palette Builder, an

終了したWebデザイン・
UIデザイン関連のカラーツール

「終了したカラーツール」

  • PALX

今まで大変お世話になったWebデザイン・
UIデザイン関連のカラーツール。
本当にありがとうございました。

PALX

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

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

 ツール名  PALX
 特徴 ・便利な配色カラーツール。
・作成された調和のとれた全配色は、
 CSSやSass、JSON等でも使えた。
 おすすめの人
・ベースとする色を決めると、
 カラーパレットを作ってくれるツールを
 使いたい人
 その他  

まとめ

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

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

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

スポンサーリンク

シェアする