カラーコード変換器
HEX・RGB・HSLのカラーコードを相互変換。 カラーピッカーとリアルタイムプレビューで直感的に操作。
カラープレビュー
HEX
RGB
rgb(255, 87, 51)
R
G
B
HSL
hsl(11, 100%, 60%)
H
S
L
このツールをシェア
📖
使い方
Step 1
色を選択
カラーピッカーまたはコードで色を指定します
→
Step 2
自動変換
HEX・RGB・HSL形式が同時に表示
→
Step 3
コピー
必要な形式のカラーコードをコピー
✨
このツールの特徴
3形式対応
HEX・RGB・HSLのカラーコードを相互変換
リアルタイムプレビュー
色の変更がプレビューにリアルタイム反映
カラーピッカー
ビジュアルなカラーピッカーで直感的に色を選択
❓
よくある質問
#RRGGBBの形式で色を16進数で表す方法。Web開発で最も一般的です。
🔗関連ツール
🎨
デザインカラーピッカー
カラーホイールやスライダーで直感的に色を選べるツール。 HEX・RGB・HSL形式でカラーコードを取得・コピーできる。
🎨
デザイン画像色抽出器
画像から主要な色を自動検出してカラーパレットを生成。 画像上の任意の位置をクリックして個別に色を取得することも可能。
🎯
デザイン画像平均色取得
画像全体または選択範囲の平均色を算出するツール。 デザインの配色決めやサムネイル背景色の決定に活用できる。
🌈
デザインCSSグラデーション生成器
CSSグラデーションをドラッグ操作で視覚的に作成するツール。 リニア・ラジアル・コニックの3タイプとプリセットを搭載。
🔲
デザインCSSボックスシャドウ生成器
CSSのbox-shadowをスライダーで視覚的に調整・生成するツール。 複数シャドウの重ね合わせや内側シャドウ（inset）にも対応。
⬜
デザインCSSボーダー角丸生成器
CSSのborder-radiusを4隅個別に調整して生成するツール。 楕円半径の指定やよく使う形状のプリセットも搭載。