ランダムカラー生成ツール
24ビットのsRGB範囲からランダムなHEXカラーコードをまとめて生成します。必要な色見本の数を選び、各色をすぐに確認して、CSS、デザインメモ、QA用データ、配色の試作にコピーできます。
ランダムなHEXカラーを生成する方法
-
1
数を選ぶ
確認したい色見本の数に合わせて、1〜50の任意の数を入力します。
-
2
色見本を生成する
各結果は#RRGGBB形式の6桁HEXコードで、赤、緑、青のチャンネル値を表します。
-
3
コピーして確認する
気に入った色を保存し、文字と組み合わせる前にコントラストを確認します。RGBやHSLへの変換は必要な場合だけ行います。
このツールが生成するもの
各コードは24ビットのsRGBカラーを表します。赤に8ビット、緑に8ビット、青に8ビットを使うため、#000000から#FFFFFFまで16,777,216通りのHEX値があります。このツールは色見本とコードを表示しますが、色名の判定、評価、読みやすさの保証は行いません。
HEXカラーの読み方
| 部分 | 意味 | 範囲 |
|---|---|---|
# |
CSSカラーの印 | 固定の接頭辞 |
RR |
赤チャンネル | 00からFF |
GG |
緑チャンネル | 00からFF |
BB |
青チャンネル | 00からFF |
便利な使い道
- 最終色が決まっていない段階で、UI状態、グラフのアクセント、仮のビジュアルを試す。
- 最初の配色候補を作り、似すぎている色、暗すぎる色、強すぎる色をあとから外す。
- CSS、SVG、canvas、デザインシステムのサンプル用にテストデータを作る。
ランダムカラーを本番で使う前に
ランダムカラーは出発点にすぎません。テキスト、ボタン、操作部品に使う場合は、前景色または背景色とのコントラストを確認してください。WCAG AAでは、通常テキストに4.5:1、大きなテキストに3:1のコントラスト比が求められます。ブランド用途や印刷では、キャリブレーション済みの画面で確認し、印刷向けには別途変換してください。
よくある質問
ランダムなHEXはすべてのチャンネル値を対象にするため、完成度の高い配色のように見えない結果も多く出ます。多めに生成し、用途に合うコントラストと彩度の色見本だけを残してください。
このツールは独立したランダムカラーを生成します。統一感のあるパレットが必要な場合は、パレット生成ツールを使うか、同じ色相の中で明るい色と暗い色を手動で選んでください。
このツールにはシード指定はありません。残しておきたいHEXコードはコピーして、あとで再利用できるようにしてください。
はい。6桁の#RRGGBB HEX値はCSS標準の色指定で、color、background-color、border、gradient、SVGのfillなどに使えます。
コントラスト確認なしでは信頼できません。特に小さな文字や細いフォントの背景では、ランダムな色見本がWCAGのコントラスト要件を満たさないことがあります。
関連ツール
バイナリからASCIIへの変換ツール
バイナリ（スペース区切りのバイト、または長いビット列）を貼り付けると、それが表すASCIIテキストを取得できます。7ビットと8ビットのエンコードに対応。
Base64 → Hex 変換ツール
Base64文字列を、その背後にあるバイトの16進表現へ変換します。トークン、鍵、証明書、JWTの確認に便利です。
BinaryからHexへのコンバーター
バイナリ入力を大文字の16進数値に変換します。0と1以外は無視され、先頭の0は保持されません。
BBCodeからHTMLへのコンバーター
BBCode（掲示板マークアップ）をきれいなHTMLへ変換します。装飾タグ、リスト、引用、コード、画像、リンク、表に対応。
2進数から10進数へ変換
2進数を瞬時に10進数へ変換します。各ビットがどのように寄与するかが分かる位取り展開を表示します。
2進数から8進数への変換ツール
2進数を3ビットずつまとめて8進数に変換します。Unixのパーミッション、レガシーシステム、コンパクトな数値表示に便利です。