Khroomaで無限のカラーパレットを生成する

Sep 14, 2025

操作方法

の優れた用途 色理論 デザインでは、平均から素晴らしいものを分離するものの1つです。主観的で微妙な、色はデジタル体験の感情とトーンを定義できる強力なツールです。そんなに重要なもののために、色の周りの私自身のワークフローは深刻な欠けていました。

2018年の3巨大な色の動向

すでにそこにたくさんの素晴らしいリソースがありますが、私はオリジナルのカラーの組み合わせを閲覧して使用する方法がないことがわかりました。それは私が建物によって解決することを意図したものです Khrooma. 。

色を選んでください

The Khroma training screen with the chosen colour bar up top — 選択されたカラーバーを持つクロマトレーニングスクリーン

Khroomaについてのエキサイティングなものの1つは、あなたがあなたのカラーデザイナーの脳の延長のように行動するためにAIアルゴリズムを訓練するようになることです。課題は、それをうまくやるためにあなたが好きな50色を選ばなければなりません。アルゴリズムを構築するとき、私はそれを少なくしようとしましたが、結果は十分に良くありませんでした。

Fiftyは、発電機にさまざまな範囲があることを保証します。トレーニングプロセスは比較的非構造化されており、おそらく等しい部品科学と芸術です。私の経験からいくつかのProのヒントがあなたがそれを最大限に活用するのを助けるべきです。

アルゴリズムがどのように機能するかについて簡単に言及する価値があります。あなたの50色はニューラルネットワークを訓練するために使用され、あなたが好きな何百万もの他の類似の色を認識することができるでしょう（これはあなたの色の親和性を呼びます）。それはあなたが選んだ元の50にいないのであなたが好きではないどちらの色を知っています。つまり、ダークブラウンを選択しない場合は表示されません。あなたがダークブラウンファンではないなら、それは元気ですが、あなたが本当に好きなものを恋しく思っていないのではありません。それがさまざまなものに行くことができることです。

Khrooma Generatorのトレーニングを開始するには、Khroma.coに進み、パーソナライズをクリックしてください。カラーブロックのいくつかの命令と無限スクロール壁が表示されます。これらのブロックの1つをクリックすると、選択したカラーバーに追加され、別のブロックはそれを削除します。続行する最善の方法は、スクロールすることです、そして、デザインで使用したいものとしてジャンプする色を選択することです。これは最初の30色のためにうまく機能します。

洗練する時間

この時点で、選択したカラーバーを調べて、どのように成形するかを確認します。これがあなたの文書の色がスケッチであるならば、あなたはあなたが必要とするすべてを持っていますか？ここから次の20色は洗練についてのものです。あなたが先に進むにつれて、小さなツールチップはいくつかの提案と一緒に飛び出します、例えば「いくつかのマゼンタ、黄色、そして淡い色はあなたの結果を改善するでしょう」。私はこれらに固執しようとすることをお勧めしますが、新しい色を選ぶことを恐れないでください。ここからあなたはさらに10を選ぶべきで、合計を40にします。

もう一度バーを見上げてください。実質的に同じ色が見えますか？それ以来、同じ色を選ぶことは珍しいことではありません。しかし、それはあなたのアルゴリズムに役立ちません。

私は友人が初期のプロトタイプを試してみました、そして、彼は私に彼の結果があまり良くなかったと私に言った。「それはほとんど青です」と彼は言った。「あなたはあなたのトレーニングでほとんど青を選びましたか？」私は答えた。「はい。私は本当に青が好きです。」

最高の結果は、可能な限り最も広い幅の色の幅を見つけることになるでしょう。トップバーの繰り返し色の上にマウスをマウスで、クリックして削除できます。これはあなたがまだ選択していない色のスロットを解放します。繰り返しの枝刈りをして、5枚のピックが残るまで新しい色を埋め続けます。

いくつかのワイルドカードで投げます

私は最後の5選ぶのためにいくつかのワイルドカードを投げることが報われたことがわかりました。これらは私が自分で使ったことがあるとは思わない色です。多くの場合、私はkhroomaが彼らと一緒に行ったことに驚いて驚きました。他の色の隣のとき、彼らは想像しなかった方法で完璧にフィットしているようです。

ワイルドカードを選択したら、電車ボタンが右上にポップアップします。この時点からご希望のように色を選び続けることができますが、選択した色がたくさんのさまざまな種類の薄いパレットのように見える場合は、おそらくトレーニングを開始するように設定されています。

トレーニングは約3分かかります。あなたは高い90年代に達するという正確さを期待することができます。これは基本的にアルゴリズムがあなたの色を識別できることを表します。あなたがいくつかの調整を試してみたい場合は、実際に戻ってトレーニングの色を編集できます。

あなたのコレクションを構築します

