カラーピッカー
色を選んで、複数の形式で即座に値を取得。
色を扱うときのコツ
HEX・RGB・HSLの違い
HEXはWebデザイン（CSS、HTML）で最も一般的。RGBはデジタル画面の標準。HSLは色相・彩度・明度を直感的に調整できます。
印刷にはCMYK
印刷物を作るならCMYK値を確認しましょう。画面の色（RGB）と印刷結果は必ずしも一致しません。CMYKなら印刷に近い色が分かります。
アクセシビリティとコントラスト
テキストと背景色に十分なコントラストを確保しましょう。WCAGでは本文に4.5:1以上、大きな文字に3:1以上の比率を推奨しています。
カラーパレットの作り方
HSLスライダーで調和のとれた配色を作れます。色相を固定して彩度・明度を変えるか、色相を30°ずらすと類似色になります。
よくある使い方
ブランドカラーを選び、CSS用のHEXやRGB値をコピー。デザイン全体の一貫性を保てます。
参考画像から正確な色を特定し、印刷用CMYK・画面用RGBに変換。
スライドや報告書、マーケティング資料で会社のブランドカラーを正確に再現。
投稿やストーリーで正確な色を使い回し、統一感のあるビジュアルに。
壁の塗装や家具の色を購入前に確認。HEX値と塗料ブランドのカタログを比較できます。
リアルタイム変換を試して、HEX・RGB・HSL・CMYKの関係を体験的に理解。
よくある質問
HEX、RGB、HSLの違いは何ですか？
HEX is a compact six-character code used in web development (e.g. #2563EB). RGB defines colors by their red, green, and blue components (0–255 each). HSL describes color by hue (0–360°), saturation (0–100%), and lightness (0–100%), making it easier to adjust colors intuitively.
CMYKとRGBはどう使い分けますか？
印刷物（パンフレット、名刺、ポスター）にはCMYK。画面表示（Web、アプリ、動画）にはRGBを使います。色味がずれることがあるため、印刷前にCMYK出力を確認しましょう。
カラーコードを直接入力できますか？
はい。HEX欄にコードを入力・貼り付けるか、RGB・HSL・CMYKの値を直接入力できます。ピッカーと他の形式は自動で更新されます。
RGB (int) とは何ですか？
RGB (int) は赤・緑・青の値を一つの整数にまとめた表現です。一部のプログラミング環境やカラーデータベースで使用されます。
データはサーバーに送信されますか？
いいえ。すべての色計算はブラウザ内で完結します。データがサーバーに送信されることはありません。
色を保存・ダウンロードできますか？
はい。選択した色をPNGスウォッチ画像としてダウンロードするか、各形式（HEX、RGB、HSL、CMYK）をワンクリックでコピーできます。