このカラーピッカーは視覚的なスウォッチから始まり、正確な数値もすぐ横で確認できます。#3366ccのようなCSSのhex値を貼り付けたり、赤・緑・青・アルファの各チャンネルを少しずつ調整したり、デザインシステム向けに色相・彩度・明度を細かく整えたりできます。色の値はアップロードされません - 変換はJavaScriptでローカルに処理されます。
無料カラーピッカー
すべてブラウザー内で動作します。アップロードも登録も不要です。
選択中#3366cc
HSL220, 60%, 50%
HEX
#3366ccHEX8
#3366ccffRGB
rgb(51, 102, 204)HSL
hsl(220, 60%, 50%)HSV
hsv(220, 75%, 80%)CMYK
cmyk(75%, 50%, 0%, 20%)カラーピッカーとは?
カラーピッカーは、デザインやコードで使う正確なデジタルカラーを選び、その値をコピーするためのツールです。スウォッチ、HEX入力欄、RGBスライダー、HSLコントロールを使い、HEX、RGB、HSL、HSV、CMYKの値をすぐにコピーできます。すべてブラウザ内で動作します。
使い方
- 1色を選ぶか貼り付ける. 大きなスウォッチをクリックしてブラウザのカラーピッカーを開くか、3桁、4桁、6桁、8桁のhex値をHEX欄に貼り付けます。
- 2チャンネルを調整する. RGBスライダーで赤、緑、青、アルファを調整します。デザイン向けに操作したいときは、色相、彩度、明度を編集します。
- 3必要な形式をコピーする. HEX、HEX8、RGB、HSL、HSV、CMYKをワンクリックでコピーできます。プレビューとすべての出力はリアルタイムで更新されます。
こんな方に
- フロントエンド開発者がインターフェース制作中にCSSで使えるHEX、RGB、HSL値をコピーするとき。
- デザイナーがグラフィックアプリで勘に頼らず、ブランドカラーをチャンネル単位で調整するとき。
- マーケティングチームがメール作成ツール、資料、SNS素材のキャンペーンカラーをそろえるとき。
- 学生やクリエイターがRGB、HSL、HSV、CMYKで同じ色をどう表すか学ぶとき。
よくある質問
このカラーピッカーは無料ですか?
はい。カラーピッカーは無料で、登録も利用回数の制限もありません。ページを開き、色を選んで必要な形式をコピーできます。
選んだ色はどこかにアップロードされますか?
いいえ。ピッカーと変換は、通常のJavaScriptでブラウザ内だけで実行されます。選択した色がサーバーに送信されることはありません。
どの色形式をコピーできますか?
HEX、アルファ付き8桁HEX、RGBまたはRGBA、HSLまたはHSLA、HSV、CMYKをコピーできます。編集すると各形式は同期して更新されます。
hexカラーを貼り付けられますか?
はい。3桁、4桁、6桁、8桁のCSS hex値を、#記号ありでもなしでも貼り付けられます。短縮形は通常のCSSルールで展開されます。
HEX8とは何ですか?
HEX8は8桁のhexカラーで、最後の2桁にアルファ値を保存します。たとえば#3366cc80は、同じ青を約50%の不透明度で表したものです。
CSSではRGBとHSLのどちらを使うべきですか?
正確なチャンネル値やrgba()のアルファが必要なときはRGBを使います。彩度や明度を変えてティント、シェード、関連するUI状態を作りたいときはHSLが便利です。