もう配色アイデアには迷わない!無料ですごい配色ツール110個まとめ【2022年版】

おしゃれな配色パターンや見本アイデア、サイトを随時アップデート中。

color-tool2015-top1-1

 

2016年8月22日に公開してから再編集、アップデートを随時行っています。新しいツールを加え、サービスが終了しているツールは削除し、合計110個の配色ツールサービスを紹介しています。

 

配色がなかなか決まらないと悩んでいる人は、多いのではないでしょうか。

しかし、どの配色ツールを使えばいいかわからないという声をよく聞きます。

そこで本記事では、苦手な人も多い配色えらびに使える無料オンラインツールをまとめてご紹介します。

7年越しで見つけた、実践向け110の配色ツールが揃います。

 

普段使いできる便利ツールから、アイデア出しに便利なワンクリック操作できるツール。

AIテクノロジー実装ツールやマテリアルデザイン系。

Webデザイン関連ツールや写真から色抽出できるツール。

人気の高いグラデーションカラーなど、用途やジャンル別にまとめています。


コンテンツ目次

 

 

最新の配色ツールまとめ

最近リリースされた配色ツールを中心にピックアップしています。

選んだ配色をそのままデザインに反映、確認できる便利ツールや、人気の高いグラデーションに関連するツールが多い印象。

前半は、個人的な最近の愛用ツールをセレクトしました。あなたのお気に入りの配色ツール、探しませんか。

 

Palette Maker

お好みの配色をクリックで選ぶだけで、大量の制作サンプル例で色味を確認することができ、本当に必要なカラーパレットを直感的に選ぶことができます。

Palette_Maker_-_Generate_and_Preview_Colors_on_Real_Design_Templates

 

 

 

Huemint

人工知能テクノロジーを駆使し、プロジェクトにあった配色を自動で提案してくれるツール。色の組み合わせを確認できるサンプルイメージが豊富。

 

 

 

Dopely Colors

美しい配色カラーパレット、グラデーションを作成したり、カラーホイールによる配色選び、配色コントラストチェック、トーンツールなどの機能がずらりと揃い、あらゆるプロジェクトに最適な配色を手軽に見つけることができます。詳しくはこちらより。

 

 

 

hhhue

コピペで利用できる、美しいカラーパレットを厳選したコレクション。独自のカラーリングに編集することも可能です。他のおすすめ配色ツールと一緒に活用してみましょう。

hhhue curated collection of beatiful color palettes

 

 

 

Colord

HEXカラーコードを入力するだけで、色の分析やRGBやHSLなどに瞬時に変換してくれる、軽量で強力なツール。

 

 

 

Colorffy

配色カラーパレットやグラデーションなど、ウェブ制作で使いやすい色を探すときに便利なツール。色別に絞り込みでき、見つけたグラデーションはお気に入りに保存できます。

 

 

 

Actionable Color Palettes

ウェブデザインで使いやすい配色カラーパレットを集めたサイトで、サンプルをつかった色の確認ができ便利です。

 

 

 

Gradient Generator

くすみのない美しいグラデーションを描くことができるオンラインツール。

 

 

 

Non Boring Gradients

上記ツールにも似ていますが、こちらも美しいCSSグラデーションを手軽に作成できるツール。Easingをクリックで変更できるのも、直感的で便利です。

 

 

 

CSS Gradient Editor

複雑なCSSカラーグラデーションを作成できるオンラインツール。あらかじめ用意されたプリセットの他、ミッドポイントを活用したより美しいグラデーションを表現でき、作成したコードもそのままコピペで利用可能。

 

 

 

Gradients Mass Driver Workshop

2つのお好みの色を決め、抽出サンプルポイント数を指定することで、よりなめらかなCSSカラーグラデーションを作成、コードを自動生成してくれます。

 

 

 

Gradient Blob

