すべてのツール

カラーホイール

カラーホイール でできること

始める前に、主な機能を確認してください。

  • 補色や類似の配色を検討する
  • 三和音、四和音、二乗和音を見つける
  • 一致するすべての色の 16 進数コードをコピーします
  • 彩度と明度をライブで微調整
  • デザインパレットのベースカラーを選択してください

設定リファレンス

カラーホイール で使用可能なコントロール。

オプション

ベースカラー(色相と彩度)カラーピッカー
操作できるカラーホイールの好きな場所をドラッグして、起点となる色を選びます。角度で色相が、中心からの距離で彩度が決まります。
HEX / CSSカラーテキスト入力
HEXコード、rgb()、hsl()、CSSの色名を入力または貼り付けると、すでに決まっている色にカラーホイールを直接合わせられます。
彩度スライダーレンジ: 0–100% · デフォルト: 91%
ベースカラーの鮮やかさを調整します。0% では完全なグレー、100% ではその色相のもっとも純粋で鮮烈な色になります。
明度スライダーレンジ: 0–100% · デフォルト: 60%
ベースカラーの明るさを調整します。0%の黒から純色を経て100%の白まで変化し、すべてのカラーハーモニーがそれに合わせて更新されます。
ハーモニープリセット
色相環上で強調する古典的な配色関係を選びます。関連する色の位置にマーカーが表示され、配色の成り立ちがひと目で分かります。オプション: 補色スプリットコンプリメンタリー類似色トライアド(三色配色)テトラード(矩形)正方形
無料で利用可能 · 登録不要 · 透かしなしアップロードは転送中に暗号化されます保持ポリシーに基づいて削除されました

よくある質問

カラーホイールでできること

ビジネス、クリエイター、日常業務など、実際の問題を毎日解決します。自分に合ったユースケースを見つけて始めましょう。

学歴

色彩理論を学ぶ

選んだ基準色から、定番の配色パターンをすべてリアルタイムで確認できます。それぞれの配色がいつ・なぜ効果的なのか、わかりやすい説明付きです。

クリエイター向け

ウェブサイトのアクセントカラーを選ぶ

ブランドカラーのHEXコードをカラーホイールに入力し、スプリットコンプリメンタリーやトライアド配色を使って、ぶつかり合わずに引き立つアクセントカラーを見つけましょう。

クリエイター向け

実際のUIでカラースキームをプレビュー

各配色パターンは、ヘッダー・本文・ボタン・ドットで構成された小さなサンプルカードに適用されるので、単なる色見本としてではなく、実際の使用イメージに近い形で組み合わせを確認できます。

クリエイター向け

アート・イラスト向けパレット

自然で落ち着いた雰囲気にはアナロガス配色を、印象的な焦点を作りたい場合は補色を使い、正確なHEXコードをそのままお絵描きアプリにコピーしましょう。

変換結果を一つずつ確認

すべての写真はスラッシュをそのまま通過し、反対側が完成して出てきます。