ホーム 概要 お問い合わせ
← ホームに戻る

カラーピッカー＆コンバーター

色を選択し、HEX、RGB、HSL形式間で変換します。

色を選択
パレット
シェード
ティント
CSS変数
--color-primary: #8b5cf6;

概要

色を選び、HEX/RGB/HSLを相互変換。

活用シーン

  • ブランドカラーを揃える。
  • UI文字のコントラスト確認。
  • UIテーマ用のティント/シェードスケールを作成。

手順

  1. 色を選ぶか値を入力。
  2. 色相・彩度・明度を調整。
  3. 必要な形式をコピー。

例

例 1
入力
#FF6A00
出力
rgb(255, 106, 0)
HEXをRGBへ変換。
例 2
入力
hsl(210, 50%, 40%)
出力
#336699
HSLをHEXへ変換。
例 3
入力
rgb(12, 99, 200)
出力
#0C63C8
RGBがHEXに変換される。

よくあるミス

  • 明るすぎる色はコントラストが低い。
  • 色プロファイルで値がずれる。
  • 「#」がないとCSSでHEXが無効になる。

コツ

  • アクセシビリティのコントラスト比を確認。
  • パレットを保存して統一。

よくある質問

なぜ丸められるの？
色変換は丸め処理があるため小さな差は正常です。
データは送信されますか？
いいえ。すべてブラウザ内で処理されます。
オフラインで使えますか？
はい。ページ読み込み後は多くのツールがオフラインで動作しますが、フォントなど一部の資産は接続が必要な場合があります。

データとプライバシー

すべての処理はブラウザ内で行われ、データは送信・保存されません。