ダークブラウンの色番号。 スタイルの色は、16 進数値、名前、RGB、RGBA、HSL、HSLA 形式など、さまざまな方法で指定できます。

ご存知のとおり、色は人の精神的状態と肉体的状態の両方に影響を与える可能性があります。 毎日、インターネット上の Web サイトを閲覧しているときに、目は何百万もの色や色合いを評価します。 色彩心理学に精通した Web デザイナーは、特定の目標を達成するために訪問者の気分を操作できます。

これは、いくつかの色合いが落ち着く一方で、いくつかは逆に興奮するという事実によるものです。 次に、コンピューター技術を使用して色がどのように合成され、表示されるかについて説明します。

RGB は、次の 3 つの主要なコンポーネントをさまざまな割合で混合することによって、すべての色とその色合いを取得する方法を表すカラー モデルです。

• 赤色 （ 赤);
• 緑色 （ 緑);
• 青色 ( 青).

これがRGBという略称の由来です。 これらの色が主要な色として選ばれたのには理由があります。その理由は、人間の目の網膜の生理機能と、網膜が色をどのように認識するかにあります。

RGB モデルは現在でも最も人気があり、テレビ画面やコンピューター モニターで色を再現するために使用されます。 メーカーが製品に異なる特性を与えているため、1996 年に sRGB と呼ばれる統一 RGB ベースの色合成システムが作成され、Microsoft と HP はそれに基づいて協力しました。

色の数値表現

前述したように、RGB 色は原色を混合して形成されます。 それぞれの強度を表現するために、色を 0 ～ 255 (8 ビット) の範囲で表現するスキームが採用されており、16 進表記では 00 ～ FF に対応します。

つまり、原色は次のようになります。

• 赤 – RGB (255,0,0);
• 緑 – RGB (0,255,0);
• 青 – RGB (0,0,255);

色の強度が 255 未満の値をとる場合、赤、緑、青の異なる色合いが得られます。 以下は、そのグラデーションと各色合いの 16 進値の表です。

RGBカラーテーブル

当然、原色のグラデーションだけでなく、混色したものもあり、その数はかなり多い。 したがって、既存のすべての色合いとその名前および数値表現を示す RGB カラーのテーブルが作成されました ( 10 進数と 16 進数の形式で).

こちらからご覧いただけます。 この表を使用すると、数秒で必要な色合いを見つけ、その数値表現を見つけることができるため、Web デザイナーの作業が大幅に楽になります。

安全なRGBカラーパレット

しかし、ある時点で、さまざまなブラウザで色を表示する際に問題が発生し、それを解決するために、数学的計算によって導出された、いわゆる「安全な」RGB カラー パレットがコンパイルされました。

ブラウザは色を正しく表示できない場合、隣接する色を混合することで必要な色に近づけようとしますが、ほとんどの場合、その結果は完全に受け入れられないものになります。

このパレットの RGB カラー コードを使用することにより、Web 開発者は、さまざまなブラウザ、プラットフォーム、モニターを使用して表示される Web サイトのページの色の表示について安心できます。 現時点では、セーフカラーの表はその関連性を失いつつありますが（ 技術の進歩はまだ止まらない）、これを使用すると、よく言われるように、安らかに眠ることができます。

RGBモデルではゴールドカラー

「金」という言葉は、14 世紀初頭に、オーラム（金）と呼ばれる化学元素の色を表すために初めて使用されました。 RGB モデルでは、金色は次の数値で表されます。

• RGB (255, 215, 0) – 10 進法。
• HEX #FFD700 – 16 進数システム。

RGBモデルのベージュカラー

ベージュ色は、最も表現力豊かではないにしても、歴史の中でかなり重要な位置を占めています。 多くの文化的建造物、特​​に古代彫刻は、ベージュ色のソープストーンとソープストーンで作られていました。 RGB モデルでは、ベージュは次の数値表現になります。

• RGB (245、245、220) – 10 進法。
• HEX #F5F5DC – 16 進数システム。

今日、特にワールドワイドウェブ上で、これほど「退屈な」色を見ることはほとんどありません。 開発者は、明るい色を使用したキャッチーなデザインを優先します。 技術の進歩により、膨大な数の色をモニターに表示できるようになり、画像がより現実的になりました。

良し悪し

色を指定するにはCSSのカラーコードを使用します。 通常、カラーコードまたはカラー値は、要素の前景色 (テキストの色、リンクの色など) または要素の背景色 (背景色、ブロックの色) のいずれかの色を設定するために使用されます。 また、ボタン、境界線、マーカー、ホバー、その他の装飾効果の色を変更するために使用することもできます。

色の値はさまざまな形式で指定できます。 次の表に、使用可能なすべての形式を示します。

リストされている形式については、以下で詳しく説明します。

CSS カラー - 16 進コード

16進数のカラーコードは色を 6 桁で表したものです。 最初の 2 桁 (RR) は赤色の値を表し、次の 2 桁は緑色の値 (GG) を表し、最後の 2 桁は青色の値 (BB) を表します。

CSS カラー - 短い 16 進コード

