HTMLパステルカラー。 Minecraftのカラーコード

ヴラド・メルジェビッチ

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で使用される一般的な色は次のとおりです。

ここでは、ウェブページの背景色が＃FA8E47に設定されています。番号の前のポンド記号＃は、16進数であることを意味します。最初の2桁（FA）は色の赤成分を示し、3〜4桁（8E）は緑を示し、最後の2桁（47）は青を定義します。結果はそのような色です。

FA8E47

赤、緑、青の3色はそれぞれ、00からFFまでの値を取ることができ、最終的に256の濃淡を形成します。したがって、色の総数は256x256x256 \u003d 16.777.216の組み合わせになります。赤、緑、青の成分に基づくカラーモデルはRGB（赤、緑、青、赤、緑、青）と呼ばれます。このモデルは（add-addから）加法的であり、3つのコンポーネントすべてを加算すると白色になります。

16進数の色でナビゲートしやすくするために、いくつかの規則を考慮してください。

色成分の値が同じ場合（例：＃D6D6D6）、グレーの色合いが得られます。数値が大きいほど色が明るくなり、値は＃000000（黒）から#FFFFFF（白）に変わります。
赤成分が最大化（FF）され、残りの成分がゼロにリセットされると、明るい赤が形成されます。値が＃FF0000の色は、赤の可能な限り最も濃い色です。状況は、緑（＃00FF00）と青（＃0000FF）でも同様です。
黄色（＃FFFF00）は、赤と緑を混ぜることで得られます。これは、原色（赤、緑、青）と補色または補色が表示されるカラーホイール（図6.1）にはっきりと表示されます。これらには、イエロー、シアン、およびバイオレット（マゼンタとも呼ばれます）が含まれます。一般的に、任意の色は、それに隣接する色を混合することで取得できます。そのため、青（＃00FFFF）は青と緑を組み合わせて取得されます。

図 6.1。カラーホイール

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

図 6.2。 Photoshopカラーピッカー

Webカラー

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

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

名前による色

数字の全体を覚えないために、数字の代わりに一般的に使用される色の名前を使用できます。表の中。 6.3は人気のある色名の名前です。

タブ。 6.3。いくつかの色の名前

色名	説明	16進値
黒人	黒	#000000
青	青	＃0000FF
フクシア	薄紫	＃FF00FF
灰色の	ダークグレー	#808080
緑色	緑色	#008000
ライム	薄緑	＃00FF00
あずき色	ダークレッド	#800000
海軍	紺	#000080
オリーブ	オリーブ	#808000
紫	ダークパープル	#800080
赤	赤	＃Ff0000
銀色	ライトグレー	＃C0C0C0
ティール	ブルーグリーン	#008080
白	白	#FFFFFF
黄色い	黄色	＃FFFF00

色の設定方法は関係ありません-名前または16進数を使用します。アクションでは、これらのメソッドは同等です。例6.1は、Webページの背景色とテキストを設定する方法を示しています。

例6.1。背景とテキストの色

色

サンプルテキスト

この例では、背景色はタグのbgcolor属性を使用して設定されます、およびテキスト属性によるテキストの色。変更の場合、テキスト属性の値は16進数として設定され、bgcolorの場合は予約キーワードtealを使用します。

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

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

以下の形式について、以下で詳しく説明します。

CSSカラー-16進コード

16進カラーコード 6桁の色表現です。最初の2桁（RR）-赤の値を表し、次の2桁-緑の値（GG）、最後の青の値（BB）を表します。

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

短い16進カラーコード 6桁表記の短い形式です。この形式では、各桁が繰り返され、同等の6桁の色の値が取得されます。例：＃0F0は＃00FF00になります。

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

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

CSSカラー-RGB値

RGB値 rgb（）プロパティを使用して設定されるカラーコードです。このプロパティは、赤、緑、青の3つの値を取ります。値は、0〜255の整数、またはパーセンテージです。

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

以下は、RGB値を使用したいくつかの色を示す例です。

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

当社のサービスを使用して、数百万のカラーコードを作成できます。

安全なブラウザの色

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

