色の調和を作成する方法
- 1
ハーモニータイプを選択
ドロップダウンを使用して、補色、モノクロマティック、アナログ、トライアド、テトラッド、またはスプリットコンプリメンタリーの配色から選択します。
- 2
ホイール上で色を調整
カラーホイールをクリック＆ドラッグしてベースカラーを選択します。選択に応じてハーモニーカラーが自動的に更新されます。
- 3
明度を微調整
外側の明度リングを使用して、ハーモニーの関係を維持しながらカラーパレットの明るさを調整します。
- 4
コピーまたはエクスポート
カラー見本をクリックして個々の色をコピーしたり、エクスポートボタンを使用してさまざまな形式でパレットをダウンロードできます。
主な機能
インタラクティブなカラーホイール
視覚的なカラーホイール上で色をドラッグして調整。明度調整リングを別途搭載し、正確な色選択が可能です。
6種類の配色ハーモニー
補色、モノクロマティック、アナログ、トライアド、テトラッド、スプリットコンプリメンタリーの配色を自動で生成します。
複数のカラー形式
HEX、RGB、HSL、CMYK形式で色を表示・コピー可能。ワンクリックでクリップボードにコピーできます。
エクスポート＆コード生成
パレットをPNG画像、PDFドキュメント、JSONデータ、CSS変数、SCSS変数、またはTailwind CSS設定としてエクスポートできます。
カラーホイールと色の調和とは？
カラーホイール（色相環）は、色の視覚的な関係性に基づいて配置された色の表現です。色の調和とは、互いにうまく調和し、心地よく見える色の配置を指します。私たちのインタラクティブツールは、補色（反対色）、トライアド（等間隔に配置された3色）、アナログ（隣接色）といった伝統的な色彩理論の原則を用いて、数学的にバランスの取れた色の組み合わせを作成するのに役立ちます。
私たちのカラーホイールツールを使用する理由
- 1
プロフェッショナルな色彩理論
芸術家やデザイナーが何世紀にもわたって視覚的に魅力的な組み合わせを作成するために使用してきた、伝統的な色彩理論の原則に基づいています。
- 2
開発者に優しいエクスポート
CSS変数、SCSS変数、Tailwind CSS設定ファイルを生成し、ウェブプロジェクトですぐに使用できます。
- 3
複数のエクスポート形式
パレットを画像（PNG）、ドキュメント（PDF）、またはデータ（JSON）としてエクスポートし、さまざまなデザインツールやプラットフォームで使用できます。
- 4
リアルタイムの視覚的フィードバック
接続線でハーモニーの関係を視覚化し、即座の視覚的フィードバックでインタラクティブに色を調整できます。
よくある質問
利用可能な色の調和タイプは何ですか？
このツールは6種類のハーモニータイプを提供します：補色（2つの反対色）、モノクロマティック（1つの色のバリエーション）、アナログ（3つの隣接色）、トライアド（等間隔に配置された3色）、テトラッド（等間隔に配置された4色）、スプリットコンプリメンタリー（1色とその補色の隣接する2色）。
色の明るさを調整するにはどうすればよいですか？
カラーホイールの外側にある明度リングを使用してください。このリングをドラッグして、色相と彩度の関係を維持しながら、ハーモニー内のすべての色の明度を調整できます。
個々の色をコピーできますか？
はい、任意の色見本をクリックすると、その値がクリップボードにコピーされます。形式選択ボタンを使用して、HEX、RGB、HSL、CMYK形式を切り替えることができます。
どのようなエクスポート形式がサポートされていますか？
PNG画像、PDFドキュメント、JSONデータ、CSS変数、SCSS変数、Tailwind CSS設定ファイルとしてエクスポートできます。各形式は異なる用途に最適化されています。
生成されたCSS変数はどのように使用しますか？
エクスポートモーダルからCSS変数をコピーし、スタイルシートに貼り付けてください。その後、background-color: var(--color-1); や color: var(--color-2); のように使用できます。
ハーモニーカラーを個別にドラッグできますか？
はい、任意のハーモニーカラーポイントをドラッグして、パレット全体を調整できます。選択されたハーモニータイプの数学的な関係を維持するために、メインの色が自動的に再計算されます。