15 のベスト カラー ピッカー ツール (2022) – デザイナーと開発者向けのカラー パレット ツール

公開: 2022-08-27

色は私たちの生活の中で最も重要な側面の 1 つです。 私たちは、ソーシャル メディア チャネル、アプリ、ウェブサイト、雑誌、建物などで、さまざまな色とその組み合わせを毎日観察し、使用しています。

しかし、特にあなたがプロのデザイナーである場合、それらを互いに組み合わせるのは難しい場合があります. ここで、カラー コンビネーション ツールが必要になります。

これらのツールは、さまざまな機会に最適な色の組み合わせを見つけて作成し、ダイナミックで魅力的なデザインを作成するのに役立ちます.

最高の色の組み合わせツール

この記事では、プロジェクトに優れたカラー パレットを作成するのに役立つ、2022 年の15 のベスト カラー ピッカー ツールを紹介します 私は自分のアプリ、ブログ、フリーランスのクライアントでこれらのツールの多くを個人的に使用してきました。

色とその構成要素の基本から始めます。 次に、15のベストカラーコンビネーションツールについて説明します. 私と一緒に試してみることができます!

それでは、これ以上遅れることなく、すぐに始めましょう。

目次
[見せる]
  • 色の構成要素
    • フエ
    • 飽和
    • 価値
  • シェード vs ティント vs トーン
  • 配色の種類
    • 単色
    • 類推
    • 補完的
    • トライアド
    • テトラディック
    • 相補的な分割
  • カラー パレットを作成するためのヒント
    • 1. 色彩心理学を理解する
    • 2.配色を決める
    • 3.最新トレンドをチェック
    • 4. 色のインスピレーションを見つける
  • 色の組み合わせに最適なオンライン ツール
    • 1.クーラー
    • 2. カラーハント
    • 3.ヒュースナップ
    • 4.uiGradients
    • 5.Canvaカラーホイール
    • 6. カラーマインド
    • 7. Canvaカラーパレットジェネレーター
    • 8.パレットン
    • 9.アドビカラー
    • 10.クロマ
    • 11. カラーコード
    • 12.カラーデザイナー
    • 13.カール
    • 14.WebGradients
    • 15.カラーパレットジェネレーター
  • 結論

免責事項 :私は透明性を強く信じています。 私たちのサイトのリンクを使用して購入すると、追加費用なしで少額の手数料を得ることができます. これにより、正直なレビューを作成し続けることができます。 続きを読む >>

色の構成要素

赤と黄色、または濃い青と水色をどのように区別しますか? すべての色は、色相、彩度、明度の 3 つの主要な要素で構成されています。

これらの色成分の違いにより、何百万もの色が見えます。 それらが何を意味するのか議論しましょう。

色相彩度値

フエ

色相は基本的に色の名前を指します。 それは、スペクトル内のその色の位置です。 色相の例としては、赤、緑、オレンジなどがあります。

飽和

彩度とは、特定の色の豊かさの度合いを指します。

完全に彩度が高い色は、まぶしく強烈に見えます。 一方、彩度を下げると、色がくすんで見えます。

価値

明度とは、色の明るさや暗さの度合いを指します。 1 から 10 のスケールで、0 は完全に暗い色、10 は完全に明るい色に対応します。

これらは、色の 3 つの重要な属性でした。 しかし、色に詳しい方なら、シェード、ティント、トーンという言葉を聞いたことがあるはずです。 それらが何であるか見てみましょう。

シェード vs ティント vs トーン

シェード vs ティント vs トーン

  • 元の色にを混ぜ続けると、色の濃淡が得られます。
  • の色合いは、常にを追加することによって得られます。
  • 色のトーンは、グレーを常に混ぜることによって得られます。

配色の種類

ソーシャル メディアの投稿、ポスター、ウェブサイト、アプリなどで 2 つ以上の色を試してみたい場合は、さまざまな配色に注意することが不可欠です。

相性の良い色で構成された 6 種類の試行錯誤済みの配色があります。 それらが何であるかを調べてみましょう。

単色

単色配色

単色とは、彩度レベルを変化させて単一の色で作成された組み合わせを指します。