CSSセーフカラーチャート
#000000	#000033	#000066	#000099	＃0000CC	＃0000FF
#003300	#003333	#003366	#003399	＃0033CC	＃0033FF
#006600	#006633	#006666	#006699	＃0066CC	＃0066FF
#009900	#009933	#009966	#009999	＃0099CC	＃0099FF
＃00CC00	＃00CC33	＃00CC66	＃00CC99	＃00CCCC	＃00CCFF
＃00FF00	＃00FF33	＃00FF66	＃00FF99	＃00FFCC	＃00FFFF
#330000	#330033	#330066	#330099	＃3300CC	＃3300FF
#333300	#333333	#333366	#333399	＃3333CC	＃3333FF
#336600	#336633	#336666	#336699	＃3366CC	＃3366FF
#339900	#339933	#339966	#339999	＃3399CC	＃3399FF
＃33CC00	＃33CC33	＃33CC66	＃33CC99	＃33CCCC	＃33CCFF
＃33FF00	＃33FF33	＃33FF66	＃33FF99	＃33FFCC	＃33FFFF
#660000	#660033	#660066	#660099	＃6600CC	＃6600FF
#663300	#663333	#663366	#663399	＃6633CC	＃6633FF
#666600	#666633	#666666	#666699	＃6666CC	＃6666FF
#669900	#669933	#669966	#669999	＃6699CC	＃6699FF
＃66CC00	＃66CC33	＃66CC66	＃66CC99	＃66CCCC	＃66CCFF
＃66FF00	＃66FF33	＃66FF66	＃66FF99	＃66FFCC	＃66FFFF
#990000	#990033	#990066	#990099	＃9900CC	＃9900FF
#993300	#993333	#993366	#993399	＃9933CC	＃9933FF
#996600	#996633	#996666	#996699	＃9966CC	＃9966FF
#999900	#999933	#999966	#999999	＃9999CC	＃9999FF
＃99CC00	＃99CC33	＃99CC66	＃99CC99	＃99CCCC	＃99CCFF
＃99FF00	＃99FF33	＃99FF66	＃99FF99	＃99FFCC	＃99FFFF
＃CC0000	＃CC0033	＃CC0066	＃CC0099	＃CC00CC	＃CC00FF
＃Cc3300	＃CC3333	＃CC3366	＃CC3399	＃CC33CC	＃CC33FF
＃CC6600	＃CC6633	＃CC6666	＃CC6699	＃CC66CC	＃CC66FF
＃CC9900	＃CC9933	＃CC9966	＃CC9999	＃CC99CC	＃CC99FF
＃UDP00	＃UDP33	＃UDP66	＃Priv99	#CCCCCC	#CCCCFF
＃CCFF00	＃CCFF33	＃CCFF66	＃CCFF99	#CCFFCC	#CCFFFF
＃Ff0000	＃FF0033	＃FF0066	＃FF0099	＃FF00CC	＃FF00FF
＃FF3300	＃FF3333	＃FF3366	＃FF3399	＃FF33CC	＃FF33FF
＃FF6600	＃Ff6633	＃Ff6666	＃FF6699	＃FF66CC	＃FF66FF
＃FF9900	＃FF9933	＃FF9966	＃FF9999	＃FF99CC	＃FF99FF
＃FFCC00	＃FFCC33	＃FFCC66	＃FFCC99	#FFCCCC	#FFCCFF
＃FFFF00	＃FFFF33	＃FFFF66	＃FFFF99	#FFFFCC	#FFFFFF

CSSは理解していません）。したがって、将来のウェブマスターは学ぶ必要があります 色を変更できるHTMLツール、 たとえば、サイトのターゲットオーディエンスの注目を集める明るくカラフルな電子メールニュースレターを作成するため。

この記録は非常に膨大であることが判明しましたが、そこから、HTMLを使用して色を操作することのすべての技術的特徴について学ぶことができます。記録を始めるには、質問を整理します。なぜHTMLページの特定の要素を色で強調する必要があるのですか。次に、特別なコードを使用してHTMLで色を設定できるRGBモデルについて説明します（途中で、色を設定する10進コードとHTML色の16進値を検討します）。また、この投稿から、カラーパレットについて学び、HTMLにパレットがない理由を理解します。そして、この出版物の完成は 背景色、テキスト、リンクを変更する例.

HTMLでの色の使用

