DevToolbox

無料オンライン Color Converter

HEX、RGB、RGBA、HSL、HSLA 形式間でカラーを即時変換 — カラーピッカーとプリセットスウォッチ付きの無料オンラインツール。完全クライアントサイド。

100% クライアントサイド · データは一切外部に送信されません

使い方 Color Converter

テキストフィールドに任意のカラー値を入力してください — HEX、RGB、HSL 形式に対応しています。カラーピッカー(カラースクエア)を使って視覚的に色を選んだり、プリセットスウォッチをクリックしてすぐに始めることもできます。

変換をクリックすると、6 つの形式すべての表現と RGBA カラースウォッチが表示されます。各形式の横にあるコピーアイコンをクリックすると、その値をクリップボードにコピーできます。

入力例:

  • #FF6B6B または #f6b(省略 HEX)
  • rgb(255, 107, 107) または rgba(255, 107, 107, 0.8)
  • hsl(0, 100%, 71%) または hsla(0, 100%, 71%, 0.5)

よくある質問

このツールはどのカラー形式に対応していますか?

HEX(#RGB、#RRGGBB、#RRGGBBAA)、RGB(rgb(r,g,b))、RGBA(rgba(r,g,b,a))、HSL(hsl(h,s%,l%))、HSLA 形式に対応しており、6 つの表現をすべて一度に出力します。

RGB と HSL の違いは何ですか?

RGB は赤・緑・青の光の強度(それぞれ 0–255)で色を表します。HSL は色相(0–360°、カラーホイール上の位置)・彩度(0–100%、色の鮮やかさ)・輝度(0–100%、明るさ)で色を表します。HSL は人間が色を直感的に調整しやすい形式です。

HEX8 形式とは何ですか?

HEX8 は 8 桁の 16 進数カラーコード(#RRGGBBAA)で、最後の 2 桁がアルファ(透明度)チャンネルを表します。たとえば、#FF000080 は 50% 透明の赤です。モダンな CSS およびほとんどのデザインツールで対応しています。

CSS の HEX カラーを RGB に変換するにはどうすればいいですか?

16 進数カラーコードを(# 記号あり・なし問わず)入力フィールドに貼り付け、「変換」をクリックしてください。RGB 値が結果テーブルに即座に表示されます。

アルファチャンネルとは何ですか?

アルファは透明度を制御します。0 は完全透明、1(または 100%)は完全不透明です。RGBA と HSLA 形式にはアルファチャンネルが含まれます。カラーピッカーのデフォルトは完全不透明(alpha = 1)です。

関連ツール