類推

類似の配色

類似色は、カラー ホイール上で隣り合う色です。 たとえば、オレンジ、イエロー オレンジ、イエローなどです。

補完的

補色スキーム

補色は、カラー ホイール上で互いに正反対に位置する色です。 たとえば、ピンクとグリーン、レッドとブルーなどです。

トライアド

トライアド配色

トライアド カラーは、カラー ホイール上で互いに等距離にある 3 つの色です。 たとえば、オレンジ グリーン パープル、イエロー ブルー レッドなどです。

テトラディック

テトラディック配色

テトラディック カラーは、RGB カラー ホイール上で長方形を形成する 2 つの補色のセットです。 たとえば、緑、オレンジ、ピンク、紫です。

相補的な分割

補色スキームの分割

分割補色配色では、カラー ホイールで色を選択し、その補色を見つけて、その両側の色を選択します。

これらの 3 つの色は、カラー ホイール上で三角形を形成します。 たとえば、青緑オレンジ。

カラー パレットを作成するためのヒント

色は人間の心に永続的な影響を与えることができます。 デザイン、ブランド ロゴ、ウェブサイトなどで色を適切に組み合わせることで、視聴者に特定のムードを呼び起こすことができます

完璧なカラー パレットを選択するためのヒントをいくつかご紹介します。

カラー パレットを作成するためのヒント

1. 色彩心理学を理解する

すべての色は、さまざまな感情を発散します。 例えば、

  • は情熱。
  • は高級感。
  • 黄色は暖かさ。
  • は落ち着きを表します。
  • は電源などです。

パレットを作成する前に、与えたい雰囲気を決め、それに応じて色を選択します。 色彩理論については、こちらをご覧ください。

2.配色を決める

これで、パレットに適した色の組み合わせを決定できます。 たとえば、Web サイトには Triadic スキームを使用し、インテリア デザインには Monochrome スキームを使用できます。

3.最新トレンドをチェック

また、特に現代的なプロジェクトに取り組んでいる場合は、デザインと色の分野における最新のトレンドを常に把握しておく必要があります。

4. 色のインスピレーションを見つける

アイデアがない場合は、写真、映画、雑誌などからパレットのインスピレーションを見つけることもできます。

色の組み合わせに最適なオンライン ツール

1.クーラー

プロジェクトに魅力的なカラー パレットを作成しますか? それで クーラーは完璧な選択です。 私は自分のプロジェクトで個人的にそれをたくさん使ってきました。

クーラーのホームページ

クーラーの使い方は?

「Start the Generator」ボタンをクリックするだけで、5 色のランダムなカラー パレットが表示されます。 キーボードのスペースバーを押し続けるだけで、さまざまなカラー パレットを取得できます。

クーラーの使い方

気に入った色があれば、それをロックできます。残りの色は回転し続けます。 パレットに満足したら、選択した形式でエクスポートできます。

デザインを保存したり、フォルダーに整理したりするには、Coolors でアカウントにサインアップする必要があります。

特徴

魅力的なインターフェース

ユーザー インターフェイスは非常に魅力的で使いやすいように見えます。 技術者でなくても簡単に使えます。

クーラーの色調整設定
高度にカスタマイズ可能な色設定

パレット内の色の色相、彩度、温度、明るさを調整できます。 これに加えて、パレット内の任意の色のさまざまな色合いを表示して、それらを最終的な色に置き換えることもできます.

多くのエクスポートオプション

Coolors を使用すると、さまざまな方法でカラー パレットをエクスポートできます。 URL をコピーしたり、コードを取得したり、埋め込んだり、PDF、PNG、SVG、CSS、ASE 形式でダウンロードしたりできます。

クーラーのカラーコード
10種類以上のカラーコード

HEXコードと、ワンクリックでコピーできる他の10種類のカラーコードが表示されます。

事前に設計されたパレット

また、事前にデザインされた 100 万を超えるトレンド カラー パレットの美しいコレクションもあります。 アイデアがないときは、彼らからインスピレーションを得ることができます!

Coolors でトレンドのパレットを探る
さまざまな追加ツール