サイトのページは、画像がなくて退屈で面白くないでしょう。これについては、前に詳しく説明しました。しかし、画像には1つの重要なマイナス点があります。各画像は追加であり、それに応じて、ホスティングの負荷が増加します。

WordPressブログのデザインでは、写真を使用しなかったため、レイアウトは色を使用して完全に装飾されています。ちょうど同じ hTMLの色については、今日お話しします。 HTMLの色はさまざまな目的に使用されます。たとえば、サイトレイアウトを設計し、1つまたは別の色で別の色を強調表示することができます。

色の助けを借りて、訪問者の注意をサイトの特定のテキストまたはブロックに集中させることができます。また、ユーザーが理解できるように色を使用して決定されることに注意してください：既にクリックしたリンク、アクセスしていないリンク、現在表示しているHTMLページ。

気をつけて 色を使用してHTMLドキュメントのスタイルを設定する、すべての色が互いに組み合わされているわけではなく、すべての色がサイトの訪問者にとって快適であるとは限りません。ただし、Webデザイナーにこれらの微妙な点について尋ねる方がよいでしょうが、この記事は、HTMLページ要素の色を制御できるようにする技術的な機能を扱うのに役立ちます。

ただし、デザインをコンテンツから分離する必要があることを忘れないでください。したがって、HTMLページでの色の操作にはCSSを使用することをお勧めしますが、これについては別の出版物で説明します。これから見る ページの色を制御するHTMLにはどのツールがありますか.

IT業界には、色を操作するための色モデルが数多くあります。最も一般的な色表現モデルはRGBモデルです。ここではこのモデルのいくつかの機能について説明しますが、RGBのより詳細な紹介については、別の出版物があります。以下に、ITで使用されるカラーモデルのリストを示します（HTMLおよびCSSだけでなく）。

RGBモデル。このモデルは非常に広く普及しており、おそらく、HTML要素の色を操作する最も便利で一般的な方法の1つです。
RGBAモデル。このモデルはRGBモデルに非常に似ていますが、アルファチャネルカラーが含まれています。 RGBAモデルの特徴は、調整できることです。 hTML要素の色だけでなく、その透明度も アルファチャネルが存在するためです。 RGBAモデルはCSS3で追加されたもので、古いブラウザーではサポートされていません。
HSLモデル。 HSLモデルの特徴は、色相、華やかさ、明度のパラメーターを使用して色を設定することです。このモデルは、RGBモデルよりも理解がやや困難です。
HSLAモデル。このモデルはHSLモデルに非常に似ていますが、RGBAモデルと同じように色のアルファチャネルを操作できるため、HSLAを使用して、ページ上のHTML要素の色だけでなく、透明度も設定できます。
HSVモデル（HSB）。このモデルをHSLモデルと混同しないでください。最初の4つのモデルはWebページを設計するためにHTMLまたはCSSで使用できますが、HSVモデルは使用できないことに注意してください。 HSVは、1978年にPixarの創設者の1人によって開発されたもので、HSLと非常によく似ています。
モデルCMYまたはCMYK。このモデルは、すべてのカラープリンターで印刷に使用されます。 CMYKモデルは、白い紙に印刷するというルールに基づいています。 CMYKモデルの任意の色は、シアン（淡い青、ターコイズ）、マゼンタ（マゼンタ）、および黄色の混合色から取得されます。 CMYモデルの各色には、パーセントで測定される不透明度特性（インクの量）があります。ただし、リストされている3色に加えて、CMYKモデルも黒を使用しています。

上記のカラーモデルはすべてハードウェアに依存しています。つまり、 RGBまたはHSLモデルを使用してHTML要素の色を設定しますすべてのユーザーのモニターが異なり、色を異なる方法で送信するため、サイトの訪問者にどの色合いを表示するかを正確に述べることは不可能です。また、上記のモデルはすべてRGBモデルに基づいており、任意のモデルで指定された色（アルファチャネルの存在によるHSLAとRGBAを除く）はRGBに変換できることに注意してください。

デバイスに依存しないカラーレンダリングモデルについて説明する場合、LABモデルに注目する価値があります。そのため、HTMLで色を扱うことに少し気を取られ、いくつかのカラーモデルに精通しています。ブラウザは最初の4つのモデル（HSL、RGB、HSLA、RGBA）のみを「理解」することに注意してください。したがって、これらのモデルを使用してHTML要素の色のみを制御できます。

