色変換ツール

使い方

Web上の色は通常、HEX、RGB、HSLの3つの形式のいずれかで記述されます。HEXは色を単一の文字列にパックします。#の後に6つの16進数が続き、赤、緑、青のペアで取得され、各ペアは00（なし）からFF（完全）までの範囲です。RGBは同じ3つのチャネルを16進ペアの代わりに平文で表します。赤、緑、青はそれぞれ0から255までです。HSLは異なるアプローチを取ります。チャネルの強度ではなく、色相を360°の色相環の周りの位置として説明し、彩度と明度をパーセンテージとして表し、これは人々が実際に色について考える方法にはるかに自然に対応します。 各形式が存続する理由は、異なるジョブに適しているためであり、一つが別のものに置き換わったわけではありません。HEXはコンパクトで、CSSやデザインツールに貼り付けやすいため、6文字であいまいさなく正確な色をキャプチャします。RGBは、スクリーンが実際に色を生成する方法に直接対応します。ピクセルレベルで赤、緑、青の光を混ぜており、透明度のアルファチャネルを追加してrgba()にきれいに拡張できます。HSLは、色を最初から指定するのではなく調整するときに人々が到達するものです。明度を上げ下げすると予測可能な明るいまたは暗い色合いが得られ、色相をスライドさせると色相環をスムーズに移動して、一致するパレットを作成できます。 具体例は関係を明確にします。ミッドブルーを取ります。HEXとしては#3B82F6です。ペアに分割すると、3B、82、F6は16進数から10進数に変換され、59、130、246になります。これはrgb(59, 130, 246)として記述されたまったく同じ色です。同じ赤、緑、青の値を色相、彩度、明度に変換すると、hsl(217°、91%、60%)が得られます。217°の色相は色相環の青いセグメントにあり、91%の彩度はそれが鮮やかで無彩色の青であることを意味し、60%の明度はそれを黒から白への明度範囲のほぼ中央に配置します。3つの文字列はすべて同じピクセル色を説明しています。 コンバーターを使用するには、3つの形式のいずれかで色を入力フィールドに入力します。HEXコード、rgb()値、またはhsl()値です。または、カラーピッカーをクリックして視覚的に選択します。有効な色が認識されるとすぐに、他の2つの形式がライブプレビュースウォッチとともに即座に更新されるため、コピーする前に結果が期待と一致することを確認できます。任意の値の横にあるコピーアイコンをクリックして、CSS、デザインツール、またはコードに貼り付けるためのその形式で取得できます。 形式間の変換は実際の仕事で絶えず発生します。クライアントからHEXコードを受け取ったときにブランドの正確な色を一致させますが、デザインツールはHSLスライダーを要求します。CSSテーマを構築します。rgba()オーバーレイに一貫したRGB値が必要です。基本色の明度を数パーセント上下に調整して、説得力のあるホバーアクティブ状態を作成します。テキストと背景色の明度値を比較してアクセシビリティのための対比が十分であることを確認します。

よくある質問

HEXカラーコードとは何ですか？

HEXカラーコードは、#3B82F6などのハッシュシンボルの後に6つの16進数が続きます。6つの数字は3つのペアを形成します。各ペアは赤、緑、青の強度を00（なし）からFF（完全、10進数で255）までのスケールで設定します。コンパクトであいまいさがないため、HEXはCSSおよびデザインツールで正確な色を指定する最も一般的な方法です。

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

RGBは色を3つのチャネル強度として説明します。赤、緑、青、それぞれ0から255まで。スクリーンが光を混ぜて色を生成する方法に対応します。HSLは同じ色を色相（360°の色相環の周りの位置）、彩度（それがどれほど鮮やかまたは無彩色か）、および明度（黒または白にどれほど近いか）として説明します。RGBはスクリーンに正確です。HSLは人間が直感的に調整しやすいです。

HEXをRGBに変換するにはどうすればよいですか？

6つのHEX数字を3つのペアに分割します。最初は赤、2番目は緑、3番目は青です。各ペアを16進数から10進数に変換して、0から255の数字を取得します。例えば、#3B82F6は3B、82、F6に分割され、59、130、246に変換され、rgb(59, 130, 246)が得られます。このコンバーターは入力中に数学をすぐに実行します。

アルファチャネルは何をしますか？

アルファチャネルは透明度を制御します。rgba()またはhsla()で赤、緑、青と一緒に4番目の値として追加され、0（完全に透明）から1（完全に不透明）の範囲です。色を背後にあるものと混ぜることができます。オーバーレイ、微妙な境界線、または基になる色を変更せずに要素を暗くするのに便利です。HEXも4番目または8番目のペアの数字としてオプションでサポートしています。