HTML Color Picker
色を選んでライブプレビューし、HEX・RGB・HSL の値をワンクリックでコピーできます。
使い方
- カラーピッカーで色を選択します。
- （任意）HEX 値を手入力します。
- HEX・RGB・HSL をクリックしてコピーします。
ライブプレビュー
選択した色: #3B82F6
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HTML Color Picker クイックガイド
色を素早く選び、形式を比較し、実践的な配色ガイドへ進める導入セクションです。
このツールを使う場面
- CSSやデザイントークン用に正確な色コードが必要なとき
- チーム内でHEX・RGB・HSLが混在して共有されるとき
- デザインツールを開く前にUI配色を手早く試したいとき
クイックステップ
- ピッカーで色を選ぶか、HEXを入力します。
- ライブプレビューで見え方を確認します。
- 使う場面に合わせてHEX・RGB・HSLをコピーします。
よくあるミス
- 用途に合わない形式の値をそのまま使うこと
- UI状態の差が出ない近い色だけで構成すること
- 通常色だけ保存してhoverや暗背景用を用意しないこと
関連 HTML Color Picker ガイド
Web配色をより確実に選び、比較し、検証するための短い実践ガイドです。