HTML要素の色の形成方法：RGBモデルのいくつかの機能

対処しましょう hTML要素の色がどのように形成されるか そして、RGBモデルのいくつかの機能を備えています。 RGBモデル、およびWebページの設計に使用される他のモデルについては、後ほど個別のエントリで説明します。

したがって、RGBモデルは赤、緑、青を表します。 RGBモデルは、加法性の原理に基づいています。この原則は、任意の色を取得するために、色が黒に追加されることです。理解を深めるために、画面が黒い壁で、3つのスポットライトがあると想像してください。1つ目は赤、2つ目は緑、3つ目は青です。 0から255までの数字が配置されているルーラーを使用して、各スポットライトの明るさを調整できます。したがって、スポットライトをゼロに設定すると、スポットライトはオフになり、点灯しません。値が255の場合、スポットライトは最も明るい色になります。

したがって、同じポイントを赤と緑のスポットライトで照らすと、黒い壁で黄色のスポットに気付くことがわかります。赤と青を組み合わせると紫になり、緑と青を組み合わせると黒い壁の光点はシアンになりますが、3つのスポットライトすべてを1点に向けると、光点は白になります。

上記の原理は、RGBモデルの根底にあり、ブラウザのページ上のHTML要素の色を操作するために使用されます。

要素の色を変更するためのHTML属性：要素の背景色と要素内のテキストの色

ページ要素を一意にするために使用されます。 HTML属性を使用して、要素の色を操作できます。

HTMLカラー属性。この属性を使用すると、HTML要素内のテキストの色を変更できます。この属性は、HTMLカラーの名前の形式で値を取り、16進数システムおよび10進数システムのRGBモデルコードを使用できます。色属性は、一部のHTML要素内のテキストの色を変更できる一意のHTML属性です。
HTMLテキスト属性。この属性は一意のタグ属性です。。タグ付けタグ付きそしてフォーム。覚えているなら、コンテナの中に要素が配置され、ブラウザによって表示領域に表示されます。テキスト属性により、次を指定できます。 hTMLページ全体のデフォルトのテキスト色.
HTML属性bgcolor。また、一意のHTML属性であり、一部のHTML要素の背景色を変更できます。
HTML vlink属性。この属性は一意であり、タグにのみ適用されます。ユーザーが既にアクセスしたリンクの色を変更します。
HTML属性alink。この属性も一意であり、タグにのみ適用されます。。 alink属性は、アクティブなHTMLリンクの色を変更します。
HTMLリンク属性。リンク属性はタグでのみ使用されますユーザーがまだアクセスしていないHTMLページリンクの色を変更します。

注：属性を使用してHTML要素の色を変更することはお勧めしません。Webページの外観とコンテンツを分離できるカスケードスタイルシートがあるためです。

HTMLで10進数のカラーコードを使用する

そのため、0から255までの番号付きの図面がある特別なルーラーを使用して、スポットライトで色の明るさを設定できるという事実について説明しました。これがHTML要素の色の変更にどのように役立つかを見てみましょう。問題は、次のように10進コードを使用して、HTML要素内のテキストの色またはHTMLの背景色を変更できることです。

この例のように、本文コンテナが記述されるHTMLドキュメントを作成すると、次のように表示されます。

HTMLドキュメントの背景色が緑色に変わりました：bgcolor \u003d” rgb（0.255.0）”。
HTMLページのテキストの色が青に変わります：text \u003d” rgb（0,0,255）”。
ユーザーがアクセスしていないHTMLリンクの色は白になります：link \u003d” rgb（255,255,255）”。
現在開いているリンクの色は黒になります：alink \u003d” rgb（0,0,0）”。
そして、既にアクセスされたHTMLリンクの色は赤になります：vlink \u003d” rgb（255,0,0）”。

ご注意：あなたの裁量で「サーチライトの力」を調整することを誰も禁止していません。 htmlカラーを設定しますたとえば、次のようにします。

rgb（94、85、50）

そして、子どもたちの驚きの色を取得します。これは、RGBモデルの機能、柔軟性、および利便性です。モニターはスポットライトが輝く黒い壁であり、これらのスポットライトのパワーを調整して、10進数システムのHTML属性を使用して、あらゆる種類の背景色、テキスト、およびリンクを作成できます。 10進数のカラーコードを使用する.

