どのような色を生成できますか？
4つのランダムな色を生成し、それぞれのプレビューとHEX・RGB・HSL値を表示します。値は個別にコピーできます。
生成ツール
ランダムカラー生成 🎨
ランダムな4色をまとめて生成し、HEX・RGB・HSLの値をコピー。Webサイトやデザインの配色探しに便利です。
1回で4色生成HEX・RGB・HSLに対応カラーコードをコピー
ランダムな色を生成
4つのカラーを表示。HEX・RGB・HSLを個別にコピーできます。
カラー1
HEX
#000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
カラー2
HEX
#000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
カラー3
HEX
#000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
カラー4
HEX
#000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
ランダムカラー生成でできること
ランダムな色を生成し、HEX・RGB・HSLで表示します。Web制作、CSS、モックアップ、ブランドの配色検討などに役立ちます。
HEX・RGB・HSLとは？
HEXはWebやCSSでよく使われる16進数表記です。RGBは赤・緑・青の値、HSLは色相・彩度・明度で色を表します。
手軽に配色のヒントを探す
新しい色の組み合わせを試したいときや仮の配色が必要なときに、何度でも生成してアイデアを広げられます。
ランダムカラーのよくある質問
新しい配色を作るには？
「色を生成」を押すと4色をまとめて入れ替えます。気に入る組み合わせが見つかるまで何度でも試せます。
HEXカラーコードとは？
「#」の後に6桁の16進数を続けて色を表す方法です。例：#1A73E8。CSSやWeb制作でよく使われます。
RGBとHSLの違いは？
RGBは赤・緑・青の値で、HSLは色相・彩度・明度で色を表します。
カラーコードを個別にコピーできますか？
はい。各色のHEX・RGB・HSLを、それぞれのコピーボタンからコピーできます。
商用デザインにも使えますか？
色の数値は商用の制作にも利用できます。実際に使う際は文字とのコントラストやアクセシビリティも確認してください。
