カラー ホイール — オンライン カラー ピッカー ホイールと補色
このインタラクティブを使用してください カラーホイール に 色を選ぶ、 探す 補色、 そして探検してください 類似した、 三項の、 四項、 そして スプリットコンプリメンタリー 計画。 これは、色を一致させたり、対照的な色をテストしたり、相性の良い色の組み合わせを生成したりするための迅速な方法です。
特徴
- 相互の作用 カラーピッカーホイール (HSV) とスムーズなドラッグと正確な入力 (HEX/RGB/HSL)。
- インスタント 補色生成器 さらに、類似、三項、分割相補、四項、および単色のオプションも含まれます。
- 読みやすい UI テキストとボタンの WCAG コントラスト ヒントを使用します。 対照的な色。
- パレットのエクスポート先 PNG、 SVG、 または CSS変数 素早い引き継ぎのために。
- 完全な状態を維持するレスポンシブ キャンバス カラーサークル すべての画面で表示されます。
アプリケーション
ブランディングとUI: ブランドの個性に合わせた調和のとれたパレットを構築します。を使用します。 補色カラーホイール 影響力の高い CTA を作成するため、または 三項色 バランスのとれたナビゲーションとチャートの色のスキーム。
イラスト＆アパレル： 探検する 類似のスキーム 自然な感じのグラデーションに。衣服によく合う色が必要な場合は、このツールが役立ちます 補色を見つける 見た目にポップな色（「フィット感のある補色」）。
内装と塗装: 翻訳してください RGBカラーホイール に カラーホイールをペイントする 考え方。アンカーシェードから始めてテストしてください 反対の色 またはミュート 三次色 バランスのために。
Viz 日付: チャートに十分なコントラストのあるパレットを選択してください。ある スプリットコンプリメンタリー set を使用すると、多様性を保ちながら混乱を避けることができます。
仕組み
- 色を選択してください: ホイール上でドラッグするか、HEX/RGB/HSL と入力します。
- スキームを選択してください: 相補的、類似、三項、分割相補的、四項、または単色。
- 値を絞り込む: 明るさ（値）を調整して明暗を制御します。
- コントラストを確認します。 明るい/暗い背景でテキストが WCAG を満たすことを確認します。
- 輸出： PNG/SVG をダウンロードするか、開発ハンドオフ用の CSS 変数をコピーします。
ヒント: 簡単な操作が必要な場合 色の組み合わせジェネレーター, シングル→コンプリメンタリー→トライアディックで始めて、雰囲気と読みやすさを比較します。
よくある質問
色彩理論における色相環とは何ですか?
の 色彩理論ホイール 色相を円形に配置して、相補的 (反対)、類似 (隣接)、三項 (等間隔) などの関係を確認できるようにします。それは、 色の調和 そして、似合う色を選ぶこと。
補色を見つけるにはどうすればよいですか?
基本の色相を選択します。その 補色 車輪の真向かいに座っています。アプリの「相補」スキームを使用してペアを即座に生成し、コントラストを評価します。
一次色、二次色、三次色とは何ですか?
主要な色相は基本色です。それらを混合すると二次色が生成され、原色と隣接する二次色を混合すると、 三次色、古典的な 12 色のホイールを形成します。
RGB カラーホイールとペイント カラー サークルはどちらでしょうか?
の RGBカラーホイール スクリーンの追加光をモデル化します。伝統的なRYBペイントホイールは引き算式です。補数ペアはモデル間で若干異なります。
虹の色の順番は何色でしょうか？
赤、オレンジ、黄、緑、青、藍、紫 - を構築するときに役立ちます。 カラースペクトルホイール または色彩理論の基礎を教えます。
UIに似合う色は何色でしょうか？
試す 類似した スムーズなハーモニーを実現するために、 三項の コントラストのバランスをとるため、または 補完的な 強く強調する場合 (ボタン、アラート)。コントラスト比を常に確認してください。
用語集（色彩理論）
補色: コントラストを最大化するホイール上の反対の色相 (例: 青 ↔ オレンジ)。
類似: 隣接する色合いが緩やかなグラデーションと視覚的な統一感を生み出します。
トライアディック: 120°間隔で配置された 3 つの色相。鮮やかでありながらバランスが取れています。
四次: 2つの相補的なペア。濃厚ですが、慎重なバランスが必要です。
一次/二次/三次: 12 色ホイールの基本色、その混合、および中間ステップ。
色相/彩度/明度 (HSV): ホイールの角度、色の強さ、明るさ。
アクセシビリティとコントラスト
コントラストのヒントを使用して、テキストを読みやすくします。通常のテキストの場合、次の比率を目指します。 ≥ 4.5:1;大きなテキストの場合、 ≥ 3:1。 疑わしい場合は、明るい背景と暗い補色を選択するか、明るさ/値を上げて読みやすくします。