Coolors はカラー パレットだけに限定されません。 また、次のような興味深いツールも提供します。

  • カラー ピッカー:画像からカラー パレットを抽出するのに役立ちます。
  • コラージュ メーカー:画像から色を抽出し、コラージュとして表示します。
  • コントラスト チェッカー:背景色に適したテキストの色を選択し、選択した色を 10 段階で評価します。
  • グラデーション メーカー:プロジェクトの背景として使用できるグラデーション パレットを作成するのに役立ちます。
邪魔にならない広告

インターフェースには、自社製品を宣伝する邪魔にならない広告が表示されます。 これらの広告をサイドバーに配置して、全体的なユーザー エクスペリエンスを妨げないようにしています。

アプリと拡張機能

Coolors は、Chrome ブラウザーと Adob​​e ソフトウェアの拡張機能、およびiOS デバイス用のアプリを提供しているため、お好みのデバイスで快適に作業できます。

2. カラーハント

カラーハントホームページ

Colorhuntは、美しくデザインされたカラー パレットのコレクションです。 2015 年に Gal Shir によって設立され、Colorhunt のチームによってキュレーションされた、ユーザーが送信したパレットで実行されます。

カラーハントの使い方

Colorhuntは、4 色からなる刺激的なカラー パレットを備えています。 検索バーに色を入力するか、コレクションから色を選択するだけです。

パレットの色に満足したら、リンクまたは画像としてエクスポートできます。

特徴

カラーハント コレクション
驚くべきコレクション

彼らはカラー パレットの非常に興味深いコレクションを持っています。 Pastel、Neon、Fall、Kids、Wedding、Gold などの特定の色またはコレクションを検索できます。または、 New、Popular、および Random コレクションのライブラリをチェックすることもできます.

カラーコードをコピー

パレット内のすべての色のRGB 値と HEX 値を取得します。 これらのコードはワンクリックでコピーできます。

まともなダウンロードオプション

お気に入りのカラー パレットが見つかったら、その URL をコピーするか、PNG 画像としてダウンロードできます。

Colorhunt でオプションとカラー コードをダウンロードする
Chrome 拡張機能

色が画面にどのように表示されるかをテストしたい場合は、Chrome 拡張機能も提供しています。 フルスクリーン モードでパレットを表示できます。

このようにして、相性の良い色についてより良いアイデアを得ることができます。

邪魔にならない広告

サイドバーに表示される広告は 1 つだけで、ユーザー エクスペリエンスを妨げません。

3.ヒュースナップ

Huesnapは、カラー パレットを探索、作成、共有するための興味深いツールです。 Huesnap を使用すると、3 つのことができます。

Huesnap ツール

あなたはできる

  • あらかじめデザインされたカラー パレットのライブラリを調べて、色のインスピレーションを得てください。
  • カラー ホイールから最大 6 色の独自のカラー パレットを作成します
  • 画像をアップロードして色を抽出します

パレットを保存するには、Huesnap にログインする必要があります。

特徴

さまざまな配色

カラー ピッカー ツールから、単色、補色、類似、複合、トライアドなど、すべての配色の詳細なカラー パレットを取得できます。

Huesnap の配色オプション

5種類のカラーコード

HEX、RGB、HSV、HSL、CMYKコードなどのカラーコードをワンクリックでコピー!

カラーパレットの印象的なコレクション

[探索] タブから、何百もの美しくデザインされたカラー パレットをチェックして、デザインのインスピレーションを得ることができます。

HueSnap のカラー パレット コレクション

広告なし

Huesnap の最も優れた点は、インターフェースを覆う広告がないことです。

モバイル デバイス向けアプリ

また、Android および iOS デバイス用のモバイル アプリも入手できるので、外出先でカラー パレットを調べたり作成したりできます。

短所

エクスポート オプションなし

パレットをエクスポートすることはできません。 HEX コードを個別にコピー アンド ペーストすることしかできません。

4.uiGradients

uiGradientsは、色のグラデーションを見つけるための優れたツールです。 基本の10色からお好きな色をお選びいただけます。