短い 16 進数のカラーコードは 6 文字の表記法の短縮形です。 この形式では、各桁が繰り返されて、同等の 6 桁のカラー値が生成されます。 例: #0F0 は #00FF00 になります。

16 進値は、Adobe Photoshop、Core Draw などのグラフィック ソフトウェアから取得できます。

CSS の各 16 進カラー コードの前にはハッシュ記号「#」が付きます。 以下に 16 進表記の使用例を示します。

CSS カラー - RGB 値

RGB値 rgb() プロパティを使用して設定されるカラー コードです。 このプロパティは、赤、緑、青に 1 つずつ、合計 3 つの値を取ります。 値には、0 ～ 255 の整数、またはパーセントを指定できます。

注記：すべてのブラウザが rgb() color プロパティをサポートしているわけではないため、使用することはお勧めできません。

以下は、RGB 値を使用して複数の色を表示する例です。

カラーコードジェネレーター

当社のサービスを使用すると、何百万ものカラーコードを作成できます。

ブラウザセーフカラー

以下は、最も安全でコンピュータに依存しない 216 色の​​表です。 CSS におけるこれらの色の範囲は、000000 から FFFFFF の 16 進コードです。 これらは、256 カラー パレットを使用するときにすべてのコンピューターで色が正しく表示されることを保証するため、安全に使用できます。

色の指定には 16 進数が使用されます。 16 進法は、10 進法とは異なり、その名前が示すように、数字の 16 に基づいています。数字は次のようになります: 0、1、2、3、4、5、6、7、8、9、A 、B、C、D、E、F。10 から 15 までの数字はラテン文字に置き換えられます。 16 進法で 15 より大きい数値は、2 つの数値を 1 つに結合することによって形成されます。 たとえば、10 進数の 255 は 16 進数の FF に対応します。 番号体系を決定する際の混乱を避けるために、ハッシュ記号 # が 16 進数の前に置かれます (例: #666999)。 赤、緑、青の 3 色はそれぞれ、00 から FF までの値を取ることができます。 したがって、カラー シンボルは 3 つのコンポーネント #rrggbb に分割されます。最初の 2 つのシンボルは色の赤コンポーネントを示し、中央の 2 つは緑、最後の 2 つは青を示します。 省略形 #rgb を使用することができます。各文字は 2 倍になります。 したがって、エントリ #fe0 は #ffee00 と見なされます。

名前で

ブラウザは名前によって一部の色をサポートしています。 テーブル内 1 は、名前、16 進コード、RGB、HSL 値と説明を示します。

RGBの使用

赤、緑、青の値を 10 進数で使用して色を定義できます。 3 つの色成分はそれぞれ 0 ～ 255 の値をとります。色をパーセンテージで指定することもできます。100% は数値 255 に対応します。最初に rgb キーワードを指定し、次に括弧内に色成分を指定します。 、たとえば rgb(255 , 128, 128) または rgb(100%, 50%, 50%) のようにカンマで区切ります。

RGBA

RGBA 形式は構文が RGB に似ていますが、要素の透明度を指定するアルファ チャネルが含まれています。 値 0 は完全に透明、1 は不透明、0.5 などの中間値は半透明です。

RGBA は CSS3 に追加されたため、CSS コードはこのバージョンに対して検証する必要があります。 CSS3 標準はまだ開発中であり、一部の機能は変更される可能性があることに注意してください。 たとえば、background-color プロパティに追加された RGB 形式の色は検証されますが、background プロパティに追加された色は無効になります。 同時に、ブラウザは両方のプロパティの色を正確に理解します。

HSL

HSL 形式の名前は、Hue (色相)、Saturate (彩度)、Lightness (明度) の最初の文字の組み合わせに由来しています。 色相はカラー ホイール (図 1) 上の色の値であり、度で表されます。 0°は赤、120°は緑、240°は青に対応します。 色相の値は 0 ～ 359 の範囲で変化します。

米。 1. カラーホイール

彩度は色の強度であり、0% から 100% までのパーセンテージとして測定されます。 値 0% は色がなくグレーの色合いを示し、100% は彩度の最大値です。

明度は色の明るさを指定し、0% ～ 100% のパーセンテージで指定します。 低い値は色を暗くし、高い値は色を明るくします。0% と 100% の極端な値は白と黒に対応します。

HSLA

HSLA 形式は構文が HSL に似ていますが、要素の透明度を指定するアルファ チャネルが含まれています。 値 0 は完全に透明、1 は不透明、0.5 などの中間値は半透明です。

RGBA、HSL、HSLA のカラー値は CSS3 に追加されるため、これらの形式を使用する場合はコードのバージョンが有効であるかどうかを確認してください。

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

警告

このサイトに掲載されているライオン捕獲方法はすべて理論的であり、計算手法に基づいています。 著者は、それらを使用する際の安全性を保証せず、結果について一切の責任を負いません。 ライオンは捕食者であり、危険な動物であることを忘れないでください。

この例の結果を図に示します。 2.

米。 2. Web ページの色

ヴラド・メルジェヴィチ