CSSのみで表現できる美しいBlobデザインを作成、カスタマイズできるオンラインツール。20色以上のスキンカラーも用意されており、作成したCSSコードをコピペでそのまま利用可能。

 

 

 

CSS Shadow Gradients

2色の配色によるグラデーションをつかった影、シャドウグラデーションを手軽に作成できるオンラインツール。ドロップシャドウにこだわったツールも揃えています。

 

 

 

Animated Gradient Background Generator

アニメーションで変化する背景用のグラデーションを作成できるオンラインツール。グラデーションの色や角度、アニメーション速度も細かく調整できます。アイデアが浮かばないときは、「Random」ボタンをクリック。

 

 

 

Mesher

CSSをつかっておしゃれなグラデーションを作成できるツール。配色が思いつかないときは、Randomizeボタンをどうぞ。

 

 

 

MeshY

こちらもメッシュグラデーションの美しい配色が特長で、Randomizeボタンをクリックすると、色の混ざり具合がその場で変化していきます。

 

 

 

Huetone

LCHのカラースペースを利用して、予測可能で親しみやすいカラーパレットを自動で作成してくれる配色ツール。

 

 

 

Huey Color palette Generator

色覚異常のひとでも、テキストと背景の適切なコントラストを認識できる、WCAGコントラストに沿った配色カラーパレットを自動生成してくれるツール。

 

 

 

Reasonable Colors

使いやすさや読みやすさなどのアクセシビリティに配慮した、魅力的な配色カラーツール。ソースコードはGitHubで公開されており、MITライセンスでだれでも自由に利用できるオープンソース。

 

 

 

Noise & Gradient

色を超えるマルチカラーをつかったグラデーションを作成し、ザラッとしたGrainエフェクトを追加できる配色ツール。完成したテクスチャは無料ダウンロードも可能です。

 

 

 

Grainients

ザラザラとした粒状の質感を追加したグラデーション2000枚が揃うデザインライブラリ。この他にも、オーロラBlobシェイプライブラリなども公開されています。

 

 

 

Gradient King

100種類以上の美しいCSSグラデーションを集めたライブラリで、お好みのグラデーションを選択するとCSSをコピペできます。

 

 

 

Design Gradients

ウェブサイトやグラフィックなどあらゆる作品に使える、48種類のCSSグラデーションカラーを集めた無料プラットフォーム。クリックでCSSコードをコピーできます。

 

 

 

Radix UI

美しく、アクセシブルなウェブサイトやアプリケーションをデザインすることを前提にしたオープンソースによるカラーシステム。

 

 

 

Colors.

グラフィックデザインはもちろん、UIデザインなどのウェブ制作にも活用できる適切な色を選ぶお手伝いツール。

 

 

 

Mobile Palette Geneartor

メインカラーを一色選ぶだけでセカンダリーカラーやアクセントカラーなど、モバイルアプリUIデザイン向け配色を提案してくれるツール。色の組み合わせやトーン、色合い調整など色にまつわるツールがぎっしり。

 

 

 

Couleur.io

統一感のある配色カラーパレットを作成するのに役立つシンプルなツール。お好みの色を選ぶだけのお手軽さ。

 

 

 

普段使いできる便利ツール

色に困ったときにまず参考にしている、普段使いにもぴったりな便利ツールをセレクトしています。

配色パターンをPhotoshopと同期できるツールや、ウェブデザインだけでなくDTP紙デザインにも利用できるもの。

さらには、写真から自由自在に色を抽出できるもの。

日本伝統の和柄を集めたサイトなどあらゆるニーズにも応えてくれます。

Adobe Color CC

iPhoneやiPadで撮影した写真をもとに配色カラーパレットを作成したり、PhotoshopやIllustratorなど、他のAdobeサービスと同期して利用できるアプリツール。カラーホイールを利用した配色えらび、画像からグラデーションを抽出し、カラーグラデーションとして保存できるなど、色に困ったときはまずはここ。

adobe-color-cc

目次へ戻る

 

 

 

