カラーパレット
オンラインで色を調整しつつ、HEX・RGB・HSL のいずれかを入力すると他の色コード形式へ即時同期されます。
ヒント：#RGB / #RRGGBB、rgb(...)、hsl(...) 形式を貼り付けできます。
オンラインカラーピッカー
カラーピッカーや RGB スライダーを動かすと色コードが即時同期されます- オンラインカラーピッカーで色を選ぶか、RGB スライダーで微調整します。
- または HEX / RGB / HSL のいずれかの欄に色コードを直接貼り付けます。
- どれか 1 つを変更すると、他の形式もリアルタイムで同期変換されます。
- 「HEX をコピー」「RGB をコピー」「HSL をコピー」でコードをクリップボードへコピーできます。
ヒント：#RGB、#RRGGBB、rgb(...)、hsl(...) など一般的な入力形式に対応しています。「ランダムカラー」で発想を広げることもできます。
どんなときに使う？
- デザイン引き継ぎ、フロントエンド実装、ブランドカラー整理で HEX・RGB・HSL を素早く行き来したいとき。
- 色を微調整したいが、どの表現形式で触るのが一番わかりやすいか迷うとき。
- 色コードをそのまま CSS、デザインツール、資料へ貼り付けたいとき。
HEX、RGB、HSL の違いは何ですか？
HEX はデザイン受け渡しやコードで使いやすく、RGB は赤緑青の値が直接わかり、HSL は色相・彩度・明度で考えやすい形式です。表現は違っても、同じ色を指せます。
色の調整にはどの形式を使うのがよいですか？
コードへ貼るなら HEX、各チャンネルを直接触るなら RGB、明るさや色味を系統的に調整したいなら HSL が便利です。実務では複数形式を行き来することも多いです。
入力途中で形式エラーが出るのはなぜですか？
ツールが現在の入力を完全な色コードとして解釈できるかを即時確認しているためです。まだ入力途中なら、最後まで入れると正常に同期されることが多いです。
ランダムカラー機能は何に役立ちますか？
発想を広げたいとき、素早く試色したいとき、いつも同じ色域に偏るのを避けたいときに便利です。近い色を見つけたら、他の入力欄で細かく詰めると効率的です。
このツールで色のコントラストやアクセシビリティも確認できますか？
このページは選色と形式変換が中心です。文字と背景の読みやすさを確認したい場合は、サイト内の contrast-checker を併用してください。
SNS投稿の画像編集フロー：サイズ設計・ビジュアル統一・書き出し設定
SNS用クリエイティブの品質は、アイデアだけでなく制作フローで決まります。サイズ、構図、ブランド統一、書き出し設定まで、再現性のある画像編集手順を解説します。
カラーコード完全ガイド：RGB・HEX・HSL の変換原理とデザイン活用
RGB・HEX・HSL はすべて同じ色を表しますが、まったく異なる方法で記述します。本記事では各色モデルの設計思想・変換の数学・使い分けの基準から、WCAG アクセシビリティ対応まで徹底解説します。