カラーピッカー
任意の色を選択して、HEX、RGB、HSL形式の値を即座にコピーできます。
カラーピッカーとは？
カラーピッカーは、画面上で視覚的に色を選び、瞬時にWeb開発やUIデザインで使えるカラーコード（HEX、RGB、HSL）へ変換するデジタルツールです。Web制作者、UIデザイナー、イラストレーターの色指定の効率化を支援します。
主な機能
- 直感的な色選択: キャンバスをドラッグするだけで、彩度や明度を滑らかに調整できます。
- 即時ワンクリックコピー: 生成されたコードを1クリックでクリップボードに保存し、CSSやFigmaに直接ペーストできます。
- 完全プライベート動作: すべての計算はブラウザのJavaScriptメモリ内で実行され、外部サーバーに通信されることはありません。
関連ツール
写真やスクリーンショットから色を直接抽出したい場合は、画像カラーピッカーをお試しください。選んだ色の視認性やコントラスト比を確認するには、WCAGコントラストチェッカーをご利用いただけます。
ナレッジベース & FAQ
よくある質問 (FAQ)
よくある疑問、技術的課題、業界標準に対する分かりやすい解説と解決策。
HEXコードから補色（補正色）、類似色、トライアド色を正確に計算する方法は？expand_more
カラーハーモニーの計算は、360度の色相環上の角度回転に基づきます：
- 補色（Complementary）: 色相を180°回転（例:
(hue + 180) % 360）。240°の純粋な青は60°の鮮やかなオレンジと対になります。 - 類似色（Analogous）: 色相を±30°回転。120°の緑は90°の黄緑や150°の青緑と美しく調和します。
- トライアド（Triadic）: 色相を+120°および+240°回転。バランスの取れた正三角形の3色配色を形成します。
8桁のHEXカラーコード（#RRGGBBAA）とは何ですか？expand_more
8桁の16進数カラーコード（例:
#4F46E580）は、末尾2桁にアルファチャンネル（不透明度）を含んでいます。先頭6文字が赤・緑・青を表し、7〜8文字目が00（完全透明 0%）からFF（完全不透明 100%）の透明度を表します。例えば80は10進数で128であり、約50%の不透明度を意味します。カラーピッカーにおけるHSV（HSB）とHSLの違いは何ですか？expand_more
どちらもRGBから派生した色空間ですが：
- HSV / HSB（色相・彩度・明度/輝度）: 最も明るい色成分に基づいて明るさを定義します。FigmaやPhotoshopの2D正方形ピッカーで一般的に使用されます。
- HSL（色相・彩度・輝度）: 0%を黒、50%を純色、100%を白とする対称軸で定義され、CSSの
hsl()関数と完全に連動します。
ブランドカラーから自然な明暗（ティント・シェード）を作成するコツは？expand_more
色がくすまない綺麗なカラースケールを作るには：
- 明るい色（Tints）: 色相を維持したまま明度を上げつつ、彩度をわずかに下げることで蛍光色の浮き立ちを防ぎます。
- 暗い色（Shades）: 単に黒を混ぜるのではなく、明度を下げながら色相をわずかに寒色系（インディゴやダークネイビー）へシフトさせると深みが出ます。