その色で利用可能なグラデーションが表示されます。 コレクションをランダムにスクロールして、興味深い組み合わせを見つけることもできます。

特徴

魅力的なコレクション

動画、アプリ、ウェブサイトなどの背景として使用できる何百ものグラデーション カラーのライブラリがあります。

uiGradients のグラデーション コレクション
広告なし

インターフェイスに広告が表示されないため、非常にクリーンでユーザーフレンドリーなカラー ツールになっています。

HEX コードと CSS コードを取得する

ワンクリックで HEX 値をコピーするだけで、CSS コードを任意のグラデーション背景に即座に取得できます。

Web デザイナーにとって、この機能は非常に便利です。

uiGradients で CSS コードを取得する
ダウンロード オプション

好きな色のグラデーションは、Web サイトからJPG 形式でエクスポートできます。 その後、プロジェクト、ビデオなどの背景として使用できます。

5.Canvaカラーホイール

Canva カラー ホイールは、Canva が提供するもう 1 つの効率的なツールで、さまざまな配色に従って組み合わせを作成するのに役立ちます。

Canvaカラーホイールの配色

単色、補色、類似、三色、四色から色と組み合わせを選択するだけです。 最適な組み合わせを表示します。

特徴

魅力的なインターフェース

Canva は、最も直感的なインターフェイスの 1 つを備えています。 当然のことながら、このツールも Canva が提供するエレガントで初心者に優しいインターフェースを使用しています。

適切な色調整オプション

選択した組み合わせのすべての色について、色相、彩度、および輝度をスライダー バーで調整できます。

Canva カラー ホイールの色調整オプション
エクスポート オプション

カラー パレットを PDF 形式でダウンロードでき、ポスター、ソーシャル メディアの投稿、プレゼンテーションなどのデザインにも使用できます。

広告なし

インターフェイスに広告が表示されないため、邪魔にならず楽しい体験をデザインできます.

6. カラーマインド

Colormind は、カラー パレットの生成に役立つ AI を利用したツールです。 ディープ ラーニングを使用して、画像、動画、さまざまなスタイルのアートから配色を学習します。

カラーマインドの使い方

このツールを使用するには、[生成] をクリックするだけで、幅広いコレクションから最適な色の組み合わせが表示されます。

色設定を調整したり、Color Extractor などの他のアプリを利用したり、既製のテンプレートから選択したりすることもできます。

特徴

良いUI

インターフェイスは使いやすく、広告は表示されません。 これにより、便利でフレンドリーなオプションになります。

Colormind の色調整オプション
色調整オプション

パレット内の任意の色を、カラー ホイールの別の色に置き換えることができます。 色に満足したら、それをロックして残りの色を回転させて、完璧なパレットを作成できます。

強力な色抽出ツール

Colormind では、アップロードした画像から色を抽出してパレットを作成することもできます。 「生成」をクリックし続けると、画像からさまざまな色の組み合わせを取得できます。

Colormind の Web ページでパレットをプレビュー
Web ページでプレビュー

Colormind のユニークな機能は、パレット ジェネレーターのすぐ下にあるデモ Web ページとしてカラー パレットをプレビューすることです。 これは、クライアントなどの Web デザインを行っている場合に役立ちます。

短所

ダウンロードオプションなし

カラー パレットをエクスポートするオプションはありません。 すべての色の HEX コードを個別にコピーすることしかできません。

7. Canvaカラーパレットジェネレーター

Canva Color Palette Generatorは、Canva が設計した革新的なツールで、画像から美しいカラー パレットを作成するのに役立ちます。

Canva カラー パレット ジェネレーター

画像をアップロードするだけで、すぐにプロジェクトで使用できる 4 色のパレットに取り込まれます。

特徴

魅力的なUI

Canva は、モダンで印象的で使いやすいインターフェースをユーザーに提供します。 これは、最も使いやすいオンライン設計ツールの 1 つです。 詳細については、 Canva のレビューをご覧ください。

カラー パレットを調べる

また、事前に設計されたカラー パレットの広範なライブラリもあります。 「ハロウィーン」や「結婚式」などの色、テーマ、またはキーワードを入力するだけで、それに関連するカラー パレットを取得できます。