実際に hTMLで10進数のカラーコードを言うのは間違っていますと言う方が正しいでしょう 10進数のカラーコードRGB、このモデルはHTMLおよびCSSでWebページを設計するためだけに使用されるものではないためです。

16進HTMLカラー値

HTML要素の色をRGBモデルの10進コードで設定することはあまり便利ではありません（現時点ではすべてのブラウザーがこの色操作のメソッドをサポートしているわけではありません）。レコードは最もコンパクトではないため、16進値を使用してHTML要素の色を設定する方がはるかに便利です。次の図では、10進数の値が16進数に変換される方法を確認できます。

16進数システムに慣れていない人のために、簡単にできるように少し説明する必要があります。 rGBモデルの16進コードを使用してHTML要素の色を操作する。まず、10進数の組み合わせで任意の数字を取得できるため、10進数システムに名前が付けられます（用語は重要です：数字と数字には違いがあります）：0、1、2、3、5、6、7、8、9

16進表記では、0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、fの16桁の組み合わせを使用して、任意の数を書き込むことができます。理解を容易にするために、aが10、fが15であると想定できます。たとえば、16という数字は16進表記で次のように書き込まれます。10.そして255という数字はffとして書き込まれます。

では、どのようにできるか見てみましょう 16進値を使用してHTML要素の色を設定します、前の例を繰り返し、10進数の色コードを16進数の色コードに置き換えます。

< body alink = ”＃000000” link \u003d”＃ffffff” vlink \u003d” ff0000” bgcolor \u003d”＃00ff00” text \u003d”＃0000ff”\u003e

注意してください： hTMLで16進数で色を書く方がいくらかコンパクトです10進数ではなく、これが最初です。 2番目：各スポットライトのパワーは、0から255までの数字で設定されます。255を記録するには、16進形式で2桁が必要です（ff \u003d 250）。 f。

注：各カラーチャネルの明るさは個別に設定されますが、1つの数字であると想像した場合、RGBモデルの16進数システムで可能な最大数はffffffであり、白色になり、10進数システムは16 777 215です。 このような多数の色と濃淡により、RGBモデルを指定/使用できます。。この数値は、各カラーチャンネルがそれぞれ256の輝度値（0〜255）を持っているという事実から得られます：256 * 256 * 256 \u003d 16,777,215。

16進HTMLカラー値はよりコンパクトで直感的ですほとんどのWebデザイナーとレイアウトデザイナーは16進値を使用してHTMLの色を操作するため、色表記の10進数形式に慣れるのではなく、すぐに16進数を使用することをお勧めします。

最初は、初心者デザイナーやレイアウトデザイナーが16進数形式のカラーレコーディングでナビゲートするのが難しいことは明らかです。そのため、ほとんどすべてのグラフィックエディターには、目的の色を選択し、異なる番号システムの異なるカラーモデルのコードを取得できるいわゆるカラーパレットがあります。

一部のテキストエディターにはパレット拡張機能があり、色をすばやく選択して変更する場合に非常に便利です。これについては何も言えません。

HTMLカラー名

HTML属性は値として取ることができます 10進コードと16進値だけでなく、また特別な色の名前。名前を使用してHTML要素の色を変更することはお勧めできません。まず、RGBモデルコードはHTMLの色名の背後にあり、次に、各ブラウザーは名前で指定されたHTML要素の色をさまざまな方法で表示します。これはブラウザー開発者の要望にのみ依存します。

だから hTMLで色名を使用することはお勧めしません。 RGBモデルはハードウェアに依存しており、名前で指定された色はブラウザやそのバージョンによっても異なります。名前を使用して、HTMLページの要素の色を設定してみましょう。

< body alink = ”black ”link = ”#white” vlink \u003d” red” bgcolor \u003d” green” text \u003d” blue”\u003e

ご存知のように、多くの色と色合いがあります。 HTML属性ではグラデーションを設定できないことに注意してください。CSSにはこのような可能性がありますが、これについては別のエントリで説明します。また、多くの色について、HTMLには名前があります。私のサイトで、HTMLの色の名前とそのRGBコードを含む表を見つけることができます。

