方法を選択
開始するには、テンプレート（既存パレット）、ジェネレーター（色彩理論）、カスタム（独自作成）のタブから選択してください。
色を選択または生成
カテゴリ別にテンプレートパレットを閲覧したり、補色やトライアドなどの配色スキームを使用して生成したり、手動でカスタムパレットを作成したりできます。
編集と調整
任意の色をクリックしてカラーピッカーで編集したり、色をドラッグして並べ替えたり、シャッフルボタンで新しい配置にしたりできます。
アクセシビリティを確認
コントラストチェッカーを使用して、色の組み合わせがテキストの可読性に関するWCAGアクセシビリティ基準を満たしているか確認してください。
パレットをエクスポート
最終的なパレットをCSS変数、SCSS、Tailwind設定、JSONデータ、またはPNG画像としてエクスポートし、プロジェクトで使用できます。
テンプレートパレットライブラリ
自然、モダン、ヴィンテージなどのカテゴリ別に整理された、プロフェッショナルなカラーパレットの厳選されたコレクションから選択できます。
色彩理論ジェネレーター
補色、トライアド、類似色、モノクロマティック、スプリットコンプリメンタリーなどの色彩理論に基づき、調和の取れたパレットを生成します。
マルチフォーマット対応インポート/エクスポート
CSS変数、SCSS、Tailwind設定、JSON、またはHEXリストからパレットをインポートできます。これらの形式に加え、PNG画像としてもエクスポート可能です。
アクセシビリティコントラストチェッカー
WCAGのコントラストチェッカーを内蔵しており、AA/AAA準拠インジケーターにより、色の組み合わせがアクセシビリティ基準を満たしているか確認できます。
インタラクティブカラーエディター
任意の色をクリックしてカラーピッカーで編集したり、ドラッグして色を並べ替えたり、明るさをリアルタイムプレビューで調整できます。
カスタムパレット作成
パーソナライズされた名前と無制限の色の組み合わせで、独自のカスタムカラーパレットを作成・保存できます。
カラーパレットビューアは、プロジェクトの配色を作成、整理、管理するのに役立つデザインツールです。色彩理論の原則と、形式変換、アクセシビリティチェック、テンプレートライブラリなどの実用的な機能を組み合わせることで、デザインワークフローを効率化し、プロフェッショナルで調和の取れた色の組み合わせを保証します。
プロフェッショナルな色彩理論
実証済みの色彩理論に基づき、科学的にバランスの取れた配色を生成し、視覚的に魅力的なデザインを実現します。
開発者に優しいエクスポート
CSS変数、SCSS、Tailwind CSS、またはJSON形式に直接エクスポートでき、開発ワークフローにシームレスに統合できます。
アクセシビリティ準拠
WCAGコントラストチェッカーを内蔵しており、色の選択がアクセシビリティ基準を満たし、インクルーシブデザインに貢献します。
テンプレートライブラリ
スタイルやカテゴリ別に整理された何百ものプロが厳選したカラーパレットにアクセスでき、すぐにインスピレーションを得られます。
完全なプライバシー
すべての処理はブラウザ内でローカルに行われるため、カラーパレットと設定はプライベートかつ安全に保たれます。
CSS変数（:root）、SCSS変数（$color）、Tailwind設定ファイル、JSONオブジェクト、またはシンプルなHEXカラーリストからパレットをインポートできます。ファイルアップロードとテキストペーストの両方に対応しています。
このジェネレーターは、カラーホイール上の数学的な色の関係を利用して調和の取れたパレットを作成します。補色（反対色）、トライアド（均等に配置された3色）、類似色（隣接する色）などから選択できます。
このツールはWCAG 2.1ガイドラインに準拠しており、AA（4.5:1比率）、AAA（7:1比率）、およびAAラージテキスト（3:1比率）への準拠をチェックし、視覚障害のあるユーザーにとっても色が適切であることを保証します。
はい！任意の色見本をクリックするとカラーピッカーエディターが開きます。色をドラッグして並べ替えたり、シャッフルボタンを使ってパレットをランダムに再配置したりすることもできます。
パレットをCSSカスタムプロパティ、SCSS変数、Tailwind CSS設定、JSONデータオブジェクト、またはPNG画像としてエクスポートできます。各形式は異なる開発ワークフローに合わせて最適化されています。
テンプレートパレットは通常5色ですが、カスタムパレットには3色以上を含めることができます。このツールは異なるパレットサイズを自動的に処理し、テンプレートで必要に応じて拡張します。