ランダムカラー生成 - 無料オンラインツール

機能

6〜12 色を生成

HEX・RGB・HSL 値

クリックでコピー

気に入った色をロック

使い方

1. スペースキー（または生成）でステージにランダムカラーが並びます。

2. 気に入った色はロックしましょう — ロックしたタイルは次の生成でも残ります。タイルをクリックすると値をコピーできます。

3. 上部バーで値の形式（HEX / RGB / HSL / OKLCH）を切り替えたり、セット全体を一括コピーできます。

このツールについて

色の方向性を決める一番の近道は、偶然に提案してもらうことだったりします。このジェネレーターは、ブラウザーの暗号学的に安全な乱数生成器で 3～12 個のランダムな色をステージに並べ、それぞれを HEX、RGB、HSL、OKLCH のいずれかとおおよその色名で表示します。スペースキーか「生成」でもう一度抽選し、気に入ったタイルを固定すれば次の抽選でも残るので、少しずつ組み合わせを作れます。タイルをクリックすると値をコピーでき、全色をまとめてコピーすることもできます。ランダムな色はアイデア探し、テストデータ、アバターの背景、グラフの仮の色に最適ですが、ブランドや UI の配色に使うなら、調和を整えて文字のコントラストを確認してからにしてください。

よくある質問

ランダムな色はどのように作られますか？

値はブラウザーの安全な乱数源 crypto.getRandomValues から得ているので、1670万通りの 24 ビット RGB カラーのどれもが同じ確率で選ばれ、予測できるパターンで繰り返すこともありません。

色の固定はどう機能しますか？

タイルを固定すると、もう一度生成してもその色は変わらず、固定していないタイルだけが新しいランダムな色になります。気に入った色を残して、残りを引き直し続けられます。

どの形式の値をコピーすればよいですか？

HEX はデザインツールや CSS で最も広く使えます。HSL は手で調整しやすく、OKLCH は現代の CSS で複数の色の明るさをそろえて調整したいときに便利です。

ランダムな色でアクセシブルな配色は作れますか？

それだけでは作れません。ランダムな組み合わせはコントラストが低いことがよくあります。出発点として使い、文字色と背景色の組み合わせはコントラストチェッカーで WCAG AA を満たすか確認してください。

もっと落ち着いた色や鮮やかな色を出すには？

ここではすべての RGB 値が同じ確率で出るので、くすんだ色から鮮やかな色まで幅広く出ます。気に入った色をカラー変換ツールにコピーして彩度を下げれば落ち着いた色に、上げれば鮮やかな色になります。配色ジェネレーターでその色から調和のとれたセットを作ることもできます。

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

機能

使い方

このツールについて

よくある質問

関連ツール