ランダム 色ジェネレーター

HEX、RGB、HSLフォーマットでランダムな色を生成。パレットムードでフィルタリング — 暖色、寒色、パステル、ダーク、ネオン。

色ジェネレーター
// HEX、RGB、HSL のランダムカラー
HEX RGB HSL
生成をクリック
このツールについて

ランダム色ジェネレーターとは?

当ランダム色ジェネレーターは、最も広く使用されている3つのフォーマットで色を生成します:HEX(HTML/CSSで使用)、RGB(デザインツールとCSSで使用)、HSL(人間が読みやすい色相/彩度/明度)。新しい色を生成せずにフォーマットを即座に切り替えられます。

パレットフィルターは特定のムード範囲に生成を制約します:暖色は赤、オレンジ、黄色を生成。寒色は青とティールを生成。パステルは明るくソフトなトーンを生成。ダークはほぼ黒と深いシェードを生成。ネオンはデジタルインターフェースに最適な高彩度のビビッドカラーを生成します。

生成された各色はライブプレビュー矩形として表示され、コピー前に確認できます。コピーボタンは常に現在選択されているフォーマットで出力します。

🎨
デザイン&UI
ウェブ・アプリインターフェースの背景色、アクセントカラー、ボーダートーンを素早くサンプリング。
🖼️
アート&イラスト
意識的には選ばなかった色を使って創造的なブロックを打破。
💻
フロントエンド開発
プロトタイピング、プレースホルダー、カラーコントラストテスト用のCSSカラー値を素早く取得。
📊
データビジュアライゼーション
チャートシリーズ、マップカテゴリ、グラフノードグループ用の識別可能な色を生成。
使い方

数秒で始められます

// 登録不要、インストール不要 — 設定して生成するだけ。

01
パレットを選択
完全ランダムな色には「すべての色」を、ムードでフィルタリングするには暖色、寒色、パステル、ダーク、ネオンを選択して有用な範囲内に限定します。
02
フォーマットを選択
出力ボックス上のHEX、RGB、HSLをクリックして希望のカラーフォーマットを選択します。再生成せずにフォーマットを切り替えられます。
03
生成
「色を生成」をクリックまたはEnterを押します。プレビュー矩形が即座に更新され、コピー前に色を確認できます。
04
コピーして使用
「コピー」をクリックして選択したフォーマットでカラー値を取得。CSS、Figma、Photoshop、その他のデザインツールに直接貼り付けてください。
よくある質問

よくある質問

HEXはHTMLとCSSで使用される6桁の16進数コードです(例:#FF6B35)。RGBは赤、緑、青のチャネル(0-255)を指定します。HSLは色相(0-360)、彩度(%)、明度(%)を表し、デザイナーにとってより直感的です。
はい — HEX、RGB、HSLをクリックすると、新しい色を生成せずに現在表示されている色の出力フォーマットが切り替わります。
各パレットはRGBチャネルの範囲を制約してそのムードの色を生成します。暖色は赤/黄色チャネルをブースト、寒色は青をブースト、パステルはすべてのチャネルを高く設定、ダークはすべてのチャネルを低く設定、ネオンは高彩度のチャネルスパイクを生成します。
現在、ツールは1クリックで1色を生成します。複数回クリックして値を記録し、マルチカラーパレットを構築してください。
HEXとRGBの両方がCSSで完璧に動作します。HSLも有効なCSSであり、色相コンポーネントだけをシフトできるため、色操作に好まれることが多いです。