カラーパレットジェネレーター
無料オンラインジェネレーターで、美しく調和のとれたカラーパレットを即座に作成。単色、類似色、補色、三色、スプリット補色、四色モードに対応。HSLスライダーで色を微調整し、お気に入りをロックして、CSS、Tailwind、JSON、SVGとしてエクスポート。100%ブラウザベース、データがデバイスから離れることはありません。
カラーパレットを生成するには？
「生成」ボタンをクリックするかスペースキーを押して、新しいランダムパレットを作成します。ハーモニーモードセレクターで単色、類似色、補色、三色、スプリット補色、四色の配色を選択できます。
気に入った色をロックするには？
色見本のロックアイコンをクリックします。ロックされた色は新しいパレット生成時もそのまま残り、ロックされていない色は置き換えられます。
パレットをエクスポートするには？
「エクスポート」ボタンをクリックし、CSS変数、Tailwind設定、JSON配列、SVGパレットから選択します。パレットは自動的にクリップボードにコピーされます。
ハーモニーモードの違いは？
単色は同じ色相で彩度と明度を変化させます。類似色は隣接する色相（±30°）を使います。補色は反対の色相（180°）を使います。三色は3つの等間隔の色相（120°）を使います。スプリット補色は基準色相とその補色の両隣の色相を使います。四色は4つの等間隔の色相（90°）を使います。
ブランドカラーを基準にパレットを作れますか？
はい。ベースカラーのピッカーでブランドカラーを選び、ハーモニーモードを選ぶと、残りの4色がその色を基準に生成されます。生成後もHSLスライダーで一色ずつ調整できます。
エクスポート形式は何がありますか？
CSS変数、Tailwind設定、JSON配列、SVGファイルの4形式で書き出せます。形式を切り替えるとコードプレビューがすぐ更新されるので、そのままプロジェクトに貼り付けられます。
色の値はHEX・RGB・HSLで確認できますか？
はい、各色の値はHEX、RGB、HSLの3形式で切り替えて表示できます。デザインツールやコードで必要な形式を手作業で変換せずにそのまま使えます。
各色に付いている小さなバッジは何ですか？
その色の上で白と黒のどちらの文字が読みやすいかを示しています。コントラスト比が4.5:1に達すると、WCAGのアクセシビリティ基準に沿って合格表示になります。ボタンやバナーの背景色を選ぶときに便利です。
パレットはサーバーにアップロードされますか？
いいえ。すべてブラウザ内で完結するので、色のデータが端末の外に出ることはありません。ページを読み込めばオフラインでも使い続けられます。
カラーパレットジェネレーターの使い方
モノクロマティック・アナロジー・トライアドなどのモードで調和の取れたカラーパレットを生成します。計算はすべてブラウザ内。気に入った色を固定して微調整し、各フレームワーク向け形式で書き出せます。
- ドロップダウンで配色 Mode を選びます: Random、Monochromatic、Analogous、Complementary、Triadic、Split-complementary、Tetradic。
- Base の色を設定すると、生成されるすべてのスウォッチがブランドの色相から派生します。納得いくまで再生成しましょう。
- 気に入らないスウォッチは ✕ ボタンで削除して再生成。残す色は HSL スライダーで微調整できます。
- 明るい背景と暗い背景のモックアップでスウォッチを確認し、どの色の上でも文字が読めるか確かめます。
- Export Palette を開き、CSS Variables、Tailwind Config、JSON Array、SVG Palette のいずれかで書き出します。
Random モードで再生成する前に Base スウォッチを固定しておくと、ブランドカラーを失わずにその周辺のバリエーションを探れます。
関連ツール
- カラーコンバーター 無料オンラインカラーコンバーター。HEX、RGB、HSL、HSV形式をビジュアルピッカーで即座に変換。100% プライベート、ブラウザで動作。
- カラーピッカー スポイトで画面上の任意の色を取得。HEX、RGB、HSLコードを即座にコピー。無料オンラインカラーピッカー。
- カラーコントラストチェッカー WCAG 2.1 準拠のカラーコントラスト比をチェック。テキストと UI 要素の AA および AAA 基準を即座に検証。
- 色覚異常シミュレーター 無料のオンライン色覚異常シミュレーター。プロタノピア、デューテラノピア、トリタノピアなどのデザインテストに。100%プライベート、ブラウザで動作。
- GIFフレーム分割 GIFアニメーションから個別フレームをPNGまたはスプライトシートとして抽出・ダウンロード。プレビューとZIPエクスポート対応の無料オンラインツール。
- GIF逆再生 GIFアニメーションの再生順序を無料で逆転。アップロード、プレビュー、即座にダウンロード。
- GIFスピード変更 GIFアニメーション速度をオンラインで変更。GIFファイルを即座に加速または減速。
- 動画をGIFに 動画をアニメーションGIFにオンライン変換。品質・フレームレート・解像度をブラウザで直接調整、アップロード不要。