カラーコード変換
一般的な形式で色を貼り付けると、HEX・RGB・HSL・HSV の値と、パレット作成に使える明るい色・暗い色のバリエーションが表示されます。
無料 ブラウザ内で処理 登録不要
HEX
#7f52ffRGB
rgb(127, 82, 255)HSL
hsl(256, 100%, 66%)HSV
hsv(256, 68%, 100%)明暗のバリエーション
色の変換はブラウザ内で行われます。
使い方
1
色を入力
カラーピッカーを使うか、HEX・RGB・HSL の値を貼り付けます。
2
各形式を確認
HEX、RGB、HSL、HSV が並んで表示されます。
3
値をコピー
CSS やデザインツールが求める形式でコピーします。
このツールの特長
4つの色モデル
HEX、RGB、HSL、HSV が常に同期します。
明暗のバリエーション
明るい色と暗い色を確認して、素早くパレットを作れます。
ローカルで即時
アップロードもアカウントも外部ライブラリも不要です。
よくある質問
HSL と HSV の違いは？
HSL は明度（Lightness）、HSV は値・明るさ（Value）を使います。CSS では HSL、デザインツールでは HSV が一般的です。
透明度には対応していますか？
このツールは不透明な色を対象にしています。rgba や hsla を入力した場合、アルファ値は無視されます。
CSS の色を貼り付けられますか？
はい。16 進数、rgb()、hsl() の文字列をそのまま受け付けます。
数値がわずかに違うのはなぜ？
表示時に丸めているためです。内部の変換は最大精度で計算しています。
コントラストチェッカーもありますか？
はい。コントラストチェッカーは同じ色計算エンジンを使って WCAG の比率を判定します。
関連ツール
色とデザイン CSS グラデーション生成 線形・放射・円錐の CSS グラデーションを、色の位置を調整しながら作成し、CSS または Tailwind の値をコピーできます。無料で、すべてブラウザ内で動作します。 色とデザイン コントラストチェッカー 文字色と背景色のコントラスト比を計算し、通常テキストと大きなテキストが WCAG AA・AAA を満たすかをその場で判定します。 画像ツール 画像形式変換ツール PNG、JPG、WebP の画像をブラウザ内で変換します。出力形式と品質を選び、対応形式では透明を保ったまま、すぐにダウンロードできます。 日常ツール QR コード生成ツール リンク、テキスト、メッセージ用の QR コードを作成し、PNG または SVG でダウンロードできます。サイズ、色、誤り訂正レベルを調整でき、すべてローカルで生成されます。 開発ツール Base64 エンコード・デコード テキストを Base64 に変換したり、Base64 をテキストに戻したりできます。UTF-8 と URL セーフに対応し、すべてブラウザ内で完結します。 テキストツール ケース変換ツール テキストを大文字、小文字、タイトルケース、文頭のみ大文字、camelCase、PascalCase、snake_case、kebab-case に即座に変換できます。
最終更新: