カラーピッカーは、視覚的に色を選択し、その色をHEX、RGB、HSLなどの形式で取得できるツールです。 Webデザイン、グラフィックデザイン、UI/UX設計など、デジタルクリエイティブの現場で広く使用されています。
A color picker is a tool that allows you to visually select colors and obtain them in various formats such as HEX, RGB, and HSL. It is widely used in web design, graphic design, and UI/UX development.
HEX（16進数）: #FFFFFFのような形式で、HTMLやCSSで最も一般的に使用されます。6桁の英数字で色を表現します。
RGB（Red, Green, Blue）: rgb(255, 255, 255)のように、赤・緑・青の3色の組み合わせで色を表現します。0-255の数値で各色の強さを指定します。
HSL（Hue, Saturation, Lightness）: 色相・彩度・明度で色を表現します。直感的に色を調整しやすいのが特徴です。
HEX is the most common format in HTML/CSS. RGB represents colors through red, green, and blue values (0-255). HSL uses hue, saturation, and lightness, making it intuitive for color adjustments.
Useful for web/app design, brand color selection, extracting colors from existing designs, checking accessibility, and creating color variations for dark/light modes.
このツールでは、選択した色に基づいてライトモードとダークモードの両方に対応したCSS変数を自動生成します。 生成されたコードをそのままCSSにコピーして使用できます。
This tool automatically generates CSS variables for both light and dark modes based on your selected color. You can copy and paste the generated code directly into your CSS.
各色コードの横にあるボタン（HEX、RGB、HSL）をクリックすると、クリップボードにコピーされます。
Click the button next to each color code (HEX, RGB, HSL) to copy it to your clipboard.
中央のパレットには、選択した色の明るいバリエーション、標準色、暗いバリエーションが表示されます。クリックすると、その色を選択できます。
The palette shows lighter, standard, and darker variations of your selected color. Click any swatch to select that color.
最新の12色まで自動的に保存されます。ブラウザのローカルストレージに保存されるため、ページを閉じても履歴は残ります。
Up to 12 recent colors are automatically saved in your browser's local storage and will persist even after closing the page.
ダークモードは目の疲労を軽減し、暗い環境での視認性を向上させます。右上のボタンで切り替えられます。
Dark mode reduces eye strain and improves visibility in low-light environments. Toggle using the button in the top right.