HTML では、色は 2 つの方法のいずれかで指定されます。16 進コードを使用する方法と、特定の色の名前を使用する方法です。 16 進数体系に基づく方法が最も汎用的であるため、主に使用されます。

16進数の色

HTML では、16 進数を使用して色を指定します。 16 進法は、10 進法とは異なり、その名前が示すように、数字の 16 に基づいています。数字は次のようになります: 0、1、2、3、4、5、6、7、8、9、A 、B、C、D、E、F。10 から 15 までの数字はラテン文字に置き換えられます。 テーブル内 6.1 に 10 進数と 16 進数の対応を示します。

16 進法で 15 より大きい数値は、2 つの数値を 1 つに結合することによって形成されます (表 6.2)。 たとえば、10 進数の 255 は 16 進数の FF に対応します。

番号体系を定義する際の混乱を避けるために、16 進数の前にハッシュ記号 # が付けられます (例: #aa69cc)。 この場合、大文字と小文字は区別されませんので、#F0F0F0 または #f0f0f0 と記述しても問題ありません。

HTMLで使われる代表的な色はこんな感じです。

ここでは、Web ページの背景色を #FA8E47 に設定しています。 数字の前のハッシュ記号 # は、それが 16 進数であることを意味します。 最初の 2 桁 (FA) は色の赤成分を定義し、3 ～ 4 桁 (8E) は緑成分を定義し、最後の 2 桁 (47) は青成分を定義します。 最終的にはこの色になります。

赤、緑、青の 3 つの色はそれぞれ 00 から FF までの値を取ることができ、合計 256 の色合いになります。 したがって、色の総数は 256x256x256 = 16,777,216 通りの組み合わせになります。 赤、緑、青の成分に基づくカラー モデルは、RGB (赤、緑、青、赤、緑、青) と呼ばれます。 このモデルは加算的 (加算 - 加算) であり、3 つのコンポーネントすべてを加算すると白色が形成されます。

16 進数の色を簡単に操作できるように、いくつかのルールを考慮してください。

• 色成分の値が同じである場合 (例: #D6D6D6)、結果はグレーの色合いになります。 数値が大きいほど色は明るくなり、値の範囲は #000000 (黒) から #FFFFFF (白) です。
• 赤の成分を最大（FF）にし、残りの成分をゼロに設定すると、明るい赤色が形成されます。 #FF0000 の値を持つ色は、可能な限り最も赤い赤の色合いです。 緑(#00FF00)と青(#0000FF)も同様です。
• 黄色(#FFFF00)は赤と緑を混ぜて作られています。 これは、原色 (赤、緑、青) と補色または追加の色を表すカラー ホイール (図 6.1) ではっきりとわかります。 これらには、イエロー、シアン、バイオレット (マゼンタとも呼ばれます) が含まれます。 一般に、任意の色は、それに近い色を混合することで得られます。 したがって、シアン(#00FFFF)は、青と緑を組み合わせることで得られます。

米。 6.1. カラーサークル

16 進数値に基づく色は経験的に選択する必要はありません。 この目的には、Adobe Photoshop など、さまざまなカラー モデルを操作できるグラフィック エディタが適しています。 図では、 図 6.2 は、このプログラムで色を選択するためのウィンドウを示しています。現在の色の 16 進値が線で囲まれています。 これをコピーしてコードに貼り付けることができます。

米。 6.2. Photoshopで色を選択するウィンドウ

ウェブカラー

モニターの演色性を 8 ビット (256 色) に設定すると、同じ色でもブラウザーによって表示が異なります。 これは、ブラウザが独自のパレットで動作し、パレットにない色を表示できないときのグラフィックの表示方法が原因です。 この場合、色は、指定された色を模倣する、それに近い他の色のピクセルの組み合わせに置き換えられます。 異なるブラウザ間でも色が同じになるようにするために、いわゆる Web カラーのパレットが導入されました。 ウェブカラーとは、赤、緑、青の各要素が 0 (00)、51 (33)、102 (66)、153 (99)、204 (CC) の 6 つの値のいずれかに設定されている色のことです。 、２５５（ＦＦ）。 このコンポーネントの 16 進値は括弧内に示されています。 可能なすべての組み合わせからの色の合計数は、6x6x6 - 216 色になります。 Web カラーの例は #33FF66 です。

Web カラーの主な特徴は、すべてのブラウザで同じように表示されることです。 現時点では、モニターの品質の向上と機能の拡張により、Web カラーの関連性は非常に低くなります。

名前別の色

一連の数値を覚えなくて済むように、代わりに一般的に使用される色の名前を使用できます。 テーブル内 6.3に人気のある色の名前を示します。

色を名前で指定するか、16 進数を使用して指定するかは関係ありません。 これらの方法の効果は同じです。 例 6.1 は、Web ページの背景とテキストの色を設定する方法を示しています。

例6.1。 背景と文字の色

テキスト例

この例では、背景色はタグの bgcolor 属性を使用して設定されます。 、および text 属性によるテキストの色。 多様性を持たせるために、 text 属性は 16 進数に設定され、 bgcolor 属性は予約されたキーワード teal に設定されます。