無料
カラーパレットジェネレーター
調和のとれたカラーパレットを生成します。相補的で類似した 3 項スキームを検討します。CSS、Tailwind、または画像としてエクスポートします。
ファイルがデバイスから離れることはありません
残り10:00
#ACE619
rgb(172, 230, 25)
hsl(77°, 80%, 50%)
#2ACB82
rgb(42, 203, 130)
hsl(153°, 66%, 48%)
#C26E51
rgb(194, 110, 81)
hsl(15°, 48%, 54%)
#858D30
rgb(133, 141, 48)
hsl(65°, 49%, 37%)
#A540C4
rgb(165, 64, 196)
hsl(286°, 53%, 51%)
カラーパレットジェネレーターとは何ですか?
StackPro の無料カラー パレット ジェネレーターを使用すると、デザイナーや開発者は美しく調和のとれた配色を数秒で作成できます。任意のベースカラーから始めて、相補的、類似的、三項的、単色のハーモニーを探求します。好きな色をロックし、ビジュアルピッカーで個々の色合いを調整し、コントラスト比をチェックしてアクセシビリティを確認し、CSS カスタム プロパティ、Tailwind 構成、SCSS 変数などの開発者が使用できる形式でエクスポートします。
カラーパレットジェネレーターの使用方法
- カラーピッカーを使用してベースカラーを選択するか、16 進数の値を入力します。
- ハーモニーモード (相補、アナログ、トライアドなど) を選択します。
- 任意の色見本をクリックして、個々の色を微調整します。
- 好きな色をロックし、「生成」を押して新しいバリエーションを作成します。
- 最終的なパレットを CSS、Tailwind、SCSS としてエクスポートするか、PNG としてダウンロードします。
特長
- 複数のハーモニーモード: 相補的、類似、三和、四和、単色
- 16 進数、RGB、および HSL 入力を備えたビジュアル カラー ピッカー
- 反復パレット構築のためのカラーロック
- WCAG コントラスト比チェッカー
- CSS カスタム プロパティ、Tailwind、または SCSS としてエクスポート
- パレットをPNG画像としてダウンロード
- パレットの履歴とお気に入り
- 100% クライアント側で処理
よくある質問
どのようなカラーハーモニーモードが利用可能ですか?▼
相補色、相似色、3 項、4 項、分割補色、および単色の色の調和を使用してパレットを生成します。個別の色を選択して、完全にカスタムのパレットを作成することもできます。
開発用にパレットをエクスポートできますか?▼
はい！パレットを CSS カスタム プロパティ、Tailwind CSS 構成、SCSS 変数、またはダウンロード可能な PNG イメージとしてエクスポートします。各形式はプロジェクトに貼り付ける準備ができています。
利用可能な色の組み合わせを見つけるにはどうすればよいですか?▼
このジェネレーターには、パレット内の任意の 2 色の間の WCAG 2.0 コントラスト比を評価するコントラスト チェッカーが含まれており、テキストの読みやすさとアクセシビリティへの準拠を確保するのに役立ちます。
新しいパレットの生成中に色をロックできますか?▼
はい！好きな色をロックしてから再生成します。ロックされていない色のみが変更されます。これにより、ブランドカラーを中心に完璧なパレットを繰り返し構築できます。