色 コンバータ
3 方向のカラー フォーマット コンバータ - 任意のフィールドに入力すると、HEX、RGB、HSL がすべて即座に更新されます。ライブ プレビュー見本には、入力時に色が表示されます。フィールドの横にある [コピー] をクリックして、CSS またはデザイン ツールの値を取得します。
カラーフォーマットを変換する方法
任意の色の値を入力して開始します
HEX、RGB、または HSL の 3 つのフィールドのいずれかに色の値を入力するか貼り付けます。他の 2 つは、Enter キーを押したりボタンをクリックしたりしなくても、入力すると更新されます。左側のプレビュー スウォッチにはライブ結果が表示されます。フィールドの横にある [コピー] をクリックすると、書式設定された値がクリップボードに直接コピーされ、CSS またはデザイン ツールに貼り付けることができます。
HEX コード — CSS 標準
HEX カラーは、接頭辞が付いた 6 つの 16 進数を使用します。 #、 例えば #FF5733。数字の各ペアは、次のスケールで赤、緑、または青のチャネルを表します。 00 (なし)に FF (最大強度)。 3桁の略記のようなもの #FFF または #ABC も受け入れられ、自動的に展開されます。 HEX は、CSS、HTML 属性、および Figma、Sketch、Adobe XD などのデザイン ツールで最も一般的な形式です。
RGB — 赤、緑、青のチャネル値
RGB は、0 ～ 255 の整数を使用して、赤、緑、青の光の強度を指定します。CSS 形式は次のとおりです。 rgb(R, G, B)、 例えば rgb(255, 87, 51)。この形式は、ディスプレイ ハードウェアがカラーをレンダリングする方法に直接マッピングされ、JavaScript、Canvas 2D 描画 API、または個別のチャネル コンポーネントを必要とする画像処理コードにカラー値を渡すときに便利です。
HSL — 色相、彩度、明度
HSL は、色を色相 (0 ～ 360°、カラー ホイール上の角度位置)、彩度 (0 ～ 100%、色の鮮やかさ)、明度 (0 ～ 100%、純粋な黒から色を経て純粋な白まで) として表します。 CSSの形式は、 hsl(H, S%, L%)、 例えば hsl(11, 100%, 60%)。カラー パレットを生成する場合は、色相を調整すると全体の明るさと彩度が一定のままカラー ファミリがシフトされるため、HSL が推奨されます。
よくある質問
このコンバーターはどのようなカラー形式をサポートしていますか?
このツールは HEX (16 進数など) の間で変換します。 #FF5733)、RGB (rgb(255, 87, 51))、および HSL (hsl(11, 100%, 60%)）。 3 つのフィールドのいずれかが変更されるたびに、すべてのフィールドが同時に更新されます。
HEX コードを RGB に変換するにはどうすればよいですか?
16 進コードを貼り付けます。 # プレフィックス — HEX フィールドに入力します。 RGB フィールドと HSL フィールドはすぐに更新されます。 RGB フィールドの横にある [コピー] をクリックして、CSS または JavaScript で使用するための書式設定された値を取得します。
RGB と HSL の違いは何ですか?
RGB は、赤、緑、青の光 (それぞれ 0 ～ 255) を混合し、画面の色のレンダリング方法に直接マッピングします。 HSL は、色相 (カラー ホイールの位置、0 ～ 360°)、彩度 (鮮やかさ、0 ～ 100%)、および明度 (明るさ、0 ～ 100%) と同じ色を表します。 HSL は、全体の明るさと豊かさを一定に保ちながら色相を回転させることで色をシフトするため、パレットの作成がより直感的です。
短い 3 桁の 16 進コードを入力できますか?
はい。 3 桁の短縮表記は自動的に展開されます。 #FFF になる #FFFFFF、 #ABC になる #AABBCC、 そして #000 になる #000000。 3 桁と 6 桁の両方の形式が、先頭の有無にかかわらず受け入れられます。 #。
私の色はサーバーにアップロードされますか?
いいえ。すべての変換は、JavaScript を使用してブラウザ内で完全に実行されます。カラー値、入力データ、使用情報はサーバーに送信されません。ページが読み込まれると、ツールはオフラインで動作します。