これは、季節限定の Web サイトのデザインやクライアント プロジェクトに最適です。

Canvaでカラーパレットを調べる
HEXコードをコピー

ワンクリックでコピーできるすべての色の上に 16 進コードが表示されます。

強力なアプリ

Canva は、iOS、Android、Windows、および Mac OS で利用できます。 そのため、パレットを簡単にデザインしたり、お好みのデバイスでデザイン ツールを使用したりできます。

広告なし

インターフェイスに広告は表示されません。 これにより、パレットをデザインする際にスムーズで気が散ることのない体験が保証されます.

短所

エクスポート オプションなし

パレットの HEX カラーコードのみをコピーできます。 利用可能なエクスポート オプションはありません。

8.パレットン

Palettonは、プロジェクトに興味深い配色を作成するのに役立つオンライン ツールです。

パレットンの使い方

その Web サイトでは、最初にカラー ホイールで選択した色を見つけるか、プリセットから 1 つを選択する必要があります。

その色のすべての可能な色合いが表示されます。 カラースキームも選択できます。

特徴

複数の配色

そのカラー スキーム ジェネレーターを使用すると、単色、隣接、トライアド、およびテトラッド スキームから選択して、強力な色の組み合わせを設計できます。

Paletton での配色と微調整
パレットを微調整できます

パレットの準備ができたら、パレットの色相、彩度、明るさ、コントラストを調整して微調整できます。

さまざまなプレビュー オプション

Paletton では10 種類以上のプレビュー オプションを利用できます。 そのため、色見本、テキスト、円形、モザイク形式などで色を表示できます。

また、ページ レイアウトに適用されたカラー パレットの例、アニメーション化された泡や図形、花や粉々 になった爆発などのアートワークを見つけることもできます

Paletton でのオプションと例のプレビュー
優れた輸出オプション

カラーリストは、 HTML、CSS、LESS、SASS、XML、またはテキスト形式でダウンロードできます。 色見本は、 PNG 、PhotoshopACO、Gimp の GPL、またはスケッチ パレットとしてダウンロードできます。

短所

平均的なUI

Paletton のインターフェースは少し古いデザインに見えます。 デフォルトの暗いテーマが特徴です。 しかし、コントラストが不適切なため、テキストは読みにくいです。 これは、特に色とデザインを専門とするツールにとっては残念です.

煩わしい広告

下のパネルとサイドバーの広告は、カラー パレットをデザインする際のユーザー エクスペリエンスを妨げます。

9.アドビカラー

Adobe Colorは、 Adobe が設計したオンライン ツールで、カラー ホイールとカラー パレットを提供します。

Adobe Color の配色

ホイールで色を選択するだけで、 9 種類以上の配色から完璧な色の組み合わせを得ることができます。

特徴

4 つの強力なツール

Adobe Color では、次の 4 つのツールにアクセスできます。

  1. カラー ホイール: 9 色以上の色の組み合わせに従ってパレットをデザインするのに役立ちます。
  2. テーマの抽出: イメージを色のムード (カラフル、ミュート、ダーク、ディープ、ミュートなど) に応じて調整できる 5 つの異なる色に分割するのに役立ちます。
  3. グラデーションの抽出: パレット内の色からグラデーションを作成するのに役立ちます。
  4. アクセシビリティ ツール: 選択した色のコントラストと色覚異常をチェックして等級付けします。
Adobe Color のアクセシビリティ ツール
魅力的なインターフェース

Adobe Color のユーザー インターフェイスは使いやすく、非常にモダンに見えます。 また、これらのツールの使用中に気を散らしたり中断したりするのを減らすのに役立つ広告も表示されません.

Adobe Color の書き出しオプション
多くのエクスポート形式

パレットは、A SE、JPEG、LESS、CSS、SASS、および XML の形式でダウンロードできます。

パレットを調べる

また、美しくデザインされたカラー パレットの膨大なコレクションを見つけることができる [探索] タブも用意されています。 カラーテーマ、クリエイティブなプロジェクト、ストックフォトなどで並べ替えることもできます.