トレーニングプロセスが終了すると、ジェネレータに削除されます。タイプテンプレートのカラーコンボの無限スクロールグリッドが表示されます。各コンボには情報パネルがあり、名前、16進数、およびRGBの値、およびWCAGのアクセシビリティ比率などの詳細を確認できるようにします。右上にあるハートアイコンを使用すると、お気に入りのコレクションの構築を開始できます。

右のコンボを探す

Doing a palette search with #8BD2CA and #32514E. If you're not seeing anything you like, try rearranging the colours in the search bar — ＃8BD2CAと＃32514Eでパレット検索をする。あなたが好きなものが見えない場合は、検索バーの色を並べ替えるようにしてください。

検索はkhroomaの最も強力な機能の1つです。しばしば私が探しているものをゆっくりと考えています、または私はすでにある色で働いていて、補足を見つけたいです。 KHROMAはあなたがあなたの親和性範囲で何十万ものRGB色にアクセスすることをあなたに与えるので、彼らを通して砕けることができることは重要に見えました。

タイプ、色相、名前、16進数で検索できるさまざまなパラメータがあります。種類には、暗い、光、パステル、淡い、深く、ミュート、豊かな、明るい、ネオンがあります。色相は暖かく、クール、赤、オレンジ、黄色、緑、シアン、ブルー、バイオレット、紫、マゼンタです。「ロイヤルブルー」や「コーヒー」のような名前で検索できる1,566個の特定の色があります。最後に、それは16進数とRGB値を受け入れます。

Khroomaは2色のコンボで動作しているので、パレットに保存されているため、検索クエリには2つのスロットがあります。検索バーで1つの用語を入力して検索すると、最初のカラースロットの用語と2番目の順位がランダムになる結果が得られます。

たとえば、「明るい」を検索した場合は、高彩度の色とランダムペアが表示されます。「明るく青」を検索すると、これらの明るい色と2番目のスロットにランダムな青が発生します。たとえば、「明るい青」や「淡黄色」のように、タイプと色相の用語を一緒にチェーンすることもできます。

The details of each pair of colours. Everything can be copied with just a click for quick usage — 色の各ペアの詳細。すばやく使用するためにクリックするだけですべてコピーできます。

検索が特に役に立つ1つの大きなユースケースは、あなたが好きな2色を持っているとき、そして彼らに補完を見つけたいのです。あなたはそれらの正確な色（＃8bd2caと＃32514e）を入力し、パレットテンプレートの下に検索するでしょう。

あなたの親和性範囲に含まれていない色や用語を探すことがあります。それがバイアスコントロールが遊びに入る場所です。ツールバーの右上にあるフィールドを2回クリックしてドラッグすると、それらがそれらを表示します。バイアスは、発電機が厳密な色が選んだ50にどのように整合しているかを表します。

各カラーのkhromaはアルゴリズムを通して実行され、それに応答してパーセンテージを得る（色がどのように見えるか）を得る。その割合がバイアスの下にある場合、それは投入され、プロセスが繰り返されます。

範囲外検索クエリの場合、しきい値テストに合格できるまでバイアスが自動的に低下します。それがあなたの範囲から全体的に（以前の私たちの暗い茶色のように）であれば、それは自動的にそれを0に変えるでしょう。それらの色に。

カスタムイメージ

The five templates of Khroma – you can see the palette adding a couple more colours to the mix — Khroomaの5つのテンプレート - あなたは2つの色を混合に追加するパレットを見ることができます

あなたは設定アイコンの下の右上にいくつかの便利なオプションを見つけることができます。その1つは、カスタムイメージをイメージテンプレートにアップロードする機能です。あなたは事前にイメージに何もする必要はありません。正しいサイズであることを確認してください。

あなたが先に進んであなた自身のヘッドショットを使うことができる間、それはあなた自身のテンプレートを作る能力としてそれを考えるのが良いことです。スケッチやデザインツールで作業しているもののスクリーンショットを取り、アップロードし、無限の組み合わせを閲覧し始めましょう！

私はあなたがあなたのデザインツールキットに有用で強力な追加でそれを試してみてください。

この記事はもともと発行303に発行されました ネット Webデザイナーや開発者向けの世界で最も売れている雑誌。 問題303を購入する または ここで購読する 。

関連記事：

カラー理論を理解するための5つのヒント
Webデザイナーのための最高のカラーツール
Web上で色を良く管理するための7つのヒント

Khroomaで無限のカラーパレットを生成する

色を選んでください

洗練する時間

いくつかのワイルドカードで投げます

あなたのコレクションを構築します

右のコンボを探す

カスタムイメージ

操作方法 - 最も人気のある記事

Googleスライド：文書の設計方法

Reactサイトとアプリをテストする方法

芸術における短縮化のための本質的なガイド

あなたのウェブサイトのSEOを上げるための5つの方法

数量特定のCSSスタイルとレイアウトを作成する

HTMLキャンバス入門

イラストレーターで完全に幾何学的ロゴデザインを作成する

3DS MAXで流星シャワーを作成する

カテゴリ