上記の表は 名前を使用して設定した場合、HTML要素は何色になりますか。この表には16色とその名前が含まれており、W3Cコンソーシアムによって承認されており、どのブラウザーでも同じように表示されるはずです。しかし実際には、HTMLでは、Opera、Chrome、Firefox、Safari、Internet Expllorerなどの主要なブラウザーでサポートされている約200色の名前を使用できます（このステートメントは後者について非常に物議を醸しています）。

HTMLカラーパレット

実際に hTMLにはカラーパレットはありません。パレットという言葉の定義を思い出しましょう。パレットは四角形または楕円形の小さな薄いプレートで、アーティストはその上で絵の具を混ぜて、あらゆる種類の色を受け取ります。パレットを保持しやすいように、親指用の穴がパレットに作られることがあります。パレットの画像は以下にあります。したがって、HTMLにはパレットはありません。

しかし、さまざまなテキストエディタには カラーパレットプラグインその助け HTML要素の色をすばやく選択する。また、カラーパレットはグラフィックエディターにあります。デザイナーが座って計算するのはあまり快適で楽しくないからです。特定のチャンネルの輝度によって色が変わることはありません。次の図では、ペイントエディターの最も単純なパレットを見ることができます。

カラーパレットの多くのモジュールとプラグインを使用すると、RGB / RGBA形式だけでなく、他のモデルの形式でもカラーコードを取得できることに注意してください。覚えている HTMLにパレットがないこと、まあ、あなたは骨の芸術家であり、 hTMLページのカラーパレットをこれらの色と呼びますそのデザインに使用されていました（結局、パレットは時々、特定のアーティストが使用する色、またはこれまたはその絵を作成するために使用された色を指します）。

HTMLでテキストの色を変更する方法を学ぶ

できた hTMLの多くの色理論練習してみよう hTML要素の色を扱う。最初にやることは hTMLドキュメントのテキストの色を変更する 特別な属性とタグを使用します。エディターを開き、次のコードを記述します。

HTMLドキュメントのテキストの色を変更する

HTMLで色を扱うことを学ぶ

テキストの色を変更する

テキストの色を変更するには、BODYテキスト要素の一意の属性を使用し、FONT要素とその色属性を使用できます。このテキストは灰色になります。

< ! DOCTYPE html >

< html lang = "ru-RU" >

< head >

< meta charset = "UTF-8" >

< title > HTMLドキュメントのテキストの色を変更する< / title >

< link rel = "stylesheet" type = "text/css" href = "style.css" / >

< / head >

< body text = "#ff0000" >

< h1 > < font color = "rgb(0,255,0)" > HTMLで色を扱うことを学ぶ< / font > < / h1 >

< h2 > < font color = "yellow" > テキストの色を変更する< / font > < / h2 >

< p > テキストの色を変更するには、一意の

要素属性BODYテキスト、要素FONTも使用

< / body >

< / html >

このファイルをcolor.htmlとして保存し、忘れないでください。 10進数システムの色表記はChrome、Firefox、Operaをサポートしていませんが、IEはそのような色表記を理解し、HTMLヘッダーを緑色で強調表示します。

HTMLのテキストの色の変化ではなく、HTMLのフォントの色の変化と言うのは正しいことです。について

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つの文字は青を示します。各文字を2倍にする#rgb形式の省略形を使用できます。したがって、エントリ＃fe0は＃ffee00と見なす必要があります。

名前で

インターネットエクスプローラー	クロム	オペラ	サファリ	Firefox	Android	iOS
4.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

ブラウザは、名前でいくつかの色をサポートしています。表の中。表1は、名前、16進コード、RGB、HSL値、および説明を示しています。

タブ。 1.色の名前

