Generate

色相環チャート

ベースカラーを選び、色彩理論のルールを試しながら、ランディングページ、ロゴ、Webサイト、ブランド用のパレットをコピーできます。

ベースカラー

Click the wheel to pick a base color

HEX Code

彩度 80%

明度 50%

Color Scheme

カラー形式

#195DE6

Hue220°

Saturation80%

Lightness50%

RGB25, 93, 230

生成されたカラーパレット

補色 — Harmonious color scheme generated based on your selected mode

#195DE6

#E6A219

CSS 変数

Copy once and drop into your stylesheet

:root {
  --color-complementary-1: #195DE6;
  --color-complementary-2: #E6A219;
}

使い方

3ステップでバランスの良いパレットを作成

ベースカラーを選択

カラーピッカーを使うか、HEX コードを貼り付けます。

ルールを選択

補色、類似色、トライアド、テトラード、モノクロを切り替えます。

コピーして使用

単色、パレット全体、CSS 変数をコピーできます。

色相環チャートの機能

Webサイト、ロゴ、ランディングページ向けの実用的な配色ツール

インタラクティブな色相環

視覚的な色相環で色相の変化を確認できます。

調和パレット

色彩理論に基づいたバランスの良いパレットを生成します。

HEX RGB HSL

Webでよく使うカラー形式をすぐに変換します。

CSS 書き出し

パレットを CSS カスタムプロパティとしてコピーできます。

なぜ色相環チャートを使うのか

色相環は、意図が伝わり、読みやすく、ブランドとして一貫した色選びを助けます。

色相環チャートとは？

色相を円形に並べ、コントラストや調和など色同士の関係を理解するための図です。

ランディングページの配色改善

ブランドカラーにボタン、背景、セクション用のアクセントを組み合わせやすくなります。

制作にすぐ使える

HEX、RGB、HSL、CSS 変数を提供するため、手動変換が不要です。

ブランドとロゴにも便利

ハーモニーモードは一貫したビジュアルシステムの出発点になります。

FAQ – 色相環チャート

無料カラーホイールに関するよくある質問

今すぐ色相環チャートパレットを作成

無料のカラーホイールで、次のランディングページ、ブランド、デザインシステムに合うバランスの良い色を選べます。

カラフルなランディングページを作成

デザイナー、マーケター、起業家、クリエイター向けの無料色相環チャート。