Adobe Color の書き出しオプション
Adobe アプリとの互換性

サインインすると、Creative Cloud にカラー パレットを保存し、Photoshop、Illustrator、Frescoなどの Adob​​e ソフトウェアで使用できます。

10.クロマ

Khromaは、好みに応じてパーソナライズされた色の組み合わせを得るのに役立つ AI ベースのツールです。

Khroma のトレーニング データ

このツールを使用するには、まずそのライブラリからお好みの 50 色を選択する必要があります。 次に、AI アルゴリズムがこれらの色をトレーニング データとして使用し、関連する色の組み合わせを生成します。

特徴

5 つの強力なツール

Khroma は、最適な色の組み合わせを選択するのに役立つ5 つの主要なツールで構成されています。

Khroma のカラー パレット ジェネレーター

  1. 文字ツール: テキストを色の上に表示するので、Web サイト、ブログ、ソーシャル メディアの投稿などのデザインに適した色のコントラストを選択できます。
  2. Poster Tool : 2 色を並べて表示
  3. グラデーション ツール: さまざまな色のグラデーションを表示し、キーワードで検索することもできます
  4. 画像ツール: 画像に適用された 2 つの対照的な色を示します
  5. パレットツール:4色のカラーパレットを生成します。
使いやすい

Khroma のインターフェースはシンプルで、あらゆるタイプのユーザーにとって使いやすいものです。

コードをコピー

上記のすべてのツールについて、HEX コード、RGB コード、および CSS スクリプトをワンクリックでコピーできます。

Khroma でのカラー コードのコピー
トレーニング済みデータのエクスポート

Khroma アプリを別のデバイスで使用する場合は、すべてのトレーニング済みデータをダウンロードして、選択したデバイスにアップロードできます。 これにより、エクスペリエンスがさらに便利になります。

邪魔にならない広告

サイドバーに 1 つの広告しか表示されないため、ユーザー エクスペリエンスが損なわれることはありません。

11. カラーコード

Colourcodeは、さまざまな配色に従ってカラー パレットを作成するためのツールです。 左側のパネルから配色を選択し、マウス ポインターをドラッグして適切な組み合わせを見つけ、クリックして選択します。

特徴

65 色以上のパレット

Colourcode を使用すると、最大 65 色以上のカラー パレットを作成できるため、大規模なプロジェクトに最適です。

カラーコードの配色
8つの配色

ここでは、モノクロ、アナロジック、トライアド、クワッドなどを含む 8 つの配色から選択するか、カスタム カラーでパレットを自由に作成できます。  

モダン UI

Colourcode のデフォルトのダーク インターフェイスは、非常に上品で使いやすく、画面を覆う広告はありません。

複数のエクスポート オプション

作成したパレットをPNG 形式でダウンロードし、CSS コードをコピーして、リンクとして他のユーザーと共有することもできます。

カラーコードの色調整オプション
色調整オプション

作成したパレットでは、RGB 値を調整して完璧な色を得ることができます。

12.カラーデザイナー

Color Designer、カラー パレット、グラデーション、および色の混合を作成するためのもう 1 つのユニークなオンライン ツールです。 独自のパレットを最初からデザインするか、ライブラリから 1 つを選択できます。

次に、色見本、カラー ピッカーから色を調整するか、16 進コードを入力します。

特徴

豊富なカラー設定
Color Designer のカラー オプション

パレットに選択したすべての色について、最大40 の色合いと色合いを提供します。 また、配色に応じて適切な組み合わせを示します。

たとえば、相補、類似、分割相補、トライアド、正方形、長方形などです。 最後に、Adobe Stock から同様の画像の候補を取得することもできます。

利用可能なアドオン

Adobe XD および Figma ソフトウェアのアドオンを提供します。 そのため、デザイナーであれば、カラー パレットをこれらのアプリケーションと統合して、プロジェクトで使用できます。

Color Designer の追加ツール
追加ツール

グラデーション ジェネレーター、カラー識別子、カラー コード コンバーター、イメージ カラー ピッカー、イメージ クリエーターのカラー パレット、ランダム カラー ジェネレーターなど、さまざまなツールが用意されています。