名	コード	RGB	HSL	説明
白	#ffffffまたは#fff	rgb（255,255,255）	hsl（0.0％、100％）	白
銀色	＃c0c0c0	rgb（192,192,192）	hsl（0.0％、75％）	灰色
灰色の	#808080	rgb（128,128,128）	hsl（0,0％、50％）	ダークグレー
黒人	＃000000または＃000	rgb（0,0,0）	hsl（0,0％、0％）	黒
あずき色	#800000	rgb（128.0.0）	hsl（0,100％、25％）	ダークレッド
赤	＃ff0000または＃f00	rgb（255,0,0）	hsl（0,100％、50％）	赤
オレンジ色	＃ffa500	rgb（255,165,0）	hsl（38.8,100％、50％）	オレンジ色
黄色い	＃ffff00または＃ff0	rgb（255,255,0）	hsl（60,100％、50％）	黄色
オリーブ	#808000	rgb（128,128,0）	hsl（60,100％、25％）	オリーブ
ライム	＃00ff00または＃0f0	rgb（0.255.0）	hsl（120,100％、50％）	薄緑
緑色	#008000	rgb（0.128.0）	hsl（120,100％、25％）	緑色
アクア	＃00ffffまたは＃0ff	rgb（0.255.255）	hsl（180,100％、50％）	青
青	＃0000ffまたは＃00f	rgb（0,0,255）	hsl（240,100％、50％）	青
海軍	#000080	rgb（0,0,128）	hsl（240,100％、25％）	紺
ティール	#008080	rgb（0,128,128）	hsl（180,100％、25％）	ブルーグリーン
フクシア	＃ff00ffまたは＃f0f	rgb（255,0,255）	hsl（300,100％、50％）	ピンク
紫	#800080	rgb（128,0,128）	hsl（300,100％、25％）	パープル

RGBを使用する

インターネットエクスプローラー	クロム	オペラ	サファリ	Firefox	Android	iOS
5.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

赤、緑、青の成分の値を10進数で使用して色を決定できます。 3つの色成分はそれぞれ0〜255の値を取ります。また、色をパーセントで設定することもできます。100％が255に対応します。最初にキーワードrgbが示され、次に括弧内に色成分が示されます（例：rgb（255 、128、128）またはrgb（100％、50％、50％）。

RGBA

インターネットエクスプローラー	クロム	オペラ	サファリ	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

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

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

HSL

インターネットエクスプローラー	クロム	オペラ	サファリ	Firefox	Android	iOS
9.0+	1.0+	9.6+	3.1+	3.0+	2.1+	2.0+

HSL形式の名前は、Hue（色相）、Saturate（彩度）、およびLightness（明度）の最初の文字の組み合わせから派生しています。色相は、カラーホイール（図1）の色の値であり、度単位で設定されます。 0°は赤、120°は緑、240°は青に対応します。色相の値は0〜359の範囲で変更できます。

図 1.カラーホイール

彩度は色の強度と呼ばれ、0〜100％の割合で測定されます。値が0％の場合、色とグレーの陰影が存在しないことを示し、彩度の最大値は100％です。

明るさは色の明るさを決定し、0％〜100％のパーセンテージで示されます。値が小さいと色が暗くなり、値が大きいと明るくなり、極端な値0％と100％は白黒に対応します。

HSLA

インターネットエクスプローラー	クロム	オペラ	サファリ	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

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

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

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

色

警告

ウェブサイトにリストされているすべてのライオン釣りの方法は理論的であり、計算方法に基づいています。著者はその使用におけるあなたの安全を保証せず、結果に対するすべての責任を放棄します。覚えておいて、ライオンは捕食者であり、危険な動物です！

あら！

この例の結果は図に示されています。 2。

図 2. Webページの色

HTMLでは、次の3つの方法で色を定義できます。

名前でHTMLの色を設定する

英語の色の名前を値として使用して、色によって名前を指定できます。最も一般的なキーワード：黒（黒）、白（白）、赤（赤）、緑（緑）、青（青）など：

テキストの色は赤です

World Wide Web Consortium（W3C）の標準の最も人気のある色：

役職	役職	役職	役職
黒	灰色	銀色	白
黄色	ライム	アクア	フクシア
赤	緑色	青	パープル
マルーン	オリーブ	海軍	ティール

異なる色の名前を使用する例：

例：名前で色を指定する

自分で試してみてください」

赤の背景のヘッダー。

オレンジ色の背景のヘッダー

ライムの背景のヘッダー。

青色の背景に白いテキスト。

赤の背景のヘッダー。

オレンジ色の背景のヘッダー

ライムの背景のヘッダー。

青色の背景に白いテキスト。

RGBを使用して色を設定する

