その他

配色パレット生成

配色パレット生成ツールは、ベースカラーを1色選ぶだけで、補色・類似色・トライアドなどの配色パターンを自動生成する無料の配色ジェネレーターです。カラーパレットの作成に必要な配色理論をツールが計算し、Webデザイン・資料作成・イラスト・ブランディングなどで使える美しい色の組み合わせをすぐに見つけられます。

ベースカラー

配色タイプ

現在の配色を URL で共有・保存できます。

生成されたパレット

L 0.27
#1E90FF
L 0.40
#FF8D1E

エクスポート

:root {
  --color-1: #1E90FF;
  --color-2: #FF8D1E;
}

配色の生成はすべてお使いのブラウザ内で行われ、入力した色が外部サーバーに送信されることはありません。

QRコード生成

URL・Wi-Fi・メール・SMS・電話番号・連絡先・地図（位置情報）・カレンダー予定・テキストを QR コード画像に無料で作成できるジェネレーター。サイズ・形式・色・ロゴの指定に対応し、追跡なしで何度でも生成可能。データは外部送信せずブラウザだけで完結します。

くじ引き・抽選

名前のリストや数値の範囲からランダムに 1〜N 件を選べる無料のくじ引き・抽選ツール。重複なしの抽選やリール演出、抽選履歴の保存に対応し、順番決めや当選者選びを公平に行えます。登録不要、ブラウザだけで完結します。

ポモドーロタイマー

25 分の集中と 5 分の休憩を繰り返す、無料で使えるオンラインのポモドーロタイマー。勉強・仕事の集中タイマーとして、円形プログレス・アラーム音・全画面・常時最前面のポップアウト表示に対応。ブラウザだけで完結します。

カラーピッカー

画像から色をスポイトで抽出し、カラーコードを取得できるツール。ルーペで拡大しながらピクセル単位で色を調べられ、HEX / RGB / HSL 切替やパレットのエクスポートに対応。無料・登録不要で、ブラウザだけで完結します。

カラーコード変換

HEX・RGB・HSL・HSV・OKLCH のカラーコードを相互変換できる無料ツール。透明度付きの RGBA・8桁 HEX・HSLA にも対応し、入力した色を全フォーマットへ一括変換してワンクリックでコピーできます。CMYK の参考値も表示。ブラウザだけで完結します。

コントラストチェッカー

前景色（文字色）と背景色のコントラスト比をリアルタイムに算出する無料のコントラストチェッカー。WCAG 2.1 / 2.2 の AA・AAA 基準への合否判定に加え、合格色の自動提案・色覚特性シミュレーション・APCA にも対応。配色のアクセシビリティをブラウザだけで確認できます。

配色パレット生成ツールとは？

ベースカラーは #1E90FF のような HEX のほか、rgb(30, 144, 255) や hsl(210, 100%, 56%) でも入力でき、ネイティブのカラーピッカーから選んだり、「ランダム」ボタンで配色のアイデアを探したりもできます。配色タイプは、補色（コンプリメンタリー）・類似色（アナロガス）・トライアド・テトラード・スプリットコンプリメンタリ・モノクロマティック・シェード＆ティントの7種類に対応。モノクロマティックや類似色などでは生成する色数（3〜10色）も調整できます。

生成したパレットは、各色の HEX をワンクリックでコピーできるほか、CSS変数（:root { --color-1 }）・Tailwind の theme.extend.colors・SCSS 変数・JSON の各形式でまとめてエクスポートできます。コーディングにそのまま貼り付けられるので、配色の決定から実装までをスムーズにつなげられます。各スウォッチには黒文字・白文字のどちらが読みやすいか（コントラストの目安）も表示し、UI 設計での文字色の判断に役立ちます。

配色の計算はすべてお使いのブラウザ内で行われ、入力した色が外部サーバーへ送信されることはありません。アカウント登録や広告クリックなしで、すぐに使えます。

使い方