Happy Hues

配色カラーパレットを選んでも、具体的な使い方が分からないというひとにオススメしたいツール。カラーパレットを選択するたびに、サイト全体の配色も変更し、ひと目で確認できます。

happy-hues-scaled

目次へ戻る

 

 

 

Scheme Color

とにかく大量のカラースキームを公開しているウェブサイトで、その数は軽く1万種類以上。配色の編集やダウンロードもでき、細かいソート機能が多すぎる配色パターンからお好みの組み合わせを見つけやすくしてくれます。

schemecolor

目次へ戻る

 

 

 

Color Names

モダンブラウザ対応の140色をまとめた配色リスト。各色の名前とHEXカラーコード、RGB値を確認したいときにどうぞ。

目次へ戻る

 

 

 

NEW Gradient Generator Tool

通常のCSSグラデーションよりもカラーホイールを意識した、美しいグラデーションを作成できるオンラインツール。以下の記事でも詳しく触れています、参考までに。

濁りなし!美しいグラデーションの基本ルールとCSSオンラインツール

目次へ戻る

 

 

 

Color Kitty

画像をアップロードすると自動で色を抽出し、美しいカラーパレットを作成してくれるウェブツール。選択された配色は、画像上をドラッグしながら移動することで、手動で色を選択できます。

colorkitty

目次へ戻る

 

 

 

ColorDrop

美しい4色のカラーパレットを集めたサイトで、ダークモードを適用することで背景を変更したり、ソートやフィルタリングなどの機能が豊富なツールです。表示されたカラーコードをクリックでさくさくコピーできます。

colordrop

目次へ戻る

 

 

 

Pigment

Pigment(顔料)とLighting(光量)を調整して、使いやすいナチュラルな配色カラーパターンを探すことができるオンラインツール。右上の検索ボックスより写真をベースに配色を探すこともでき、DPT紙デザインでも重宝します。

pigment

目次へ戻る

 

 

 

Hue 360

「Brightness」で色の明るさを決め、右側のカラーホイールで色をクリックすると、選択した色に合うものだけが残っていくので、お好みの色で自由なカラーパレットを作成できます。ページ下より選択した色のHEX値をまとめて確認できます。

hue360

目次へ戻る

 

 

 

Color Supply

補色や類似色、3色配色などウェブやグラフィックに活用できる効果的な配色を作成できるツール。グラデーションやアイコンイラストなどで色の確認ができる点もポイント。

color-supply

目次へ戻る

 

 

 

Nippon Colors

日本独自に伝わる伝統の色をデザイン制作に活用したいときは、こちらのサイトがオススメ。見やすいカラーチャートに、美しいアニメーションが素敵なツール。

japan-color

目次へ戻る

 

 

 

Sorted Colors

スライダーを左右に動かすことで、HEXカラーコードではなく、名前のついたCSSカラーで直感的に配色を選ぶことができるツール。

目次へ戻る

 

 

 

ワンクリック、人工知能系ツール

ここでは人工知能、AIをつかった自動配色サービスや、クリックのみで難しいこと不要のお手軽ツール、膨大な美しい配色カラーパレットをコレクションしているサイトなど、色のアイデアが全くないときにも役立つツールをセレクトしています。

 

Palette List

用意された12色の中からお好きな色を2色選ぶだけで、関連するカラーパレットを1万以上も提案してくれるオンラインカラーアプリ。気に入ったカラーパレットは、SVGやSASS、CSSで無料ダウンロードできます。

palette_list_-_color_palette_generator_-_10_000__palettes

目次へ戻る

 

 

 

NEW Color UI

そのまま利用するのはもちろん、カスタマイズも可能な美しい配色カラーパレット集。カラーピッカーやマテリアルカラー一覧など、配色に困ったときに参考にしたいサービスのひとつ。

目次へ戻る

 

 

 

Parametric Color Mixer