モニターにさまざまな色を表示する場合、RGBパレットが基準として使用されます。 3つの主な色を混ぜることで、どんな色でも得られます R-赤, G-緑, B-ブルー。各色の明るさは1バイトで設定されるため、0〜255の値を取ることができます。たとえば、RGB（255,0,0）は赤で表示されます。赤は最大値（255）に設定され、残りは0 色をパーセンテージで設定することもできます。各パラメーターは、対応する色の輝度レベルを示します。例：rgb（127、255、127）およびrgb（50％、100％、50％）の値は、同じ緑色を中程度の彩度に設定します。

例：RGBを使用して色を設定する

自分で試してみてください」

rgb（127、255、127）

rgb（50％、100％、50％）

rgb（127、255、127）

rgb（50％、100％、50％）

16進値で色を設定

値 R G B 16進数（HEX）カラー値を使用して指定することもできます：#RRGGBB、ここでRR（赤）、GG（緑）およびBB（青）は00からFF（10進数0-255と同じ）の16進数値です。 16進法は、10進法とは対照的に、その名前が示すように、16に基づいています。16進法では、0、1、2、3、4、5、6、7、8、9、A、B、 C、D、E、F。ここで、10〜15の数字はラテン文字に置き換えられます。 16進法で15を超える数値は、1つの値に含まれる2文字の組み合わせです。たとえば、10進数システムの最大数255は、16進数システムの最高FF値に対応します。 10進数とは異なり、16進数の前にはポンド記号が付きます # たとえば、赤は最大値（FF）に設定され、残りの色は最小値（00）に設定されているため、＃FF0000は赤として表示されます。ポンド記号の後の標識 # 大文字と小文字の両方を入力できます。 16進法では、＃rgb形式の短縮形を使用できます。各文字はdoubleと同等です。したがって、エントリ＃f7Oは＃ff7700と見なす必要があります。

例：HEXカラー

自分で試してみてください」

赤：＃FF0000

緑：＃00FF00

青：＃0000FF

赤：＃FF0000

緑：＃00FF00

青：＃0000FF

赤+緑\u003d黄：＃FFFF00

赤+青\u003d紫：＃FF00FF

緑+青\u003dシアン：＃00FFFF

一般的な色のリスト（名前、HEX、RGB）：

英語名	ロシア名	六角	RGB
アマランス	アマランス	＃E52B50	229	43	80
色	色	＃FFBF00	255	191	0
アクア	ブルーグリーン	＃00FFFF	0	255	255
紺Azure	紺Azure	＃007FFF	0	127	255
黒	黒	#000000	0	0	0
青	青	＃0000FF	0	0	255
ボンダイブルー	ボンダイビーチウォーター	＃0095B6	0	149	182
黄銅	黄銅	＃B5A642	181	166	66
ブラウン	ブラウン	＃964B00	150	75	0
セルリアン	紺Azure	＃007BA7	0	123	167
ダークスプリンググリーン	ダークスプリンググリーン	#177245	23	114	69
エメラルド	エメラルド	＃50C878	80	200	120
なす	なす	#990066	153	0	102
フクシア	フクシア	＃FF00FF	255	0	255
ゴールド	ゴールデン	＃FFD700	250	215	0
灰色	灰色	#808080	128	128	128
緑色	緑色	＃00FF00	0	255	0
インディゴ	インディゴ	＃4B0082	75	0	130
ヒスイ	ヒスイ	＃00A86B	0	168	107
ライム	ライム	＃CCFF00	204	255	0
マラカイト	マラカイト	＃0BDA51	11	218	81
海軍	紺	#000080	0	0	128
黄土	黄土	＃CC7722	204	119	34
オリーブ	オリーブ	#808000	128	128	0
オレンジ色	オレンジ色	＃FFA500	255	165	0
もも	桃	＃FFE5B4	255	229	180
かぼちゃ	かぼちゃ	＃Ff7518	255	117	24
パープル	パープル	#800080	128	0	128
赤	赤	＃Ff0000	255	0	0
サフラン	サフラン	＃F4C430	244	196	48
シーグリーン	緑の海	＃2E8B57	46	139	87
沼地の緑	マーシュ	＃ACB78E	172	183	142
ティール	ブルーグリーン	#008080	0	128	128
ウルトラマリン	ウルトラマリン	＃120A8F	18	10	143
バイオレット	パープル	＃8B00FF	139	0	255
黄色	黄色	＃FFFF00	255	255	0