単色配色ジェネレーター
この単色配色ジェネレーターを使って、1色のベースカラーから単色パレットを作成できます。3桁または6桁の16進コードを入力すると、色相と彩度を保ったまま明度を各方向に30ポイント、15ポイントずつ変化させ、10〜90パーセントの範囲でベースカラーを中央にした5色の濃淡を16進コードで返します。落ち着いた一貫性のあるUIの色階調やテーマを作るデザイナーや開発者に最適です。
よくある質問
単色配色ジェネレーターは何を出力しますか？
6桁の小文字の16進コードで5色を返します。Color 3がベースカラーで、Colors 1と2は同じ色相の暗い色、Colors 4と5は明るい色です。
濃淡はどのように計算されますか？
ツールは入力された16進コードをHSLに変換し、明度のみを変更します。変化量はマイナス30、マイナス15、プラス15、プラス30パーセントポイントです。色相と彩度は同じなので、5色はすべて同じ色系統になります。
明度に下限や上限はありますか？
はい。暗くする段階は明度10パーセント未満にならず、明るくする段階は90パーセントを超えないため、純粋な黒や白にはなりません。
非常に暗い、または明るいベースカラーで、重複した色や予想外の色が出るのはなぜですか？
明度の下限と上限が10パーセントと90パーセントに設定されているため、端に近い段階では同じ値に収束します。#000000の場合、暗くする2段階はどちらも#1a1a1aになり、ベースカラーより明るくなります。また、#ffffffの場合、明るくする2段階はどちらも#e6e6e6になります。
純粋な赤ではどんなパレットになりますか？
#ff0000の場合、ツールは#660000、#b30000、#ff0000、#ff4d4d、#ff9999を返します。赤の明度は50パーセントなので、暗い色が2段階、明るい色が2段階の全範囲が得られます。
どの色形式を入力できますか？
#の有無を問わず、3桁または6桁の16進コードを1つ入力します。#3366ccや36cのような形式です。RGB形式、HSL形式、色名は受け付けないため、先に16進コードに変換してください。
ベースカラーが少し変わって返されるのはなぜですか？
色相、彩度、明度は整数に丸められるため、HSLに変換して戻すと、1つの色チャンネルが1段階ずれることがあります。たとえば#ff5733は、スケール中央で#ff5833として表示されます。
グレーにも使えますか？
はい。色相に基づく配色とは異なり、単色スケールは明度を変えるため、グレーからは明るいグレーと暗いグレーが得られます。黒と白には、前述の10〜90パーセントの範囲が適用されます。
インターフェースで単色パレットを使うにはどうすればよいですか？
最も暗い色をテキストや境界線に、ベースカラーを主要な操作要素に、最も明るい色を背景やホバー状態に使います。隣り合う段階の明度差はわずか15ポイントなので、WCAGコントラストチェッカーでテキストのコントラストを確認してください。
結果はカラーパレットジェネレーターと同じですか？
はい。このツールはColor Palette GeneratorのMonochromaticオプションとまったく同じ計算を行うため、同じベースカラーに対して両方とも同じ5つの16進コードを返します。