補色（コンプリメンタリーカラー）とは何ですか？

色相環で正反対に位置する2色の組み合わせです。赤と緑、青とオレンジなどが補色関係にあり、互いを引き立てる高コントラストな配色を作れます。

Webデザインに使いやすいカラーパレットの作り方は？

メインカラー1色を決め、本ツールで補色・類似色を自動生成するのが効率的です。メインカラー60%、サブカラー30%、アクセントカラー10%の比率が基本です。

カラー無料登録不要

カラーパレット生成

補色・類似色・トライアド等の配色理論に基づくカラーパレット自動生成。画像からの色抽出にも対応。デザイナー向け無料ツール。

Harmony:

or press Space

#52E0DE

#2D1FAD

#B2331F

#8BBB2A

#677BD5

#52E0DE

rgb(82, 224, 222)

#2D1FAD

rgb(45, 31, 173)

#B2331F

rgb(178, 51, 31)

#8BBB2A

rgb(139, 187, 42)

#677BD5

rgb(103, 123, 213)

FAQ

よくある質問

色相環を基にした配色理論で、補色（180度対角）、類似色（隣接色）、トライアド（120度間隔）、スプリットコンプリメンタリーなどの調和パターンがあります。

バリエーション

こちらもおすすめ

アクセシブルカラー生成

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

HEXからパレット生成

HEXカラーコードから補色・類似色・トライアドのカラーパレットを自動生成する無料オンラインツール。

テキストからカラー抽出

CSSやコードからHEX・RGB・HSL等のカラー値を自動抽出してパレット表示。デザイン作業の色確認に便利な無料オンラインツール。

パステルカラー生成

HEXカラーからパステル版を生成する無料オンラインツール。

CMYK→HEX変換

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

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

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

読み込み中...

カラーパレット生成

よくある質問

関連バリエーション

こちらもおすすめ

カラーパレット生成

よくある質問

関連バリエーション

こちらもおすすめ