オーディオファイルをミックスするように配色をミックスする配色新ツール。つまみを回して、お好みの色合いを正確に調整できます。

目次へ戻る

 

 

 

ColorMind

ボタンをクリックするだけで、人工知能を利用して素敵な配色カラーパレットを自動生成できるツール。写真や映画、人気のアート作品をモチーフにした配色カラーパレット。

colormind

目次へ戻る

 

 

 

Khroma

人工知能をつかったオンライン配色ツール。お好みの色を追加することで、より精度の高い組み合わせを実現できる、まさに「育てる」配色ツールです。

khroma-6

 

配色えらびも人工知能の時代!素敵なカラーパレットを自動生成できるツール Khroma

目次へ戻る

 

 

Palettable

何百万人のデザイナーの配色知識を詰めこんだツールで、組み合わせも考えられた色を、好きか嫌いを選ぶだけで直感的に探し出します。

palettable

目次へ戻る

 

 

 

ColourCode

マウスカーソルを動かすだけで色を指定でき、さまざまな配色を選択できるだけでなく、SCSSやLESS、PNGファイルでダウンロードも可能です。

colourco

目次へ戻る

 

 

 

Coolors

キーボードのスペースキーを押すたびに、スタリッシュな5色のカラーパレットを自動作成してくれるお手軽ツール。生成された配色は、個別で調整することも可能です。最近アップデートされ、されに使いやすくなっています。

Coolors

配色えらびに超便利!カラーパレットやグラデーションなど色ツールが揃ったCoolors

目次へ戻る

 

 

NEW Farbvelo

ボタンをクリックするだけで美しい配色カラーパレットを提案してくれるツール。色数やカラーモードなど詳細設定も可能で、クリックでHEXコードもコピーできます。

目次へ戻る

 

 

 

LOL Colors

現役デザイナーがウェブサイト制作の参考に集めている、美しい配色カラーパレットギャラリー。クリックでHEX値をコピーすることができ便利。

lolcolors

目次へ戻る

 

 

 

Colorhunt

ユーザーが自由に配色カラーパレットを投稿できるサイトで、人気順やランダムに美しい配色を選ぶことができます。

colorhunt

目次へ戻る

 

 

 

Colorion

2000種類以上の配色カラーパレットを集めたモンスターサイトで、ワンクリックで色をコピーをできたり、人気順に並べたりと作業が快適になる機能ばかりです。

colorion

目次へ戻る

 

 

 

Colorsinspo
9数千を超える美しい配色カラーパレットをワンクリックでコピーできたり、さまざまなカラーツール、ブランドカラーなど、配色にまつわる素材を揃えた総合サイト。

目次へ戻る

 

 

 

Cohensive Colors

統一感のある配色カラーパレットをボタンクリックのみで生成できるツール。色数を増減させたり、特定色をオーバーレイで重ねるなどシンプルで、効果的なツール。

cohensive-colors

目次へ戻る

 

 

 

C&F

5色のカラーパレットだけでなく、美しいグラデーションやフォントの組み合わせ、マテリアルデザインのカラーパレットなども揃った総合配色ライブラリ。

colors-and-fonts

目次へ戻る

 

 

 

マテリアルデザイン系ツール

Googleのマテリアルデザインで採用されている配色をつかったツールをまとめています。ランダムに色を提案してくれたり、UIデザインなどで使いやすい類似色の提案なども行ってくれるので、あとはHEX値をコピー&ペーストするだけで、手軽にマテリアルカラーを活用できます。

Random Material Palette

ページをクリックするだけで、デザイン制作に活用できる素敵な配色カラーパレットを、マテリアルデザインの中から自動で提案してくれるサービス。

randam-material-palette-generator

目次へ戻る

 

 

 

Material UI Colors

Googleデザインガイド「マテリアル・デザイン」の配色をまとめて確認できるオンラインカラーパレット。主要カラーとアクセントカラーが一度に表示されるので、デザイン制作もスムーズです。

