デザイン
カラーコード変換
カラーコードをHEX・RGB・HSLの間で相互変換。カラーピッカーやスライダーで色を選ぶと各表記が同時に更新され、ワンクリックでコピーできます。すべてブラウザ内で処理し、外部送信されません。
色を選ぶ
すべてブラウザ内で計算。色データは外部送信されません。
各表記
HEX
#4f7cffRGB
rgb(79, 124, 255)HSL
hsl(225, 100%, 65%)RGB を調整
HSL を調整
カラーコードをHEX・RGB・HSLの間で相互変換します。カラーピッカーやスライダーで色を選ぶと各表記が同時に更新され、ワンクリックでコピーできます。
使い方
- カラーピッカーで色を選ぶか、HEXコードを直接入力します。
- 右側にHEX・RGB・HSLの各表記が表示され、それぞれ「コピー」できます。
- RGB・HSLのスライダーを動かして、色を微調整することもできます。
用途の例
デザインカンプのHEXをCSS用のRGBに変換したり、HSLで明度だけを変えて配色のバリエーションを作ったりする場面で便利です。Web制作・資料作成・SNS画像の配色調整などに使えます。
FAQ
よくある質問
どのカラー形式に対応していますか？
HEX（#RRGGBB / #RGB）、RGB（rgb(r, g, b)）、HSL（hsl(h, s%, l%)）の3形式に対応し、どれか1つを変更すると残りが自動で更新されます。
HEXは3桁の短縮形も使えますか？
はい。#abc のような3桁の短縮HEXも認識し、#aabbcc として解釈します。先頭の # は省略しても構いません。
HSLとは何ですか？RGBとどう違いますか？
HSLは色相(Hue)・彩度(Saturation)・明度(Lightness)で色を表す方式です。RGBが光の三原色の強さで指定するのに対し、HSLは「色味を保ったまま明るさだけ変える」といった調整が直感的に行えます。
色の情報は外部に送信されますか？
いいえ。変換・プレビューはすべてお使いのブラウザ内で行われ、選択した色や入力値が外部サーバーへ送信されることはありません。
Related
ほかのツールも使う
提供: デイリーツールズ（Daily Launch）／ 最終更新: 2026-07-07
Sister services
姉妹サービスも見る
新しいツールができたらお知らせします
「カラーコード変換」のようなツールを毎日追加しています。メールを登録しておくと、新ツールの公開時にお知らせを受け取れます。