色選択の概要

フォント、背景、境界線、その他の要素の色を選択することは、Web サイトを作成するときに日常的に行う作業です。色の選択ツールを使って色を選択し、その透明度を調整します。さらに、サイトで色変数を定義し、色の選択ツールを使ってそれらを選択することもできます。

色を選択し、透明度を調整します

次のいずれかの方法で色相を選択できます。

• 色選択ツールの活用
• 色のスペクトルとコントロールを活用する
• それぞれの入力フィールドに値を入力する

カラー ピッカーから直接、サイト上のテキストのコントラスト比を確認できます。カラー ピッカーでは、テキストのコントラスト比だけでなく、そのコントラスト比に対応する WCAG レベルの評価も表示されます。

コントラスト比はサイトのアクセシビリティに影響します。十分なコントラスト比は、前景色 (テキスト) と背景色 (テキストの背景)、フォント サイズ、フォントの太さによって影響を受けます。

「目カラーピッカーのコントラスト比セクションにある「コントラスト比の切り替え」アイコンをクリックすると、WCAG の AA、AAA、および不合格評価間の遷移が表示されます。

色選択ツールの活用

キャンバス上または現在のブラウザ ウィンドウの外側にある任意の要素から色相を選択するには、色選択ツールを活用します。スペースバーを押すと、対象の色相の RGB 数値を表示または非表示にすることができます。 

注: カラー選択ツールにアクセスするには、ブラウザとして Chrome または Edge (例: Chromium ベースのブラウザ) を使用する必要があります。 Webflow がサポートするブラウザのリストを見る.

色のスペクトルとコントロールを活用する

スペクトルから色相を選択するには、 色相スライダー 色相を選択するには、 カラープレーン 適切な色合いを選択します。色の透明度を下げたい場合は、 透明度スライダー.

カラープレーン

カラープレーンでは、使用したい色相の色合いを選択できます。ピッカーをX軸に沿って動かすと色相の彩度が変わり、Y軸に沿って動かすと明度が変わります。色相を変更するには、 色相スライダー 下に。

色相スライダー

色相スライダーを使用すると、色相スペクトルから使用したい色相を選択できます。次に、 カラープレーン その上。

透明度スライダー

透明度スライダーを使用すると、色相の透明度レベルを指定できます。100% では色相が完全に不透明になり、それより低い値では色相が透明になります。これは、画像に色相オーバーレイを追加したり、透明な背景を設定したりする場合に役立ちます。

それぞれの入力フィールドに値を入力する

より正確に色相を選択したい場合は、ウェブカラー名、16進コード、HSB/HSBA値、またはRGB/RGBA値を使用できます。これらの値は、スタイルパネルまたは HEX入力フィールド カラーピッカーで。または、コードを分解して、指定されたフィールドに各値を入力することもできます。

• 16進数値 HEXフィールド
• HSBAの価値観の内訳は、 HSBとAフィールド
• RGBA値は、 RGBとAフィールド

ラベルをクリックすると、HSB と RGB を切り替えることができます。

HEX入力フィールド

この入力フィールドはすべての Web カラー形式をサポートしており、任意の HTML カラー値を入力できます。すべての値は HEX に変換されます。HEX コードと Web カラー形式の詳細については、こちらをご覧ください。

HSBとRGB入力

HEX 入力フィールドの隣には、「HSB」というラベルの付いた入力フィールドが 3 つあります。ラベルをクリックすると、「RGB」に切り替わります。元に戻すには、もう一度ラベルをクリックします。

「H」は色相を表します。 色相スライダーすると、「H」と表示されたフィールドの値が更新されます。「S」は彩度、「B」は明度を表します。これらの値は、ピッカーを移動すると変化します。 カラープレーン使用したい色相の HSB 値がわかっている場合は、適切なフィールドに値を入力できます。

色相の RGB 値がわかっている場合は、HSB ラベルをクリックして、赤「R」、緑「G」、青「B」の値を入力します。これらのフィールドには、色相の選択に使用したツールに関係なく、正しい値が自動的に表示されます。

「A」またはアルファベット入力フィールド

「A」はアルファチャンネルを表します。アルファチャンネルは色相の透明度を決定します。この値は 透明度スライダーアルファ値の範囲は 0 ～ 100% です。色相のアルファ値がわかっている場合は、その値に 100 を掛けてこの入力フィールドに入力します。

さらに詳しく

• カラーフォーマット HEX、RGB、RGBA
• HTML の色名