ベースカラーを入力欄に入力するか（HEX・RGB・HSL に対応）、カラーピッカーで色を選びます。アイデアが欲しいときは「ランダム」ボタンも使えます。
配色タイプ（補色・類似色・トライアド・テトラード・スプリットコンプリメンタリ・モノクロマティック・シェード＆ティント）を選びます。
モノクロマティックや類似色など色数を調整できるタイプでは、スライダーで生成する色数（3〜10色）を設定します。
生成されたパレットを確認し、各色の HEX 値はカードのコピーボタンでコピーします。
「エクスポート」で CSS変数・Tailwind・SCSS・JSON のタブを切り替え、「コピー」ボタンでコード全体をコピーして実装に貼り付けます。
「URL をコピー」を押すと、現在の配色を再現できる共有 URL が得られます。チーム共有やブックマークに利用できます。

利用シーン

ベースカラーから配色を決めたい Web デザイナー・コーダーが、補色や類似色のパレットをすばやく作成する。
CSS変数や Tailwind の設定として、配色をそのままコードに落とし込みたいフロントエンドエンジニア。
プレゼン資料やスライドの配色を、トライアド・テトラードなどの配色パターンで整えたいビジネスパーソン。
ブランドカラーを起点に、モノクロマティックやシェード＆ティントでトーンの異なるバリエーションを展開したいデザイナー。
イラストや作品づくりで、まとまりのある色の組み合わせのインスピレーションが欲しいクリエイター。
決めた配色を共有 URL でチームに渡したり、後から同じパレットを再現したりしたい方。

注意点

配色の生成はすべてブラウザ内で行われ、入力した色が外部に送信されることはありません。
ベースカラーは HEX・RGB・HSL の各形式で入力できます。透明度（アルファ）には対応していません。
補色・トライアド・テトラード・スプリットコンプリメンタリは配色理論で色数が決まるため、色数スライダーは表示されません。モノクロマティック・類似色・シェード＆ティントでは色数を調整できます。
配色は HSL 色空間で色相を回転させて計算しています。彩度が極端に低い色（グレーに近い色）をベースにすると、色相の違いが分かりにくくなることがあります。
共有 URL にはベースカラー・配色タイプ・色数のみが含まれます。URL を開くと同じ設定でパレットが再現されます。

よくある質問

入力した色はサーバーに送信されますか？

送信されません。配色の生成はすべてお使いのブラウザ内で完結します。ブランドカラーや業務で扱う色でも安心してご利用いただけます。

補色・類似色・トライアドの違いは何ですか？

補色は色相環で正反対（180度）にある色の組み合わせでメリハリが出ます。類似色は隣り合う色相（±30度程度）でまとまりのある配色になります。トライアドは色相環を3等分（120度ずつ）した3色で、バランスよく華やかな印象になります。本ツールではこれらをベースカラーから自動計算します。

CSS変数や Tailwind 用に書き出せますか？

できます。エクスポートのタブで CSS変数（:root の --color-1 形式）・Tailwind の theme.extend.colors・SCSS 変数・JSON を切り替えられ、「コピー」ボタンでコード全体をコピーしてそのまま実装に貼り付けられます。

生成する色数は変えられますか？

モノクロマティック・類似色・シェード＆ティントでは、スライダーで3〜10色の範囲で色数を調整できます。補色・トライアド・テトラード・スプリットコンプリメンタリは配色理論で色数が決まるため固定です。

作った配色を共有・保存できますか？

「URL をコピー」を押すと、ベースカラー・配色タイプ・色数を含む共有 URL が得られます。その URL を開くと同じパレットが再現されるため、チームへの共有やブックマークに便利です。

各色のコントラスト（文字の読みやすさ）も分かりますか？

各スウォッチには、その色の上で黒文字と白文字のどちらが読みやすいかの目安（相対輝度に基づく判定）を表示します。背景色に対する文字色を決めるときの参考になります。より厳密な適合判定が必要な場合は、コントラストチェッカーもあわせてご利用ください。