カラーピッカー
HEX, RGB, HSL
色を視覚的に選択し、HEX、RGB、HSL形式間で変換します。CSSやデザインツールですぐ使える値をコピーできます。
この変換はブラウザ内だけで実行され、サーバーへはアップロードされません。
59
130
246
- HEX#3b82f6
- RGB59,130,246
- HSL217, 91%, 60%
不透明色のみ（HEX / RGB / HSL）。アルファなし。#rgb 短縮形または #rrggbb を入力できます。
- HEX
- RGB
- HSL
このツールについて
視覚選択（または入力した HEX）を CSS 向けの HEX・RGB・HSL に変換します。3 形式は同じ不透明色を別座標で表します。
HEX はトークン向けに短く、RGB は 0–255 チャネル、HSL は関連 UI 状態の微調整に向きます。CSS の #rgb 短縮形を受け取り 6 桁に展開します。
単一スウォッチを CSS や文書に載せる用途向けです。シードからハーモニーが必要ならカラーパレット生成ツールを使ってください。
よくある用途
- モックの HEX/RGB/HSL を CSS・デザインシステムへコピー
- 古いスタイルシートの
#rgbを#rrggbbに展開 - RGB スライダーを動かしながら HEX・HSL の同期を確認
使い方
- ネイティブカラー入力または RGB スライダーを使います。大きなスウォッチが即座に更新されます。
- または HEX（
#39f/#3399ff）を入力します。不正値・アルファはエラーになります。 - Sample は
#39f→#3399ffを読み込みます。Clear は既定の青に戻します。 - ツールバーで HEX、各行で RGB/HSL をコピーします。
例
| 入力 / 設定 | 出力 | メモ |
|---|---|---|
#3b82f6（既定） | rgb(59, 130, 246) · hsl(217, 91%, 60%) | 既定ブルー。 |
#39f（Sample） | #3399ff · rgb(51, 153, 255) | #rgb 短縮の展開。 |
#000 | #000000 · hsl(0, 0%, 0%) | 黒。 |
#ffffff | rgb(255, 255, 255) · hsl(0, 0%, 100%) | 白。HSL 彩度 0。 |
実務での落とし穴
- アルファなし:
#rgba/#rrggbbaa/rgba()/hsla()は対象外。透明度は CSS で別途書いてください。 - HEX・HSL は表示用に丸めます。低彩度のグレー付近では HSL の色相が不安定になり得ます。
- テキスト/背景の コントラスト（WCAG） は計算しません。公開前にデザイン／アクセシビリティツールで確認してください。
参考資料
最終更新: 2026-07-27
よくある質問
- アルファ（透明度）はありますか？
- いいえ。不透明色のみです。rgba()/hsla() や 8 桁 HEX が必要ならデザインツールか CSS でアルファを書いてください。
- HEX・RGB・HSL を個別にコピーできますか？
- はい。形式ごとのコピーと上部の Copy（HEX）があります。ピッカーとスライダーはライブ同期です。
- データはサーバーに送られますか？
- いいえ。変換はブラウザ内だけです。