ランダムカラー生成ツール
ランダムな色をHEX・RGB・HSL形式で生成します。鍵アイコンでお気に入りの色をロックできます。
#232829
rgb(35, 40, 41)
hsl(190, 8%, 15%)
#BCCA39
rgb(188, 202, 57)
hsl(66, 58%, 51%)
#6010D7
rgb(96, 16, 215)
hsl(264, 86%, 45%)
#9C72B1
rgb(156, 114, 177)
hsl(280, 29%, 57%)
#5C2EAC
rgb(92, 46, 172)
hsl(262, 58%, 43%)
#8B85D0
rgb(139, 133, 208)
hsl(245, 44%, 67%)
ランダムカラー生成ツールの使い方
「新しい色を生成」ボタンをクリックすると、6色のランダムカラーが表示されます。
鍵アイコン（🔓）をクリックするとその色をロックでき、次回生成時もその色が保持されます。
各色のHEX・RGB・HSL値をコピーボタンでクリップボードにコピーできます。
すべての処理はブラウザ内で完結するため、データが外部に送信されることはありません。
デザイン調整で見るべき点
- •生成したCSSや色は、ライト/ダークモード、モバイル、ブラウザ差で見え方が変わります。
- •色やコントラストは見た目だけでなく、読みやすさとアクセシビリティを基準に確認してください。
- •装飾値はそのまま採用するより、既存デザインシステムの余白・角丸・影に合わせて調整すると破綻しにくくなります。
関連ツール
🎨🖥️🌈🌈🖼️🖌️🔤📱🔖👁️📐🎬
カラーコード変換
HEX・RGB・HSLのカラーコードを相互変換。プレビュー付きで色を確認。
アスペクト比計算
画面の幅と高さからアスペクト比を計算。動画・画像サイズに。
HTMLカラー名一覧
CSS/HTMLカラー名とコードを検索。127色対応。
CSSグラデーション生成
グラデーションCSSコードを視覚的に生成。
CSSボックスシャドウ生成
box-shadowをスライダーで視覚的に生成。
カラーパレット生成
ベースカラーから配色パレットを自動生成。
フォントプレビュー
テキストを様々なフォントで比較プレビュー。
OGP画像サイズ一覧
SNS別のOGP推奨画像サイズを一覧表示。
ファビコンプレビュー
テキストや絵文字からファビコンをプレビュー。
コントラスト比チェック
WCAG基準で色のアクセシビリティを確認。
ピクセル⇔cm変換
DPI指定でpx/cm/mm/inchを相互変換。
CSSアニメーション生成
CSSアニメーションを視覚的に生成。