Material UI Colors

目次へ戻る

 

 

 

Material Mixer

Googleのマテリアルデザイン配色をベースに、UIデザインなどで使いやすい類似色の提案を自動で行ってくれるツール。

material-mixer

目次へ戻る

 

 

 

Webデザイン・UIデザイン関連ツール

Webデザイン制作で利用する機会の多いツールを中心にセレクトしています。色をCSSやSassファイルとして利用できる機能やコントラスト確認ツール、HEX値をRBGやCMYKに変換してくれるものなど、より使いやすさにこだわる配色を実現できます。

Palx

ベースとなるカラーを指定するだけで、カラーパレットを生成してくれる配色カラーツール。生成される指定したカラーと調和するフルスペクトラムな配色は、CSSやJSON、Sassなどでも利用できます。

palx

目次へ戻る

 

 

 

What The Hex

HEXカラーコードを入力すると、それに合った名前を自動で付けてくれるサービス。CSS VariablesやSCSSのスタイリング命名に便利。

目次へ戻る

 

 

 

Leonardo

コントラスト比をベースとした、オープンソースの配色自動生成ツール。美しくて、アクセスしやすいカラーシステムを手軽に。詳しい使い方は、こちらの記事よりどうぞ。

leonardo-1

目次へ戻る

 

 

 

Hello Color

スペースキーをクリックして、2色の組み合わせを決めるだけで、一緒に活用できる類似色や補色を表示してくれるお手軽配色ツール。

hellocolor1 hellocolor2

目次へ戻る

 

 

 

ColorBox

色相や彩度、明るさなどを調整し、お好みの配色を見つけることができるオンラインツール。新しくなってより直感的に色を選ぶことが可能に。

目次へ戻る

 

 

 

NEW Colortopia

美しいカラースキームを手軽に探すことができる、MITライセンスのオンラインツール。

目次へ戻る

 

 

 

Paletton

デザインの目的に合った配色を行うための設計を手助けするカラースキームを、悩まずにマウス操作のみで決めることができます。実際のツールの使い方に関しては、以下エントリーも参考にどうぞ。

Paletton

 

配色が苦手なひとも大丈夫!瞬速でウェブ用カラーパレットを作成する方法

目次へ戻る

 

 

Coleure

水平方向に並べられたカラーパレットを選択すると、白&黒抜きテキストと白黒テキストを合わせて確認でき、異なるカラーパレットと色比較することも可能です。

Coleure

目次へ戻る

 

 

 

ColorHexa

お好みの色を入力すると細かい色の説明や情報に加え、RBGやCMYK、HSL、HSV などさまざまな値に変換してくれます。

Color-Hex

目次へ戻る

 

 

 

Colorable

配色によるコントラスト具合を確認できるツールで、文字テキストを使った実践的な配色を決める最終チェックとしてどうぞ。

colorable

目次へ戻る

 

 

 

NEW Colour Contrast Checker

2色のカラーリングのコントラスト比をライブプレビューで確認できるオンラインツール。お好みのフォントを選択できます。

目次へ戻る

 

 

 

Color Contrast Checker

任意の色を入力すると、コントラスト比がどれくらいか分析し、よりコントラストの高い似た色を提案してくれるAiツール。

color_contrast_checker__analyser_and_color_suggestions___polypane_browser_for_dev___design

目次へ戻る

 

 

Color Library

通常の印刷に使われるCMYKでは表現できない色「スポットカラー」を選択し、色を確認できるカラープロファイル用のデータベース。

color-library

目次へ戻る

 

 

 

Copy Palettes

FIgmaやSketchで利用できる、SVGの配色カラーパレットを作成、コピペで利用できるオンラインツール。

copy-palette

目次へ戻る

 

 

 

Color Designer

お好みの色を選択すれば、純色に白を混ぜた色「ティント(英: Tint)」と純色に黒を混ぜた色「シェード(英: Shade)」を段階的に生成できるツール。

