カラーコードから明るい色・暗い色のバリエーションを作る方法

色の明暗バリエーションを作る

色コードを基準に、明るい方向と暗い方向のカラーバリエーションを作成するツールです。配色案、ボタンの状態違い、背景と文字の組み合わせを検討するときに、1色ずつ調整する手間を減らせます。明るい色と暗い色はそれぞれ個別に含めるかどうかを選べ、初期状態では両方が対象です。色を指定しない場合は、初期値として「#3498db」が使われます。

使い方の手順

1. 色の入力欄に、基準にしたい色を入力します。先頭に「#」がない場合は、処理時に自動で付加されます。3桁の16進数表記を使うと、各桁が繰り返されて変換されます。
2. 作成する段階数を指定します。正の整数を指定すると、選択した各グループにその数の項目が含まれます。たとえば「5」なら、明るい色のグループと暗い色のグループは、それぞれ5項目です。
3. 明るい色を含めるか、暗い色を含めるかを選びます。片方だけを使いたい場合は、不要なグループを外します。何も変更しなければ、両方のグループが含まれます。
4. 実行します。結果では、基準色と、選択した明るい色・暗い色のバリエーションを確認します。生成された色の各チャンネルは整数に丸められ、0から255の範囲に収められてから16進数で表示されます。
5. 配色に採用する候補を確認します。基準色の表記は、先頭に「#」を補った後の入力文字列として報告されます。色として解析できない入力では、処理自体が成功扱いでも、返されたデータにエラーの表示が含まれることがあります。

結果の読み方と注意点

段階数は、含めると選択した各グループの項目数を決めます。明るい色だけを選べば明るいバリエーションだけ、暗い色だけを選べば暗いバリエーションだけを確認できます。両方を選んだ場合は、各グループが同じ段階数になります。

結果を配色に使う前に、基準色の表記と各バリエーションの16進数を確認してください。丸めと範囲調整が行われるため、計算途中の値ではなく、結果に表示された整数ベースの色を利用します。色の解析に失敗した場合は、エラー表示を確認し、先頭記号や色コードの文字を見直してから再実行します。

使用例

3桁の色コード「#abc」から、明暗2種類の配色候補を5段階ずつ確認したい場合です。

入力した「#abc」を基準色にし、段階数を5に設定して、明るい色と暗い色の両方を含めて実行します。

基準色の表示に続いて、明るい色のグループ5項目と暗い色のグループ5項目が含まれます。

制限事項

• 解析できない色では、成功扱いでも結果データにエラー表示が含まれる場合があります。また、出力値は整数に丸められ、0から255の範囲に調整されます。

よくある間違い

• 色コードの文字が解析できないと、成功扱いの結果にエラー表示が含まれることがあります。先頭の「#」は省略できますが、入力した色の文字を見直し、解析できる表記に修正してから再実行してください。

よくある質問

色コードの先頭に「#」は必要ですか？

先頭に「#」がない場合は、処理時に「#」が付加されてから解析されます。

3桁の16進数カラーコードを使えますか？

3桁の16進数表記を入力した場合は、各桁が繰り返されてから色に変換されます。

明るい色と暗い色を5個ずつ作れますか？

段階数に正の整数を指定すると、含めた各グループにその数の項目が入ります。たとえば5なら、選択した明るい色グループと暗い色グループがそれぞれ5項目です。