類似色ジェネレーター
ベースカラーと色相の間隔を選びます。ツールは基準色と、選んだ角度だけ左右にずらした隣接色を表示します。この中央の3色が古典的な類似色配色です。さらに、その2倍の角度にある外側の2色を加え、幅を持たせた5色のパレットとして提示します。類似色パレットは、近い色相同士が共通の色味を持つため、古典的な配色の中でも特に調和しやすく、自然界（夕焼け、森）やエディトリアルデザインでよく使われます。
類似色パレットを作る方法
-
1
ベースカラーを選ぶ
hexコード、RGB値、HSL値を貼り付けます。彩度のある中間トーンほど豊かな類似色セットになります。
-
2
オフセット角度を選ぶ
30°が古典的な類似色の間隔です。15°ではほぼ単色に近いまとまりになり、45°では分割補色に近づきます。
-
3
明度差を調整
必要に応じて3つの色相の明度を変え、平板なパレットを避けます。両端の色を明るくすると、より柔らかく編集的な印象になります。
-
4
色をエクスポート
hex、RGB、HSLをコピーできます。CSS変数、Figmaスタイル、印刷仕様書に便利です。
古典的な配色と類似色
| 配色 | 角度の関係 | 印象 |
|---|---|---|
| 単色（モノクロマティック） | 0°（同じ色相、明度・彩度を変化） | 落ち着き、統一感 |
| 類似色 | 両側に30° | 調和的、自然 |
| 補色 | 180°離れる | 高コントラスト、緊張感 |
| 分割補色 | ベース＋補色を挟む2色 | コントラストと繊細さ |
| 三色配色（トライアド） | 120°離れる | バランス、鮮やか |
| 四色配色（テトラード） | 補色のペア2組 | 豊か、複雑 |
自然界にある類似色パレットの例
- 夕焼け: 黄 → オレンジ → 赤オレンジ（暖色側で30°ずつ移動）。
- 森: 黄緑 → 緑 → 青緑。
- 海: 青緑 → 青 → 青紫。
- 秋: 赤オレンジ → オレンジ → 黄オレンジ。
類似色セットでデザインする
- 1色を主役（面積の60%）、2色目をアクセント（30%）、3色目をハイライト（10%）として使います。いわゆる「60・30・10」ルールです。
- 本文やUIの外枠には、類似色にニュートラル（白、黒、暖かいグレー）を組み合わせます。
- 3つの類似色を同じ彩度のまま大きな面に均等に使うのは避けてください。濁って見えます。両端とベースの間で明度または彩度を変えます。
色空間と角度計算
30°のオフセットはHSLまたはHSVの色相空間で計算します。どちらも色相を角度（0-360°）として扱います。RGB上で色相環の操作はできません。HSLへ変換し、色相を回転し、また戻す必要があります。ツール内部ではそれを行っています。CSS、デザインツール、印刷ワークフローでは好まれる表記が異なるため、3つの表記すべてで出力します。
よくある質問
単色配色は1つの色相を使い、明度と彩度だけを変えます（ネイビー、青、空色など）。類似色配色は色相環上で隣り合う3つの異なる色相を使います（青緑、青、青紫など）。類似色のほうが視覚的な変化があります。
類似色はCMYKインクの混色が重なりやすく、印刷時のコントラストが下がることがあります。ソフトプルーフ版を確認し、印刷物では間隔を30°から40°へ広げることも検討してください。
使えます。ただし3色のうち1色を主なブランドカラーにし、残り2色はバッジやアクセントなどの補助役に回してください。3色すべてを主要なUIアクションに使うと混乱します。ユーザーは1色を主要CTAとして学習するからです。
中央の3色は、ベース色相と、選んだ角度だけ左右に離れた隣接色からなる古典的な類似色配色です。外側の2色はその2倍の角度にあり、パレットの幅を広げたいときに使える追加候補です。初期設定の間隔は30°なので、中央の組み合わせは±30°、外側の2色は±60°に位置します。
関連ツール
バイナリからASCIIへの変換ツール
バイナリ（スペース区切りのバイト、または長いビット列）を貼り付けると、それが表すASCIIテキストを取得できます。7ビットと8ビットのエンコードに対応。
BinaryからHexへのコンバーター
バイナリ入力を大文字の16進数値に変換します。0と1以外は無視され、先頭の0は保持されません。
Base64 → Hex 変換ツール
Base64文字列を、その背後にあるバイトの16進表現へ変換します。トークン、鍵、証明書、JWTの確認に便利です。
ASCII 2進数変換ツール
任意のASCII文字列を2進数表現に変換します。各文字は8ビットになり、スペース区切りで出力されるため、プロトコルトレースや宿題にそのまま貼り付けられます。
ASCIIからHexへのコンバーター
ASCIIテキストをhexadecimal byte値へ変換します。出力は各文字2桁のhexで、memory dump、packet trace、firmware tableに使えます。
BBCodeからHTMLへのコンバーター
BBCode（掲示板マークアップ）をきれいなHTMLへ変換します。装飾タグ、リスト、引用、コード、画像、リンク、表に対応。