オフラインでも使えますか？

ページを一度読み込んだあとは、多くの処理がブラウザ内で完結するためネットワーク接続が切れても動作します。ただし初回アクセス時はオンラインが必要です。

スマートフォンでも使えますか？

はい。色相環・配色理論はレスポンシブ対応しており、iPhone・Android・タブレット・PCなど、モダンなブラウザを搭載した端末であればどこからでも利用できます。

カラー無料登録不要

色相環・配色理論

色相環に基づく配色理論(補色・類似色・トライアド等)を解説する無料オンラインツール。

Input

Result

--- 色相環 (12色) ---
0°   赤         🔴
30°  橙         🟠
60°  黄         🟡
90°  黄緑       🟢
120° 緑         🟢
150° 青緑       🔵
180° シアン     🔵
210° 青         🔵
240° 藍         🟣
270° 紫         🟣
300° マゼンタ   🟣
330° 赤紫       🔴

--- 配色パターン ---
補色 (Complementary): 180°反対の色
  例: 赤 ↔ シアン

類似色 (Analogous): ±30°の色
  例: 赤 + 橙 + 赤紫

トライアド (Triadic): 120°間隔の3色
  例: 赤 + 緑 + 青

スプリット補色: 補色の両隣
  例: 赤 + 青緑 + 黄緑

テトラド (Square): 90°間隔の4色
  例: 赤 + 黄 + シアン + 藍

FAQ

よくある質問

色相環・配色理論は主要なカラーフォーマットに対応しています。HEX（#FF0000）、RGB（255,0,0）、HSL（0,100%,50%）など、入力形式を自動判定します。

こちらもおすすめ

アクセシブルカラー生成

WCAG 2.1のコントラスト比基準（AA/AAA）を満たす色の組み合わせを自動生成。アクセシビリティ対応のWebデザインに。無料オンラインカラーツール。

ANSIカラー一覧

ANSI 16色のコード一覧を表示する無料オンラインツール。ANSIカラー一覧をブラウザ上で即座に実行でき、カラーツールとして登録不要で利用できます。

ブランドカラー一覧

主要ブランドのブランドカラーを一覧表示する無料オンラインツール。

アルファブレンド

HEXカラーに白背景でアルファ値50%を合成する無料オンラインツール。

CMYK→HEX変換

CMYKカラー値をHEXに変換する無料オンラインツール。

コントラスト比チェッカー

文字色と背景色のコントラスト比をWCAG 2.1基準（AA/AAA）でチェック。アクセシビリティ準拠の色選びに。無料オンラインツール。

読み込み中...