目次へ戻る

 

 

 

写真から抽出系ツール

お好みの画像をアップロードすることで、使われている色を自動で分析し、美しい配色カラーパレットを生成してくれるサービスをまとめています。デザインの雰囲気やコンセプトが決まっているときに便利です。

PhotoCopa

画像イメージをアップロードすると、使われている色を自動で分析し、配色カラーパレットを生成してくれるWebサービス。

photocopa

目次へ戻る

 

 

 

Pictaculous

イメージ写真をアップロードすると使われている色の配色マルチカラーパレットを瞬時で作成してくれます。

Pictaculous

目次へ戻る

 

 

 

Color Palette Generator

イメージ写真をアップロードするとそれに合った配色マルチカラーパレットを作成、提案してくれます。クライアントやブランドイメージが決まっているときに便利なアイテム。

Color-Palette-Generator

目次へ戻る

 

 

 

Palette for Google Chrome

インストールしておくことでページに表示しているイメージ写真の配色カラーパレットを作成してくれる、Google Chrome拡張機能ツール。

Palette-for-Google-Chrome

目次へ戻る

 

 

 

Litur

カメラを向けた映像の特定の色をHEXカラーコードで表示してくるiPhone用アプリ。

frame-1

目次へ戻る

 

 

 

インスピレーション系ツール

ページをスクロールするだけでアイデアが湧いてきそうな、インスピレーション系配色ツールを集めています。歴史にまつわる配色や海外の大企業、スタートアップで使用されているブランドカラーを集めたもの、NBAやMLBなどのチームカラーを一覧にしたリスト、面白い名前の色などどれもユニークなものばかりです。

ColorDoo

ロゴやブランドカラーに最適な美しい色合いや、2色グラデーション、5色カラーパレットなど、色選びに困ったら確認したいリソースを一覧でどうぞ。

目次へ戻る

 

 

 

Color Leap

一度は見たことのある有名絵画やポスター、クレオパトラの棺など歴史的な美術品で使われていた色を集め、年代ごとにタイムラインで確認できるプロジェクト。収録されている色数はあまり多くありませんが、「ロマンを感じる」サイトとなっています。

color-leap

目次へ戻る

 

 

 

Color Lisa

世界の偉大な画家が描いた作品をモチーフに、配色カラーパレットをまとめたサイト。ピカソやダビンチ、エッシャー、モネなど日本でもよく知られているアーティストの作品も多数収録されています。

color-lisa

目次へ戻る

 

 

 

NEW Color Selector

クリエイティブな分野で活躍する人に向けた、配色のデザインツールとデータベース。さまざまな色の組み合わせが紹介されていますが、どれもオシャレな色合いばかりなので、配色に迷ったときにもオススメ。

目次へ戻る

 

 

 

Image Hues

フリーストック写真サイトUnsplashからセレクトされた写真の配色カラーパレットを表示し、クリックで#HEXカラーコードをコピペできます。

image-hues

目次へ戻る

 

 

 

Brand Colors

海外の大企業やスタートアップで使用されている、ブランディングカラーをアルファベット順にまとめたサイト。気に入ったカラーリングはASE、SCSS、LESS、CSSスタイルでダウンロードすることができます。

brandcolors

目次へ戻る

 

 

 

Hues

世界的な大企業やスタートアップのブランドロゴカラーを集めた配色パレット。暖色系や自然系などカテゴリー毎に表示できる点もポイントです。

Hues-Les-Teintes

目次へ戻る

 

 

 

Colorwise

モバイルアプリやウェブツールなど、最新のテクノロジー関連プロダクトの情報やユーザーの口コミなどをチェックできる、Product Hunt に登場したアイテムの配色カラーパレットを集めています。

colorwise

目次へ戻る

 

 

 

配色パターン見本40選

「万人受けする配色」「親近感を感じさせる配色」などカテゴリー別に、アプリデザイン制作に役立つ素敵な配色カラーパレットがまとめられています。日本語サービスということで、使いやすさも◎。

