ランダムカラーパレットジェネレータ

ランダムパレット

統一されたカラーパレットは、互いに隣接して配置された5つのランダムな色よりもはるかに便利です。このツールはベース色を指定し、古典的な色彩理論に基づく関係(類似色、補色、分割補色、三色組または四色組)を用いて4つの関連色を生成します。必要に応じて任意のサンプルを固定し、残りの色を再生成することも可能です。

パレットを生成する方法

  1. 1

    和音の種類を選択してください

    類似(円盤上の隣接点)、補完的(対向する位置)、三重対称的(120度間隔)、四重対称的(長方形)または単色的(同一色の濃淡)。

  2. 2

    ベースを巻きます

    最初のサンプルは、飽和度と明度が中程度のランダムな色調であり、出発点として使用されます。

  3. 3

    兄弟姉妹は計算されます

    他のサンプルは、選択した調和を用いてベースから派生させた後、コントラストを調整しています。

  4. 4

    ロックして再ロールします

    気に入ったサンプルはそのままにしてください。残りのものはパレットが満たされるまで再巻きしてください。

シャーモニーのチートシート

スケジュール ユール上の明るさオフセット 氛気
单色 0度(同じ色調、明度・濃さ可変) 軒静で極めてシンプル
類似型 +/- 30度 温かく自然な色合い
補完型 180度 高コントラストで鮮やか
分割補完型 150/210度 強調感のないコントラスト
三値制 0、120、240度 活発でバランスの取れた
四分体型 0、90、180、270度 複雑でバランスを取るのが難しい

実用的なヒント

– 「1つの主色、2つの補助色、2つのアクセント色」。優れたUIパレットは60/30/10の比率を採用する:画面の3分の2を主色に、3分の1を補助色に、残りのわずかな領域をアクセント色として使用する。

作業に必要なツール

長年にわたり、デザイナーたちはさまざまな色輪を好んできました。RYB色輪(赤・黄・青)は教育現場で標準として採用されています。コンピュータ上のHSL色系は簡略化された抽象表現であり、OKLCH色系は知覚的な均一性を実現するための現在の最先端の方法であり、アクセシブルな色彩システムを扱う場合に学ぶ価値があります。

よくある質問

固定飽和度および明度は色相に関わらず視覚的に類似したサンプルを生成するため、パレット内のサンプル間で明度を変える(淡いもの、中程度のもの、濃いもの)とすると、そのパレットの使いやすさが即座に向上します。

類似した色調で単色である。その調和感はほとんど偶然にもなっているように見える。三色組や四色組はデザインの信頼性を高めるが、実行が不十分な場合には簡単に混沌とした印象を与える可能性がある。

はい——ヘックスコードをカンマ区切りのリスト、CSSカスタムプロパティブロック、またはJSON配列としてコピーしてください。デザインツールが受け入れる形式を選択してください。

各サンプルでは白と黒との対比が示されており、テキストに適した色を一目で確認できます。WCAGのペアワイズ対比については、出荷前に確認する責任があります。

関連ツール