ブログ背景色の参考になるカラーパレットツール&アプリの紹介

どうも、トッド(Todd)です。

1色単位から探したいときにオススメの配色ツール

たくさんのカラーコードが用意されている所から1色単位で探すのに適しているツールをまとめてみました。その中でも機能面で優れていると感じた○○個の紹介になります。

01.原色大辞典

資料image

  • 色の名称がわかる
  • カラージャンルが豊富
  • 配色パターンも完備

原色・和色・洋色・メトロ・パステル・ビビットのそれぞれに配色パターンが用意されていて、

カラージャンルごとの単色からでも豊富な数があるので好みのカラーコードが見つかるはず。


02.Color-Sample.com

資料image

  • 細かい色見本
  • 充実した検索機能
  • 色が豊富すぎて迷う

Web上のフルカラーで表現できる1600万色の色見本を見ることができ、色を探すときのアクセス幅が豊富にあることが特徴的です

例えば、色名での検索に対応していたり、トーン・彩度・明度別なんかでもアプローチが可能です。


03.FlatUiColorPicker

資料image

  • おしゃれなフラットカラー
  • 魅力的な色ばかり
  • 出力の種類が豊富

前述と比べると種類は減ってしまうが、どれもクオリティーのある色が並んでいて魅力的である

出力できる色指数、16進数・rgb・rgba・HSL・HSV・hwb・Ncol・cmykと、どれで色を作るのかが選択可。


04.Material Mixer-2.0

  • WEBサイト配色特化
  • サンプルプレビューで確認
  • テーマ・アクセントカラーの選択

WEBサイトの配色に参考になるツールだと思います。テーマカラーを選択し、アクセントカラーも選択し、トータル5色でWEbページデモを見ることが出来ます。

テーマカラーとアクセントカラーで配色を見れるものは中々ないのでオススメです。


提案される配色から決めたいときに役立つツール

提示される配色の中から各々好みのカラーパターンを直感的に決めることが出来るツール系統をまとめてみました。

01.Color dot

資料image

  • 操作が簡単
  • 直感的に配色が作れる
  • 有料アプリ版もある

とにかく操作が簡単です。画面上でマウスを動かすだけで色を変えることが出来ます。

好みの色のところでクリックするとストックされるので直感的な配色パターンの作成に重宝します


02.ランダム素材パレットジェネレーター

資料image

  • クリックするだけでパターン
  • 3色の配色パターンを作りたいとき
  • 色んな仕様のプレビュー

3色の配色パターンを自動的に組み合わせて提示してくれるツールで、クリックするたびにパターンが変わるので飽きません。

また、色々な形でプレビューが見れるので、特にオススメのツールです。例えば「テキスト」「カード」「ロゴ」


03.Colormind

  • クリックするだけでパターン
  • 5色の配色パターンを作りたいとき
  • 結果に当たりはずれが多い

コチラは、さっきとは異なり5色のパターン配色を自動生成してくれるツールになります。

1発で絶妙な配色に出会えることは無いでしょう。しかし、1色単位で編集が出来るのでコレっ、という色が来るまでの辛抱です


04.COOLORS

  • クリックするだけでパターン
  • 5色の配色パターンを作りたいとき
  • 結果に当たり多し

こちらも、5色の配色パターンを提案してくれるツールになります。先ほどのcolormindと比べるとこちらの方が使いやすいという点以外では変わりません

shiftキーを押すことで色彩が変更するので使いやすいです。


完成している組み合わせから配色を選択したい時に便利なツール

すでに出来上がっている配色パターンから一式で参考にしたいと思えるツールタイプになります。

グラデーションの参考になるツールもピックアップしてみました。

01.LOL COLORs

  • 4色で構成される配色パターン
  • 配色の参考にしたいとき
  • まるっと使っても良し

こちらは、すでに4色で構成される配色パターンを閲覧することが出来るツールになります。

涙の形の部分にカーソルをあてると#から始まるカラーコードを見ることが出来ます。


02.COLORION

  • 5色で構成される配色パターン
  • ものすごい数があります
  • LOL COLORsと似ている

コチラは、5色の配色パターンを提案してくれるツールになります。

さきほどの、LOLCOLORsとくらべると仕様は似ているが圧倒的な配色パターン数が存在しています。


03.uiGradients

  • 2色のグラデーション
  • CSSコードで出力可
  • グラデーションの角度調整可

2色で作られたグラデーションをたくさん見ることが出来ます。

グラデーションの始まり値の角度を調整することが出来ますし、CSSコードとして抽出するコトも可


04.FreshBackgroundGradients

  • 180種類のグラデーション
  • CSSコードで出力可
  • クオリティーが高い

グラデーションの配色ツールの中では個人的にピカイチな印象です。

PNG画像としてダウンロードすることが出来、CSSコードとしてもコピーすることが出来るので便利です。


配色ツールと合わせて使いたいオススメのアプリケーション

ここまではWEBツールを紹介してきましたが、合わせて使うと便利なアプリケーションがあるのでそっちも紹介。

flat palette

主な機能
  • rgb/cmyk・hsbで数値1単位で調整が可能
  • 選択カラーに対して「トライアド」「補色」「類似色」の提示
  • デフォルトで「フラット」「日本色」「西洋色」の図鑑入り
  • 画像から色の抽出が可能
  • 必要に応じたカラーリストファイルを作成することが出来る
  • 画像またはデーターとしてエクスポート機能がある

まず、無料で良いんですか?と、言いたくなるようなクオリティーがあると思います。

色のメモ帳感覚で使用することが出来るので、手軽で便利だということからオススメ配色アプリとして紹介しました。

コメントを残す

メールアドレスが公開されることはありません。