ToolzPod

カラーピッカー

色を選択してHEX、RGB、HSL形式で変換。パレットも作成。

カラーフォーマットの基礎知識

Web上の色はいくつかの形式で表現できます。用途に応じてそれぞれ利点があります。

HEXカラー

HEX(16進数)カラーは、ハッシュ記号(#)に続く6桁のコードで色を表します。2桁ずつ赤・緑・青の成分を表し、たとえば#FF0000は純粋な赤、#000000は黒です。CSSやWebデザインで最もよく使われる形式です。

RGBカラー

RGBは赤(Red)・緑(Green)・青(Blue)の3チャンネルの組み合わせで色を表し、各チャンネルは0〜255の範囲です。rgb(赤, 緑, 青)という書式で、光の混色に基づいた直感的な表現方法です。CSSで広く使われています。

HSLカラー

HSLは色相(Hue)・彩度(Saturation)・明度(Lightness)の頭文字です。色相は色環上の角度(0〜360)、彩度は鮮やかさ(0〜100%)、明度は明るさ(0〜100%)を表します。色のバリエーションやパレットを作る際に、直感的に調整しやすいフォーマットです。

よくある質問

色の組み合わせはどう選べばいい?

補色(色環の反対側)、類似色(色環の隣り合う色)、トライアド(色環を三等分した色)を使うと、調和のとれた配色になります。上のパレット機能を使えば、選んだ色のバリエーションを確認できます。

カラーアクセシビリティとは?

カラーアクセシビリティは、色覚に特性のある方にもコンテンツが読みやすいようにする取り組みです。WCAG(Webコンテンツアクセシビリティガイドライン)では、通常テキストにはコントラスト比4.5:1以上、大きなテキストには3:1以上を推奨しています。