saruswaka-color-tool

目次へ戻る

 

 

 

Canva Colors

ウェブサイトやグラフィックデザインに活用したい配色100種類以上を揃え、各色の詳しい意味合いを調べることができ、モノトーンや類似色、補色などの配色カラーパレットをまとめて確認できるオンライン配色カラー見本帳です。

canav-colors

 

色の基本と使い方をまとめた配色デザイン見本帳 Canva Colors

目次へ戻る

 

 

Sporting Hues

NFLやNBA、MLB、EPLに所属するチームごとのブランドカラーを一覧できる、アメリカンスポーツファンにはたまらない配色ツール。

hues

目次へ戻る

 

 

 

Picular

キーワードを入力すると、その雰囲気にあった色合いを複数まとめて提案してくれる配色オンラインツール。

目次へ戻る

 

 

 

Colors.lol

名前が存在しない色に、人工知能をつかってユニークなネーミングを決め、作成された配色カラーパレットコレクション。

colors_lol_-_overly_descriptive_color_palettes-1

目次へ戻る

 

 

 

Bada55

アルファベットと数字を使って表示されるユニークな英単語(英: leet)の配色カラーパレットを集めているサイト。ちなみにサイト名Bada55は、「Badass(たちの悪い、かっこいい)」を意味しています。

BADA55-io

目次へ戻る

 

 

 

Ear Palettes

音楽CDアルバム・ジャケットにインスパイアされた配色カラーパレットをまとめたライブラリで、現在200種類近くのマニアも唸る音楽ジャケットが。

ear_palettes

目次へ戻る

 

 

 

Found Color

オシャレな写真のみから抽出された、オシャレな3色カラーパレットをコレクションしています。他とは異なるスタイリッシュな配色が欲しいときに。

found_color_schemes_for_web_and_ui

目次へ戻る

 

 

 

グラデーション関連ツール

美しい色の組み合わせを楽しむことができる、グラデーションの配色パターンツールをまとめています。デザイントレンドとしてウェブデザインだけでなく、グラフィックデザインやパッケージデザインなどにも広く活用されている配色です。

グラデーションの人気の秘密や実用的な使い方を知ることで、より魅力的なデザインを表現できます。

WebGradients

どんなウェブサイトでも利用できる美しいグラデーションカラー180種類を揃えた、無料の配色コレクションツールです。ボタンをクリックするだけで、Internet Explorer や Chrome などクロスブラウザ対応のCSS3コードをコピペ可能。

webgradients

目次へ戻る

 

コピペ自由!美しいグラデーションを180種類揃えた WebGradients

 

 

Grabient

ウェブサイトやグラフィックデザインに利用したくなる美しいグラデーションカラーを現在22種類揃え、お好みで色をカスタマイズ、作成できる無料の配色作成ツールです。

grabient

 

コピペ&カスタマイズ自在!2017年らしいカラフルグラデーションをまとめた Grabients

目次へ戻る

 

 

 

NEW Glitch Art Generator

カラフルなグラデーションをつかった、さまざまなスタイルのグリッチエフェクトをオンラインで自動作成できるツール。グリッチの量や方向などもカスタマイズ可能。

glitchart-io

 

 

 

ColorSpace

ひとつの色を決めるだけで素敵な配色カラーパレットを自動生成してくれるオンラインツール。3色をつかったグラデーションも作成でき、CSSコードもそのままコピペできる便利な機能ばかり。

目次へ戻る

 

 

 

CSS Color Gradient Generator

2つ以上の色をなめらかにブレンドしたCSSグラデーションを作成できる新しいツール。これまでのツールとの違いは、線形や放射状グラデーションの他に、特定のポイントカラー放射状に色が広がるなどユニークな効果も可能。

css-color-gradient-generator

目次へ戻る

 

 

CoolHue

