🎨 カラーピッカー
AIカラーセラピー診断プロンプト
色を保存してから「診断文を生成・コピー」を押してください。
🖼 画像から色を取得
ここに色が表示されます
あなたはどの色が好き？
色味の差を計算して色を作りますが、白・黒・グレーの無彩色はゼロのため色味の差がなく反映されていないように見えます。
サイトプレビュー
サイトのタイトル
これはプレビューテキストです。ベース・メイン・アクセント・テキスト色を自由に変更して配色を確認できます。
世界観カラーパレット
カラーお題
表示される色はモニター環境によって若干異なることがあります。
関連ツール
インストールなしで、
今すぐお絵描きが始まる
ブラウザを開くだけで使える無料のペイントツール。レイヤーやペン6種、図形・テキスト挿入まで、わりと多機能です。
「このPCでもお絵描きできたら便利なのに」から生まれた、ダウンロード不要のブラウザお絵描きツール。
レイヤー機能、合成モード、図形描画、テキスト挿入など「あったら嬉しい」機能を一通り搭載。マウスはもちろんタッチ操作にも対応しているので、ノートPCやタブレットでもそのまま描けます。描いた内容はサーバーに送信されないので、プライバシーも安心です。作業中はこまめな保存をおすすめします。
- レイヤー機能・透明pixelロック・参照レイヤーで作業がしやすい
- ペン6種を個別設定でき、好みの描き味に調整可能
- マウス・タッチどちらも対応。PNG／JPEGで保存可能
- 描いた内容はサーバーへ送信されず、ブラウザ内で完結
ご案内
色のことならお任せカラースタジオツールです。
①カラーピッカー②画像から色を取得③配色提案
この3つの機能を1ページ内で順番に使用でき、選んだ色はそのまま配色提案やサイトプレビューにも反映されます。
保存した色は端末（ブラウザ）内に記録され、次回アクセス時も引き続きご利用いただけます。
使い方
- カラーピッカー：
色見本をクリック、またはHEX/RGB値を直接入力して色を選択します。
- 画像から色を取得：
お手持ちの画像をアップロードし、好きな部分をクリックすると色が抽出されます。
画像サイズに合わせて表示の仕方が変わるので、確認しやすくなっています。
- 配色提案：
選んだ色をもとに、補色・類似色・トライアドなど複数パターンの配色候補が自動生成されます。気に入った配色は「プレビューへ」ボタンでサイトプレビューに反映できます。
- 保存したい色は「色を保存」ボタンでキープし、後からまとめて見返せます。
- 保存色がたまったら「診断文を生成・コピー」でAIカラーセラピー診断用のプロンプトをコピーし、お好きなAIチャットに貼り付けてお楽しみください。
注意点
- 保存した色データはお使いのブラウザ内にのみ記録されるため、ブラウザやキャッシュを変更・削除すると保存内容は消去されます。
沢山保存は可能ですが、数が増えるぶん、次にアクセスするとき呼び込みに時間がかかる可能性があります。
- 「AIカラーセラピー診断」はプロンプトをコピーする機能であり、診断結果そのものは外部のAIチャットサービス側の判定によるものです（当ツール自体が診断を行うものではありません）。
- 画像アップロード機能で読み込んだ画像は外部サーバーに送信されず、お使いの端末内でのみ処理されます。
豆知識
このツールで使用している言葉を一部抜粋してまとめました。
どれも知っておくと便利な知識です。
HEX・RGB・HSLってなに？
HEX・RGB・HSLはどれも「同じ色を表す書き方の違い」なので、
好きな形式で色を作って問題ありません。
- HEX（ヘックス）
#5BC0EBのような「#+英数字6桁」の色の書き方です。
Webサイトの色指定で一番よく使われる形式で、多くのツールでそのままコピペして使えます。
- RGB
赤（Red）・緑（Green）・青（Blue）の光をそれぞれ0〜255の数値で混ぜて色を作る方式です。
数値が大きいほどその色が強く出ます。
- HSL
色相（H：何色か）・彩度（S：色の鮮やかさ）・明度（L：明るさ）の3つで色を表す方式です。
「もう少し明るくしたい」「もう少し彩度を落としたい」のように、色を微調整したいときに直感的で扱いやすい形式。
ベースカラー・枠線カラー・アクセントカラー・テキストカラーの考え方
- ベースカラー
サイトの背景など、一番広い面積を占める色です。全体の印象を決める土台になります。
- 枠線カラー
要素の輪郭や区切り線に使う色です。ベースカラーと近すぎず、うるさすぎない色を選ぶと自然にまとまります。
- アクセントカラー
ボタンやリンクなど、目立たせたい部分に使う色です。ベースカラーとはっきり差をつけることで、ユーザーの目を引きつけます。
- テキストカラー
文字の色です。背景（ベースカラー）としっかりコントラストをつけないと読みにくくなるため、可読性を最優先で選びます。
補色・反対色・類似色・トライアド・トーンの考え方
- 補色
色相環（色を環状に並べたもの）で正反対の位置にある色同士です。
組み合わせるとお互いを引き立て合い、メリハリのある配色になります。
- 反対色
補色とほぼ同じ意味で使われる言葉で、色相環の反対側にある色を指します。
- 類似色
色相環で隣り合う、似た系統の色同士です。まとまりが出やすく、落ち着いた印象の配色になります。
- トライアド
色相環を三等分した位置にある3色の組み合わせです。
バランスが良く、それでいて変化のある配色を作れます。
- トーン
同じ色相のまま、明るさや鮮やかさ（明度・彩度）を揃えた色のグループです。トーンを統一すると、色数が多くてもまとまりのある配色になります。
【宣伝】
現在ツール作りにはまっています。
「こんな機能欲しい」「これ不便だな」など気軽にコメントで教えてください。
実装できそう＆時間と興味が合えば作っちゃいます＾＾
動画作成、サイト作成に関する内容をまとめました。
- サイト読込スピード対策PNG・JPEG画像WebP一括変換フリーソフト
- コピペサイト素材｜HTML/CSS/JSコード｜原文ありで直感編集カスタマイズ可
- カラーピッカー│画像から色抽出│配色提案│サイトやイラストの色悩みに
