ランダムカラーパレットジェネレータ
統一されたカラーパレットは、互いに隣接して配置された5つのランダムな色よりもはるかに便利です。このツールはベース色を指定し、古典的な色彩理論に基づく関係(類似色、補色、分割補色、三色組または四色組)を用いて4つの関連色を生成します。必要に応じて任意のサンプルを固定し、残りの色を再生成することも可能です。
パレットを生成する方法
-
1
和音の種類を選択してください
類似(円盤上の隣接点)、補完的(対向する位置)、三重対称的(120度間隔)、四重対称的(長方形)または単色的(同一色の濃淡)。
-
2
ベースを巻きます
最初のサンプルは、飽和度と明度が中程度のランダムな色調であり、出発点として使用されます。
-
3
兄弟姉妹は計算されます
他のサンプルは、選択した調和を用いてベースから派生させた後、コントラストを調整しています。
-
4
ロックして再ロールします
気に入ったサンプルはそのままにしてください。残りのものはパレットが満たされるまで再巻きしてください。
シャーモニーのチートシート
| スケジュール | ユール上の明るさオフセット | 氛気 |
|---|---|---|
| 单色 | 0度(同じ色調、明度・濃さ可変) | 軒静で極めてシンプル |
| 類似型 | +/- 30度 | 温かく自然な色合い |
| 補完型 | 180度 | 高コントラストで鮮やか |
| 分割補完型 | 150/210度 | 強調感のないコントラスト |
| 三値制 | 0、120、240度 | 活発でバランスの取れた |
| 四分体型 | 0、90、180、270度 | 複雑でバランスを取るのが難しい |
実用的なヒント
– 「1つの主色、2つの補助色、2つのアクセント色」。優れたUIパレットは60/30/10の比率を採用する:画面の3分の2を主色に、3分の1を補助色に、残りのわずかな領域をアクセント色として使用する。
- **対ごとにコントラストを確認してください。**調和しているように見えるパレットでも、背景上のテキストが読み取れない組み合わせが存在する可能性があります。送信予定の各組み合わせをテストしてください。
- 「ロックして、平均化しないでください。」2つのサンプルが調和していないと感じた場合は、気に入ったものを固定して再試行してください。平均化することで「妥協」してはいけません。人間の脳が認識するのは調和であり、平均値ではありません。
作業に必要なツール
長年にわたり、デザイナーたちはさまざまな色輪を好んできました。RYB色輪(赤・黄・青)は教育現場で標準として採用されています。コンピュータ上のHSL色系は簡略化された抽象表現であり、OKLCH色系は知覚的な均一性を実現するための現在の最先端の方法であり、アクセシブルな色彩システムを扱う場合に学ぶ価値があります。
よくある質問
固定飽和度および明度は色相に関わらず視覚的に類似したサンプルを生成するため、パレット内のサンプル間で明度を変える(淡いもの、中程度のもの、濃いもの)とすると、そのパレットの使いやすさが即座に向上します。
類似した色調で単色である。その調和感はほとんど偶然にもなっているように見える。三色組や四色組はデザインの信頼性を高めるが、実行が不十分な場合には簡単に混沌とした印象を与える可能性がある。
はい——ヘックスコードをカンマ区切りのリスト、CSSカスタムプロパティブロック、またはJSON配列としてコピーしてください。デザインツールが受け入れる形式を選択してください。
各サンプルでは白と黒との対比が示されており、テキストに適した色を一目で確認できます。WCAGのペアワイズ対比については、出荷前に確認する責任があります。
関連ツール
カラーパレットジェネレーター
補色、類似、三項、分割補色スキームを使用して、ベース カラーから調和のとれた 4 ~ 8 色のカラー パレットを生成します。
ランダム数生成器
ランダムなRGB色を生成し、ヘキサデシカル値、HSL値およびRGB値を確認して、任意の形式をワンクリックでコピーできます。
ランダム文字生成器
英語アルファベットからランダムな文字を生成します。大文字・小文字の有無、重複の有無、および生成数を設定できます。
HEX色選択ツール
任意の色を視覚的に選択し、そのHEX、RGB、HSL、HSVおよびCMYK値に加え、白および黒に対するアクセシビリティコントラストも取得します。
JSONフォーマット
調整可能なインデント、並べ替えられたキー、およびエラーを正確な位置で強調するインライン検証機能を備えた、フォーマットされ、美しく印刷可能なJSONデータ。
ランダムな文字列生成器
人気のある名前および姓のリストから妥当な英語名を生成します。性別、数、書式を選択してください。