HEX カラーピッカー

任意の HEX カラーを RGB と HSL に変換したり、見た目で新しい色を選んだりできます。

ブラウザ内で動作
アップロード不要
アカウント不要

ブラウザツールを読み込んでいます…

HEX カラーピッカーでできること

#3157D5 や短縮形の #35D のような HEX コードを入力すると、色見本、RGB、HSL の値が入力に合わせて更新されます。色見本をクリックしてシステムのカラーピッカーを開き、目で見て色を選ぶこともできます。デザインツールの色を CSS 用の rgb() に変換したり、短い HEX コードが何に展開されるかを確かめたりするのに手早く使えます。

画像は不要です。スクリーンショットから色を取得したい場合は、「その他のオプション」を開いてそこに画像をドロップしてください。画像から取得した最近の色は色見本として残ります。画像全体の色を分析するには、メインカラー抽出を使ってください。

例

入力

#35D

結果

HEX #3355DD
RGB rgb(51, 85, 221)
HSL hsl(228, 71%, 53%)

3 桁のコードは各桁が 2 回繰り返されるため、#35D は #3355DD になります。

HEX カラーピッカーの使い方

「HEX カラー」にコードを入力するか、色見本をクリックして色を選びます。
大きな色見本の下に表示される RGB と HSL の値を確認します。
「コピー」をクリックして HEX コードをコピーするか、RGB や HSL をそれぞれの欄からコピーします。

知っておきたいこと

#3157D580 のようなアルファ値付きの 8 桁の HEX コードは受け付けません。最初の 6 桁を使い、不透明度は CSS で別に設定してください。
このページで入力できるのは HEX だけです。出力は HEX、RGB、HSL で、CMYK や Pantone には対応していません。
HSL の値は整数に丸められるため、元に戻すと RGB で 1 ずれることがあります。

HEX カラーピッカーについてよくある質問

HEX を RGB に変換するには？

6 桁を 2 桁ずつ 3 組に分け、それぞれを 16 進数から 10 進数に変換します。#3157D5 なら 31、57、D5 で、49、87、213 になります。ここにコードを入力すれば、すぐに rgb(49, 87, 213) が表示されます。

3 桁の HEX カラーとは何ですか？

各桁を 2 回繰り返す省略形です。#35D は #3355DD、#FFF は #FFFFFF を意味します。2 桁ずつ同じ数字が並ぶ色にしか使えないため、ほとんどのブランドカラーは 6 桁すべてが必要です。

HEX ではなく HSL を使うべきなのはどんなときですか？

HSL は手で調整しやすい形式です。最後の値だけを変えれば色を明るくも暗くもできるため、ホバー時の色や淡い色合いを作るのに便利です。HEX は短く、ほとんどのデザインツールが書き出す形式です。