デザイナーの手作業でひとつずつキュレートされた、美しく幻想的なグラデーションカラーのまとめており、CSS3コードの他にPNGファイルも無料ダウンロードできます。

coolhue

目次へ戻る

 

 

 

GradPad

選択した2色を直感的に混ぜてグラデーションを作成できる配色ツール。ナビメニューより「Get CSS for this Gradient」でCSSソースコードをコピーできます。また、配色のアイデアが欲しいときは「Gradient Gallery」をクリックすれば、美しいグラデーションをまとめて閲覧、編集することもできます。

css-gradient-css-gradient2

目次へ戻る

 

 

 

Gradient Generator

お好みの色を2色選び、スライダーを左右に「0〜40」まで動かすことで、段階的なグラデーションを自動生成できるツール。

目次へ戻る

 

 

 

Gradient Magic

他のグラデーションとは一線を画す、ユニークなCSSグラデーションを集めたサイト。ストライプ柄やチェック柄、サンバースト柄などあまり見かけないものばかり。クリック一発でCSSコピペできます。

目次へ戻る

 

 

 

NEW Multicolor Gradients

軽量でカラフル、レスポンシブにも対応したグラデーションカラーをコレクションしたサイトで、他では見かけないアート性の強い作品が中心に揃います。個人及び商用利用で利用できます。

frame-1-7

目次へ戻る

 

 

 

CSS Gradient Animator

美しく色が変化するアニメーション付きCSSグラデーションをその場で作成し、CSSコードをコピーできるオンラインツール。Spaceキーでランダムに色を変更できます。

css_gradient_animator___fuze

目次へ戻る

 

 

 

Gradients party

ウェブサイトの背景やボタンな、使い勝手の良いグラデーションカラーを揃えたライブラリ。ボタン一発でコピペでき、Auto-Prefixにも対応、RGBとHEX値の切り替えもできます。

gradients_party

目次へ戻る

 

 

 

HUE.css

写真を撮影したようなリアルな影、シャドウを表現できるCSSグラデーション49種類が揃います。

hue_css_-_a_huge_pack_of_49_photorealistic_css_gradients

目次へ戻る

 

 

 

Eggradients

200種類を超えるウェブデザイン制作に最適なグラデーションが揃い、どれもボタンひとつでCSSをコピーできる優れもの。カラー別に探すこともできます。

egg-gradients

目次へ戻る

 

 

 

Conic.css

CSSで表現できる美しいグラデーションのみを厳選したライブラリで、気に入った配色をクリックすればCSSをコピーできます。

目次へ戻る

 

 

 

Gradient Hunt

放射状や直線グラデーションなどをつかったグラデーションが中心で、人気別やランダム別での表示もできる嬉しい機能も。

目次へ戻る

 

 

 

NEW Hypercolor

Tainwind CSSで利用されているカラーパレットで作成された美しいグラデーションカラーコレクション。CSSコードをコピペで利用できます。

 

 

グラデーション関連の配色ツールは数も多いので、別の記事でまとめて紹介しています。

ウェブデザイナー必見!美しいCSSグラデーションをコピペできる無料ツール17選まとめ

 

 

 

配色カラーパレット関連リソースまとめ

当サイトでも配色の参考にできるカラーパレットを集めています。特に写真から抽出したものが多く揃っているので、直感的に色を選びやすいかもしれません。

 

・ 【保存版】デザインを学ぶすべての人に贈る、配色アイデア見本101選
・ 和の配色アイデア見本帖46選!日本の風景による美しいカラーパレット【保存版】
・ アイデア広がる!秋の配色カラーパレット見本14選 2017年度
・ 配色完全ガイド!カテゴリー別見本100個とカラーパレットの使い方まとめ
・ Webデザイナー向け配色ガイド!すぐに役立つカラーパレット50個まとめ

目次へ戻る

 

参照元リンク : Best Color Tools and Articles for Designers – CSSAuthor