メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
カラー
/
ランダムHEXカラー
◉
ランダムHEXカラー
color/random-hex-color
Generateボタンでcrypto.getRandomValuesの3バイトから1件の#RRGGBBカラーを生成する。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
ランダムHEXカラーでは、Generateボタンでcrypto.getRandomValuesの3バイトから1件の#RRGGBBカラーを生成する。
関連する観点として random、HEX、ランダムHEXカラー を確認し、結果をコピーして別の作業に使えます。
生成
結果
コピー
使い方
単一のHEX値が欲しいタイミングでGenerateを実行します。
結果欄に # 付き6桁HEXが1件だけ表示されることを確認します。
別の色が必要なら再度Generateを押して値を更新します。
Copy ボタンで、CSSやデザインツールに貼るHEXをコピーします。
入力例・出力例
INPUT
Generate
OUTPUT
#RRGGBB形式のHEXカラー1件
nodeで形式検算済み。crypto乱数のため具体値は毎回変わります。
よくある利用シーン
テスト用のHEXカラーを1件だけ素早く作りたいとき。
複数候補ではなく、フォームや設定欄へ貼る単一の色値が必要なとき。
Math.random版のrandom-colorと、crypto.getRandomValues版の出力形式を切り分けたいとき。
結果確認のポイント
色空間、透明度、コントラスト、コピーしたコード形式が用途に合うか確認してください。
random、HEX、ランダムHEXカラーの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
画面やOSの色管理により見え方が変わるため、最終判断は実機でも確認してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
ランダムHEXカラーの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
Generateを押すと何件の色が作られますか?
1回のクリックで `#RRGGBB` 形式のHEXカラーを1件だけ生成します。10色の候補リストは作らず、結果欄の値は次にGenerateを押したときに新しい1件で置き換わります。
乱数はどのAPIで作っていますか?
ブラウザの `crypto.getRandomValues` で3バイトを作り、それぞれを2桁16進数にして連結します。色の見た目やコントラストは評価せず、ランダムなRGB値をHEX表記にするだけです。
このツールでコントラスト確認もできますか?
できません。random-hex-colorは色を1件生成するだけで、背景色との組み合わせやWCAG比率は計算しません。生成後のHEXを別のコントラスト確認ツールへ渡して判定します。
関連ツール
カラーシェード生成
指定色の明暗バリエーション(10段階)を自動生成。
アクセシブルカラー生成
前景色・背景色をHEXで指定するとWCAG 2.1のコントラスト比を自動計算。通常テキスト(AA 4.5:1/AAA 7:1)と大きい文字(AA 3:1/AAA 4.5:1)それぞれの合否をバッジで表示し、プレビュー文で実際の見え方も確認できます。
ANSIカラー一覧
ANSIエスケープシーケンスの文字色コード(標準8色 SGR 30〜37、高輝度8色 90〜97)と背景色コード(40〜47、100〜107)を色名・番号・エスケープシーケンスの対応表で確認できるツール。ターミナル配色の把握やシェルスクリプトの色指定に。
ブランドカラー一覧
主要ブランド名と代表的なHEXカラー値を2列の固定表で確認できる。
CMYK→HEX変換
CMYKカラー値をHEXに変換する。
コントラスト比早見表
WCAGでよく使う1:1、3:1、4.5:1、7:1、21:1の意味を固定表で確認できる。
WCAG AA 白背景
入力HEX色を白背景と比較し、通常テキストと大テキストのWCAG AA到達可否を表示する。
HEX #追加
改行区切りの各行について、#が無いHEX表記の先頭に#を付ける単純変換。