オンライン類似色配色ツール
ベースカラーと色相ギャップを指定して、類似色の3色セットをブラウザ内で即座に生成。HEX、RGB、HSV、HSLで編集可能. 処理はブラウザ内でローカルに行われます。
使ってみる
類似色配色の仕組みと活用
類似色配色は、色相環上で隣り合う色を使用する調和のとれた配色です。このツールは、ベースカラーの色相を基準に、指定した角度だけ左右にずらした2色を生成します。
具体的な動作例
ベースカラーに #3B82F6（HSL約217°, 91%, 60%）を選び、ギャップを30度に設定すると、以下の3色が生成されます。
- 左類似色:
#3CE0F6 - ベースカラー:
#3B82F6（そのまま維持） - 右類似色:
#523CF6
ギャップを90度にすると、#3CF652、#3B82F6、#F63CE0 が生成されます。
生成ロジックの詳細
ベースカラーはRGBからHSLに変換され、彩度と明度は整数に丸められた値が維持されます。色相は360度でラップされ、左右の色が計算されます。中央のスウォッチは変換を経由しないため、選択したベースカラーのHEX値がそのまま保持されます。
編集と制限
各スウォッチの詳細パネルで値を編集できますが、他のスウォッチには影響しません。このツールにはコントラストスコア、色覚シミュレーション、色域警告、ブランドパレットロック、エクスポート機能はありません。類似色はテキストの可読性やアクセシビリティを保証するものではないため、前景色と背景色の組み合わせは別途確認してください。
よくある質問
生成された色を編集すると、他の色も変わりますか？
いいえ。各スウォッチの詳細パネルで値を編集すると、そのスウォッチのみが変更され、他の2色は再計算されません。
色相ギャップの範囲は？
スライダーは1度から90度の範囲で調整できます。デフォルトは30度です。
このツールはアクセシビリティを保証しますか？
いいえ。類似色の組み合わせは必ずしも十分なコントラストを持つとは限りません。テキストやUI要素に使用する前に、WCAGなどのアクセシビリティ基準に基づいて個別に確認してください。
チェックリスト
- ベースカラーを選択
- 色相ギャップを設定
- 生成ボタンをクリック
- 結果を実際のUIで確認
- コントラストを検証
処理はブラウザ内でローカルに行われます。