カラーツール

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

ワンクリックで美しい配色を生成し、10 種類の color matching mode に対応します。 気に入った色をロックし、複数形式へエクスポートできます。配色設計をより手軽に進められます。

カラーパターン
カラーチケット数
送金
空白 配色をすばやく再生成
カラーチケット Palette
ランダム · 3色
広告
Google AdSense 広告ブロック

Random Color Generator とは何ですか?

Random Color Generator デザイナー、フロントエンド開発者、コンテンツ制作者向けに作られた無料のオンラインツールです。ランダムカラーや調和の取れた配色を素早く生成でき、最大 10 種類の配色モードと、複数の一般的な形式へのエクスポートに対応します。

Random Color Generator の使い方は?

使い方は簡単です。まず左側から必要な項目を選びます。カラーパターン(Pastel、Vibrant、Neon など)を選択して設定カラーチケット数(1、3、5、8、10 colors)を選び、Generate Colors button を click するか 空白 キーを押すだけで配色をランダム生成できます。気に入った色が見つかったら、そのカラーカード右上のロックアイコンをクリックして固定できます。次に再生成してもロックした色は保持されます。

配色モードの紹介

形式の説明

各カラーチップは3種類の色形式で利用できます:HEX(#A855F7 などの16進カラーコード)、RGB(red、green、blue value。例:rgb(168, 85, 247))と HSL(hue/saturation/lightness。例:hsl(277, 91%, 65%))。任意の形式の color value をワンクリックでコピーでき、color chip 全体を PNG、SVG、JSON、CSS Variables として export することもできます。

よくある質問(FAQ)

色をロックするには?
各カラーカードの右上に鍵アイコンがあります。クリックするとその色が固定され、アイコンが紫色に変わります。固定後にカラーパレットを再生成しても、ロックした色は維持され、ロックしていない色だけがランダムに生成されます。
the difference between color matching modes とは何ですか?
各モードは Hue、Saturation、Lightness の範囲を変えて色を生成します。たとえば Pastel は高輝度・低彩度、Vibrant は中程度の輝度・高彩度、Dark は低輝度を使用します。これにより、プロジェクトの雰囲気に合うカラーパレットを素早く探せます。
カラーチケットを送る方法は?
左側の該当ボタンをクリックするだけでカラーブロックをエクスポートできます。PNG と SVG は画像ファイル、JSON はすべてのカラー値を含む JSON ファイル、CSS Variables は CSS ファイルとして保存します。Copy Swatch ボタンを使えば、すべてのカラー値をクリップボードへコピーすることもできます。
CSS Variables とは何ですか?
CSS Variables(CSS custom properties)は、CSS 内で再利用可能な値を定義する仕組みです。生成形式は次のとおりです --color-1: #A855F7;、そのまま CSS file へ copy して color scheme を管理できます。
このツールはオフラインで使用できますか?
はい。すべての色生成と計算はブラウザー内で行われ、最初にページのリソースを読み込むとき以外はインターネット接続を必要としません。ページを読み込んだ後は、完全なオフライン環境でも全機能を利用できます。
このツールは配色設定を保存しますか?
いいえ。色はすべてブラウザメモリ内だけに存在し、ページを更新するとリセットされます。パレットを保存したい場合は、エクスポート機能で JSON または CSS ファイルをダウンロードしてください。

ブラウザー互換性

このツールは標準 Web API(HTML5、CSS3、Canvas、ES6+)を使用し、すべての主要な現代ブラウザに対応します。

🌐
Chrome
最新バージョン
🦊
Firefox
最新バージョン
🍏
Safari
最新バージョン
🔷
Edge
最新バージョン

プライバシーステートメント

このツールはすべてブラウザ内で実行されます。生成した色がサーバーへ送信されることはありません。このツールでは Cookie やトラッキングを使用しません。