短所

広告が含まれています

ページに広告を表示するため、ユーザーエクスペリエンスがある程度損なわれます。

エクスポート オプションなし

Color Designer ツールでは、カラー パレットをダウンロードできません。 HEX カラー コードを個別にコピーできます。

13.カール

Culrsは、 500 以上の事前にデザインされたカラー パレットを探索するための使いやすいツールです。 配色と色合いを選択するだけです。 関連する組み合わせが画面に表示されます。

特徴

複数の配色

単色、類似、トライアド、テトラディックなど、複数の配色を見つけて、最適な組み合わせを作成できます。

Culrs の配色

より適切で関連性の高い結果を得るために、暗い色合いまたは明るい色合いのどちらが必要かを指定することもできます。

デスクトップ用アプリ

Culrs は、 Mac デバイス用の適切なデスクトップ アプリを提供しています。 そのため、ラップトップまたは PC から作業できます。

カールUI
印象的なインターフェース

Culrs のインターフェイスはモダンで非常にエレガントです。 デザインもカラーもかなり高級感があります。 広告も表示されないので、便利にデザインできます。

短所

エクスポート オプションなし

Culrsでは、カラー パレットを任意の形式でダウンロードするオプションは提供していません。 ただし、16 進コードはワンクリックでコピーできます。

14.WebGradients

WebGradientsは、Itmeo チームによって開始された無料のプロジェクトです。 商用利用のために慎重に設計された 180 のグラデーションを提供します。

コレクションをブラウズするだけで、興味のあるグラデーションを見つけることができます。 気に入ったものが見つかったら、フルスクリーン モードに切り替えたり、ダウンロードしたりできます。

特徴

CSS コードを取得する

ワンクリックでグラデーションの CSS コードをコピーできます。 Hex コードをコピーするには、手動で選択する必要があります。

WebGradients のエクスポート オプション
まともなダウンロードオプション

特定のグラデーションが気に入った場合は、 PNG 画像として簡単にダウンロードできます。

利用可能なグラデーションパック

厳選されたグラデーションのコレクションは、 Sketch および Photoshop アプリでも利用できるため、グラフィック デザインで使用できます。

短所

煩わしい広告

インターフェースに 1 つの広告が表示されますが、非表示にするオプションはありません。

フルスクリーン モードに切り替えても、広告は引き続き表示されます。 これにより、全体的なエクスペリエンスが損なわれます。

限定コレクション

グラデーションのコレクションは非常に限られており、わずか 180 個のグラデーションしかありません。 これは、すべての種類のプロジェクトには十分ではない場合があります。

15.カラーパレットジェネレーター

Color Palette Generatorは、写真からカラー パレットを作成するのに役立つシンプルなツールです。

Color Palette Generator に画像をアップロードする

システムから画像をアップロードするか、Flickr、Instagram、または Dropbox サービスに接続するだけです。

画像をさまざまな色に分割し、数秒でカラー パレットを表示します。

特徴

さまざまな色のパレット

パレットには最大 15 色を入れることができます。これは、より微調整と色の精度を必要とする大規模なプロジェクトに最適です。

カラー パレット ジェネレーターのエクスポート オプション
優れた輸出オプション

画像を JPG としてダウンロードしたり、パレットの CSS コードをコピーしたり、色見本を Photoshop と互換性のある ASE 形式でエクスポートしたりできます

短所

調整オプションなし

色調整オプションはありません。 それによって作成されたパレットのみをダウンロードできます。

平均的なUI

ユーザー インターフェースはかなり基本的なもので、画面を覆う広告がたくさんあります。 これにより、設計エクスペリエンスとワークフローが中断されます。

結論

これらは、完璧な色の組み合わせを作成するための無料で使いやすいオンライン ツールです。 あなたがグラフィック、インテリア、または Web デザイナーであれば、仕事に役立つことは間違いありません。

とにかく、この記事を読んで何か価値のあるものを見つけていただければ幸いです。 このような洞察に満ちたコンテンツについては、毎週のニュースレターを購読してください。 これは Kripesh の承認です。 気をつけて学習を続けてください。 乾杯!