Stax
Tools

Random Color Generator

Generate random colour palettes in pastel, vivid, dark, or monochrome.

#00FAC8
#2AFE9B
#93CD74
#22ECAC
#C00294
#00FAC8
rgb(0, 250, 200)
#2AFE9B
rgb(42, 254, 155)
#93CD74
rgb(147, 205, 116)
#22ECAC
rgb(34, 236, 172)
#C00294
rgb(192, 2, 148)

🔒 Lock individual colours before regenerating to keep them in the palette. Click any swatch or the palette strip to copy its hex code.

ランダムカラー生成の活用場面

ランダムカラーから使えるパレットを作る

カラーのアクセシビリティ

ランダムカラージェネレーターはデザイン探索の出発点です。クリエイティブな行き詰まりを打破し、予想外の組み合わせを生み出し、意図的には選ばなかったカラーの関係性を発見できます。ムードボード、ブランドカラーの探索、データビジュアライゼーションパレット、クイックプロトタイピングなどに活用できます。

実用的なデザインパレットには通常、プライマリカラー1色、アクセントカラー1〜2色、そしてニュートラルな背景色が必要です。鮮やかなパレットを生成し、最も響くカラーをプライマリとしてロックしてから、パステルモードに切り替えて再生成し、背景やサーフェスに合うカラーを探します。ロック機能でこのワークフローをスムーズに行えます。

ランダムカラーはアクセシブルなコントラスト比を保証しません。パレットを選んだ後は、カラーコントラストチェッカーで前景色/背景色のペアを確認し、WCAG AAへの準拠（通常テストで4.5:1、大きなテキストで3:1）を確かめてください。鮮やかな色や暗いパレットは合格しやすく、白いテキストに対するパステル背景は不合格になりやすいです。

UI/UXデザイナーはデフォルトのカラー習慣を打ち破り、ブランディングやランディングページのプロトタイプ向けに予想外の組み合わせを発見するために使用します。データビジュアライゼーションエンジニアはビルド時にカテゴリ数が不明な場合、チャート系列用のランダムパレットを生成します。ゲーム開発者はチームカラー、派閥の色、キャラクターのスキントーンをプロシージャルに割り当てるために使用します。アーティストやイラストレーターは限られたパレットのデジタルペインティングのインスピレーションとして使用します。フロントエンド開発者はコンポーネントライブラリをさまざまなカラー入力でテストし、コントラストやアクセシビリティの問題を発見します。

選択するパレットスタイルには心理的な重みがあります。鮮やかな色はエネルギー、緊迫感、自信を示し——CTAやプロモーションバナーに効果的です。パステルカラーは穏やかさ、柔らかさ、親しみやすさを伝え——ウェルネス、ベビー用品、ライフスタイルブランドで人気です。ダークパレットは洗練度、プレミアムな品質、深みを示唆し——ラグジュアリー、テック、ナイトライフブランドで使用されます。モノクロパレットはプロフェッショナリズムと明確さを示し——編集やコーポレートのコンテキストで標準的です。

気に入ったパレットができたら、各HEX値を個別にコピーするか「すべてコピー」を使ってカンマ区切りのリストを取得します。Figmaのカラースタイルとして直接貼り付けたり、CSSカスタムプロパティファイルに--color-1: #hex変数として、またはTailwind configオブジェクトとして貼り付けることができます。ロック機能を使用すると、保持したいカラーを固定しながら残りのスウォッチのバリアントを探索できます。

よくある質問

How are the colour palettes generated?
Each colour is generated in HSL colour space with randomised hue (0–359°), and saturation/lightness ranges tuned for the selected style. Pastel colours have high lightness (75–90%) and low-medium saturation. Vivid colours have high saturation (80–100%) and medium lightness. Dark colours have low lightness (15–35%).
What does the lock feature do?
Clicking the lock icon on a colour swatch locks that colour in place. When you click Generate, locked colours stay unchanged while unlocked colours are randomised. This lets you build on a colour you like — keep your brand primary colour locked and explore complementary accent colours.
How do I use random colours in my design?
Copy the hex code by clicking the swatch or the Copy button. Paste directly into Figma, Sketch, Adobe XD, CSS, or any design tool. The 'Copy All' button copies all hex codes as a comma-separated list, useful for pasting into design token files.
What is the difference between pastel and vivid colours?
Pastel colours have high lightness and low saturation — they appear soft, light, and muted. Good for backgrounds, cards, and gentle UI. Vivid colours have high saturation and medium lightness — bold, energetic, and eye-catching. Good for CTAs, badges, and highlights.
Can I generate a monochromatic palette?
Yes — select the 'Monochrome' style. This generates colours with nearly zero saturation (grey tones). Combined with the count selector, you can create a full greyscale palette from very light to very dark for neutral UI components.

関連ツール