aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/css
diff options
context:
space:
mode:
authorMasahiro FUJIMOTO <mfujimot@gmail.com>2021-11-01 00:15:06 +0900
committerMasahiro FUJIMOTO <mfujimot@gmail.com>2021-11-09 23:32:43 +0900
commit8f07bc236313e803336dadfc35c26fe05b72864a (patch)
tree21d5edc8283ca65855e142552e54ae82a11142ff /files/ja/web/css
parentf1fb98fc3f8d40a86cb6be0e185d0ba5a2b6eefa (diff)
downloadtranslated-content-8f07bc236313e803336dadfc35c26fe05b72864a.tar.gz
translated-content-8f07bc236313e803336dadfc35c26fe05b72864a.tar.bz2
translated-content-8f07bc236313e803336dadfc35c26fe05b72864a.zip
CSS Color モジュールの文書を更新 (color value の関数を除く)
- 2021/10/30 時点の英語版に同期
Diffstat (limited to 'files/ja/web/css')
-rw-r--r--files/ja/web/css/color-adjust/index.md152
-rw-r--r--files/ja/web/css/color/index.md161
-rw-r--r--files/ja/web/css/color_value/index.md2882
-rw-r--r--files/ja/web/css/css_color/index.md157
-rw-r--r--files/ja/web/css/css_colors/color_picker_tool/index.md3239
-rw-r--r--files/ja/web/css/opacity/index.md218
6 files changed, 1727 insertions, 5082 deletions
diff --git a/files/ja/web/css/color-adjust/index.md b/files/ja/web/css/color-adjust/index.md
index bbc74dba8d..5dd07edb2a 100644
--- a/files/ja/web/css/color-adjust/index.md
+++ b/files/ja/web/css/color-adjust/index.md
@@ -4,120 +4,112 @@ slug: Web/CSS/color-adjust
tags:
- Adjusting Colors
- CSS
- - CSS Colors
- - CSS Property
- - HTML Colors
- - HTML Styles
- - Layout
- - Non-standard
- - Reference
+ - CSS 色
+ - CSS プロパティ
+ - HTML 色
+ - HTML スタイル
+ - レイアウト
+ - 標準外
+ - リファレンス
- Styling HTML
- Styling text
- - Web
+ - ウェブ
- color-adjust
- - 'recipe:css-property'
+ - recipe:css-property
+browser-compat: css.properties.color-adjust
translation_of: Web/CSS/color-adjust
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p><span class="seoSummary"><strong><code>color-adjust</code></strong> は CSS のプロパティで、{{Glossary("user agent", "ユーザーエージェント")}}が出力端末への要素の表示方法を最適化するために何をするかをウェブ作者が制御することができるものです。</span>既定では、ブラウザーは出力端末の種類と機能を考慮して、要素の外観を必要に応じて慎重に調整することが許可されています。</p>
+**`color-adjust`** は CSS のプロパティで、{{Glossary("user agent", "ユーザーエージェント")}}が出力端末への要素の表示方法を最適化するために何をするかをウェブ作者が制御することができるものです。既定では、ブラウザーは出力端末の種類と機能を考慮して、要素の外観を必要に応じて慎重に調整することが許可されています。
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
-<pre class="brush: css no-line-numbers notranslate">color-adjust: economy;
-color-adjust: exact;</pre>
+```css
+color-adjust: economy;
+color-adjust: exact;
-<p><code>color-adjust</code> プロパティの値は、以下のキーワードのうちの一つでなければなりません。</p>
+/* グローバル値 */
+color-adjust: inherit;
+color-adjust: initial;
+color-adjust: revert;
+color-adjust: unset;
+```
-<h3 id="Values" name="Values">値</h3>
+`color-adjust` プロパティの値は、以下のキーワードのうちの一つでなければなりません。
-<dl>
- <dt><code>economy</code></dt>
- <dd>ユーザーエージェントは、それがレンダリングされているデバイスのために出力を最適化するために、適切かつ慎重に要素に調整を加えることが許されています。例えば、印刷するときに、ブラウザは背景画像をすべて削除して、白い紙で読むときにコントラストが最適化されるようにテキストの色を調整することを選ぶかもしれません。これがデフォルトです。</dd>
- <dt><code>exact</code></dt>
- <dd>要素の内容は、ブラウザによって変更されると、実際には良くなるどころか悪くなるかもしれないような、思慮深い重要な方法で色や画像やスタイルを使用するように、特別に慎重に作られています。コンテンツの外観は、ユーザーの要求がない限り変更されるべきではありません。例えば、あるページでは、背景色が白と薄い灰色の間で交互に変化する行を持つ情報のリストが含まれているかもしれません。背景色を削除すると、コンテンツの読みやすさが低下します。</dd>
-</dl>
+### 値
-<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+- `economy`
+ - : ユーザーエージェントは、描画する機器に合わせて出力を最適化するために、適切かつ賢明と思われるように要素に調整を行うことができます。例えば印刷時に、ブラウザーは背景画像をすべて削除し、白い紙で読むのに最適なコントラストになるようにテキストの色を調整することができます。これが既定値です。
+- **`exact`**
+ - : その要素の内容物は、色、画像、スタイルを思慮深く、または重要な方法で使用するために、特別に注意深く作られたものであり、ブラウザーによって変更されると、事態が改善されるどころか、むしろ悪化する可能性があります。内容物の外観は、ユーザーの要求以外で変更してはいけません。例えば、ページに背景色が白と薄い灰色の間で交互に変化する行を持つ情報のリストがあるとします。背景色を削除すると、内容物の読みやすさが損なわれます。
-<p>ブラウザーが指定された外観から逸脱したいと思う理由はいくつかあります。</p>
+## 使用上の注意
-<ul>
- <li>コンテンツがテキストや背景色を使用しているため、出力機器上では読みやすさの点で似たような色になってしまう。</li>
- <li>出力デバイスがプリンターの場合、インクを節約するために、暗い背景画像や非常に濃い背景画像が削除されることがあります。</li>
- <li>ページを印刷するとき、ブラウザは、暗い背景の明るい色のテキストを、白い背景の濃いテキストに置き換えることを望むかもしれません。</li>
-</ul>
+ブラウザーが指定された外観から外したいと思う理由はいくつかあります。
-<p>ユーザーが色や画像の使用を制御するためにユーザーエージェントが提供しているオプションは、 <code>color-adjust</code> の値よりも優先されます。言い換えれば、 <code>color-adjust</code> が何かをするという保証はありません。ユーザーが動作を上書きすることができるだけでなく、各ユーザエージェントは、与えられた状況で <code>color-adjust</code> をどのように扱うかをそれ自身で決定することが許されています。</p>
+- 内容物が、その出力機器上ではテキストと背景の色が似たような色になってしまう場合に、読みやすくするため。
+- 出力機器がプリンターの場合、インクを節約するために、暗い背景画像や非常に濃い背景画像が削除されることがあります。
+- ページを印刷するとき、ブラウザーは、暗い背景と明るい色のテキストを、白い背景と濃い色のテキストに置き換えようとするかもしれません。
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+色や画像の使用を制御するために、ユーザーエージェントがユーザーに提供しているオプションは、`color-adjust` の値よりも優先されます。言い換えれば、`color-adjust` が何かをするという保証はありません。ユーザーが動作を上書きできるだけでなく、各ユーザーエージェントは、与えられた状況で `color-adjust` をどのように扱うかを自分で決定することができます。
-<p>{{cssinfo}}</p>
+## 公式定義
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+{{cssinfo}}
+
+## 形式文法
{{csssyntax}}
-<h2 id="Examples" name="Examples">例</h2>
+## 例
-<h3 id="Preserving_low_contrast" name="Preserving_low_contrast">低コントラストの維持</h3>
+<h3 id="Preserving_low_contrast">低コントラストの維持</h3>
-<p>この例では、黒の背景色の上に {{cssxref("background-image")}} と半透明の {{cssxref("linear-gradient()")}} 関数を使用して、中程度の赤のテキストの後ろに濃い青のグラデーションを持つボックスが表示されています。理由はどうあれ、これは紙の上を含めたあらゆるレンダリング環境で望ましい外観ですので、 <code>color-adjust: exact</code> を使用して、レンダリング時にボックスの色やスタイルを調整しないように指示します。</p>
+この例では、黒の背景色の上に {{cssxref("background-image")}} と半透明の {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} 関数を使用して、中程度の赤のテキストの後ろに濃い青のグラデーションを持つボックスが表示されています。理由はどうあれ、これは紙の上を含めたあらゆるレンダリング環境で望ましい外観ですので、`color-adjust: exact` を使用して、レンダリング時にボックスの色やスタイルを調整しないように指示します。
-<h4 id="CSS">CSS</h4>
+#### CSS
-<pre class="brush: css notranslate">.my-box {
-  background-color: black;
-  background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5));
-  color: #900;
-  width: 15rem;
-  height: 6rem;
-  text-align: center;
-  font: 24px "Helvetica", sans-serif;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+```css
+.my-box {
+ background-color: black;
+ background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5));
+ color: #900;
+ width: 15rem;
+ height: 6rem;
+ text-align: center;
+ font: 24px "Helvetica", sans-serif;
+ display: flex;
+ align-items: center;
+ justify-content: center;
color-adjust: exact;
}
-</pre>
+```
-<h4 id="HTML">HTML</h4>
+#### HTML
-<pre class="brush: html notranslate">&lt;div class="my-box"&gt;
-  &lt;p&gt;Need more contrast!&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="my-box">
+ <p>Need more contrast!</p>
+</div>
+```
-<h4 id="Result" name="Result">結果</h4>
+#### 結果
-<p>{{EmbedLiveSample("Preserving_low_contrast", 640, 120)}}</p>
+{{EmbedLiveSample("Preserving_low_contrast", 640, 120)}}
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## 仕様書
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('CSS Color Adjust', '#propdef-color-adjust', 'color-adjust')}}</td>
- <td>{{Spec2('CSS Color Adjust')}}</td>
- <td>初回定義</td>
- </tr>
- </tbody>
-</table>
+{{Specifications}}
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
-<p>{{Compat("css.properties.color-adjust")}}</p>
+{{Compat}}
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
-<ul>
- <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></li>
- <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li>
- <li>{{cssxref("background-image")}}</li>
-</ul>
+- [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color)
+- その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}
+- {{cssxref("background-image")}}
+- {{cssxref("-webkit-print-color-adjust")}}
diff --git a/files/ja/web/css/color/index.md b/files/ja/web/css/color/index.md
index a97a3e0f78..6f5b701126 100644
--- a/files/ja/web/css/color/index.md
+++ b/files/ja/web/css/color/index.md
@@ -3,44 +3,48 @@ title: color
slug: Web/CSS/color
tags:
- CSS
- - CSS Property
- - CSS テキスト
- - CSS プロパティ
- CSS 色
- - HTML 整形
- - Layout
- - Reference
- - Web
+ - CSS プロパティ
+ - CSS テキスト
+ - HTML 色
+ - HTML
+ - レイアウト
+ - リファレンス
+ - Styling HTML
+ - Styling text
+ - ウェブ
+ - color
+ - recipe:css-property
+browser-compat: css.properties.color
translation_of: Web/CSS/color
---
-<div>{{CSSRef}}</div>
-
-<p><span class="seoSummary">CSS の <strong><code>color</code></strong> プロパティは、要素のテキストや<a href="/ja/docs/Web/CSS/text-decoration">テキスト装飾</a>における前景色の<a href="/ja/docs/Web/CSS/color_value">色の値</a>を設定し、 {{cssxref("currentcolor")}} の値を設定します。</span> <code>currentcolor</code> は<em>他の</em>プロパティの間接的な値として使用される可能性があり、 {{cssxref("border-color")}} のような他の色に関するプロパティの既定値にもなったりします。</p>
+{{CSSRef}}
-<div>{{EmbedInteractiveExample("pages/css/color.html")}}</div>
+CSS の **`color`** プロパティは、要素のテキストや[テキスト装飾](/ja/docs/Web/CSS/text-decoration)における前景色の[色の値](/ja/docs/Web/CSS/color_value)を設定し、 {{cssxref("color_value#currentcolor_keyword", "currentcolor")}} の値を設定します。`currentcolor` は*他の*プロパティの間接的な値として使用される可能性があり、 {{cssxref("border-color")}} のような他の色に関するプロパティの既定値にもなったりします。
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+{{EmbedInteractiveExample("pages/css/color.html")}}
-<p>HTML における色の使用の概要については、<a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML 要素への色の適用</a>をご覧ください。</p>
+HTML における色の使用の概要については、[CSS を使用した HTML 要素への色の適用](/ja/docs/Web/HTML/Applying_color)をご覧ください。
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
-<pre class="brush: css no-line-numbers">/* キーワード値 */
+```css
+/* キーワード値 */
color: currentcolor;
-/* &lt;named-color&gt; 値 */
+/* <named-color> 値 */
color: red;
color: orange;
color: tan;
color: rebeccapurple;
-/* &lt;hex-color&gt; 値 */
+/* <hex-color> 値 */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;
-/* &lt;rgb()&gt; 値 */
+/* <rgb()> 値 */
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
@@ -48,7 +52,7 @@ color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);
-/* &lt;hsl()&gt; 値 */
+/* <hsl()> 値 */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
@@ -59,29 +63,45 @@ color: hsla(30.2 100% 50% / 60%);
/* グローバル値 */
color: inherit;
color: initial;
+color: revert;
color: unset;
-</pre>
+```
+
+`color` プロパティは単一の {{cssxref("&lt;color&gt;")}} 値で指定します。
+
+なお、値は {{cssxref("color")}} の形でなければなりません。 {{cssxref("&lt;gradient&gt;")}} は実際の型が {{cssxref("&lt;image&gt;")}} であるため使用できません。
+
+### 値
+
+- {{cssxref("&lt;color&gt;")}}
+ - : 要素のテキストや装飾部分の色を設定します。
-<p><code>color</code> プロパティは単一の {{cssxref("&lt;color&gt;")}} 値で指定します。</p>
+## アクセシビリティの考慮
-<p>なお、値は {{cssxref("color")}} の形でなければなりません。 {{cssxref("&lt;gradient&gt;")}} は実際の型が {{cssxref("&lt;image&gt;")}} であるため使用できません。</p>
+背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度に高いことを確認することが重要です。
-<h3 id="Values" name="Values">値</h3>
+色のコントラスト比は、テキストおよび背景色の明度の値を比較することで決定されます。現在の[ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)](https://www.w3.org/WAI/intro/wcag) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、[太字](/ja/docs/Web/CSS/font-weight)ならば 18.66px 以上、または 24px 以上と定義されています。
-<dl>
- <dt>{{cssxref("&lt;color&gt;")}}</dt>
- <dd>要素のテキストや装飾部分の色を設定します。</dd>
-</dl>
+- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
+- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
{{csssyntax}}
-<h2 id="Examples" name="Examples">例</h2>
+## 例
+
+### テキストを赤くする
-<p>以下の例はすべて、要素のテキストを赤色にします。</p>
+以下の例はすべて、要素のテキストを赤色にします。
-<pre class="brush: css">p { color: red; }
+```css
+p { color: red; }
p { color: #f00; }
p { color: #ff0000; }
p { color: rgb(255,0,0); }
@@ -92,67 +112,18 @@ p { color: hsl(0, 100%, 50%); }
p { color: #ff000080; }
p { color: rgba(255, 0, 0, 0.5); }
p { color: hsla(0, 100%, 50%, 0.5); }
-</pre>
-
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
-
-<p>背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度に高いことを確認することが重要です。</p>
-
-<p>色のコントラスト比は、テキストおよび背景色の明度の値を比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、<a href="/ja/docs/Web/CSS/font-weight">太字</a>ならば 18.66px 以上、または 24px 以上と定義されています。</p>
-
-<ul>
- <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}</td>
- <td>{{Spec2('CSS4 Colors')}}</td>
- <td><code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> に関数記法にカンマがない構文を追加。 <code>rgb()</code>, <code>hsl()</code> にアルファ値を含めることを許可して、 <code>rgba()</code> および <code>hsla()</code> をそれらの (非推奨な) 別名に変更。<br>
- <code>rebeccapurple</code> キーワードを追加。<br>
- 最後の桁がアルファ値を表す、 4 桁および 8 桁の 16 進数による色の値を追加。<br>
- <code>hwb()</code>, <code>device-cmyk()</code>, <code>color()</code> 関数を追加。</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td>
- <td>{{Spec2('CSS3 Colors')}}</td>
- <td>system-color を非推奨化。 SVG color を追加。 <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> の関数記法を追加</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td>
- <td>{{Spec2('CSS2.1')}}</td>
- <td><code>orange</code> color と system-color を追加</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS1', '#color', 'color')}}</td>
- <td>{{Spec2('CSS1')}}</td>
- <td>初回定義</td>
- </tr>
- </tbody>
-</table>
-
-<div>{{cssinfo}}</div>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.color")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{cssxref("&lt;color&gt;")}} データ型</li>
- <li>他の色に関するプロパティ: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}, {{cssxref("color-adjust")}}</li>
- <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML 要素への色の適用</a></li>
-</ul>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref("&lt;color&gt;")}} データ型
+- 他の色に関するプロパティ: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}, {{cssxref("color-adjust")}}
+- [CSS を使用した HTML 要素への色の適用](/ja/docs/Web/HTML/Applying_color)
diff --git a/files/ja/web/css/color_value/index.md b/files/ja/web/css/color_value/index.md
index 6d4e75edb4..1944312673 100644
--- a/files/ja/web/css/color_value/index.md
+++ b/files/ja/web/css/color_value/index.md
@@ -4,1534 +4,1462 @@ slug: Web/CSS/color_value
tags:
- CSS
- CSS データ型
- - Reference
- - Web
+ - データ型
+ - レイアウト
+ - リファレンス
+ - ウェブ
+ - 色
- hsl
- hsla
- rgb
- rgba
- - レイアウト
- 単位
- - 色
+ - lch
+ - lab
+browser-compat: css.types.color
translation_of: Web/CSS/color_value
---
-<div>{{CSSRef}}</div>
-
-<p><strong><code>&lt;color&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、 <a class="external" href="https://en.wikipedia.org/wiki/SRGB">sRGB 色空間</a>にある一つの色を表します。 <code>&lt;color&gt;</code> は <a class="external" href="https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%AB%E3%83%95%E3%82%A1%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB">アルファチャネル</a><em>透過値</em>を含むこともでき、背景とどのように<a class="external" href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">合成</a>するかを示すこともできます。</p>
-
-<p><code>&lt;color&gt;</code> は以下の何れかの方法で定義することができます。</p>
-
-<ul>
- <li>キーワードの使用 (<code>blue</code> や <code>transparent</code> など)</li>
- <li><a href="https://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation">RGB 立方体座標方式</a>の使用 (#+16進数値や、<code>rgb()</code> や <code>rgba()</code> の関数記法によって)</li>
- <li><a href="https://en.wikipedia.org/wiki/HSL_and_HSV">HSL 円柱座標方式</a> の使用 (<code>hsl()</code> や <code>hsla()</code> の関数記法によって)</li>
-</ul>
-
-<div class="note">
-<p><strong>メモ:</strong> この記事は <code>&lt;color&gt;</code> データ型の詳細を説明しています。 HTML での色の使い方について詳しくは、 <a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML 要素への色の適用</a>を参照してください。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<p><code>&lt;color&gt;</code> データ型は以下のいずれか1つの方法を使って指定されます。</p>
-
-<div class="note">
-<p><strong>メモ:</strong> <code>&lt;color&gt;</code> の色は詳細に定義されていますが、出力端末によって (時には著しく) 違って見えるかもしれません。出力端末の大半は色補正がされておらず、ブラウザーによっては出力端末の<a href="https://ja.wikipedia.org/wiki/ICC%E3%83%97%E3%83%AD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB">色プロファイル</a>に対応していないからです。</p>
-</div>
-
-<h3 id="Color_keywords" name="Color_keywords">色キーワード</h3>
-
-<p>色キーワードは大文字と小文字の区別をしない識別子で、特定の色を表します。例えば <code>red</code>, <code>blue</code>, <code>black</code>, <code>lightseagreen</code> といったものです。色名は多少なりとそれぞれの色を説明していますが、ほとんどは基本的に人工的であり、名前の仕様について強い根拠はありません。</p>
-
-<p>キーワードを使うとき、考慮すべき点がいくつかあります。</p>
-
-<ul>
- <li><a href="/ja/docs/Web/HTML">HTML</a> は CSS1 に見られる基本16色のみを解釈し、解釈できない値を (ふつう完全に違う色に) 変換する際は特定のアルゴリズムを使用します。その他の色キーワードは CSS および <a href="/ja/docs/Web/SVG">SVG</a> のみで使用してください。</li>
- <li>HTML とは異なり、 CSS では未知のキーワードは完全に無視されます。</li>
- <li>CSS のキーワード定義された色はどれも透明度を持たず、完全に不透明な色です。</li>
- <li>同じ色を表すキーワードがいくつかあります。
- <ul>
- <li><code>aqua</code> / <code>cyan</code></li>
- <li><code>fuchsia</code> / <code>magenta</code></li>
- <li><code>darkgray</code> / <code>darkgrey</code></li>
- <li><code>darkslategray</code> / <code>darkslategrey</code></li>
- <li><code>dimgray</code> / <code>dimgrey</code></li>
- <li><code>lightgray</code> / <code>lightgrey</code></li>
- <li><code>lightslategray</code> / <code>lightslategrey</code></li>
- <li><code>gray</code> / <code>grey</code></li>
- <li><code>slategray</code> / <code>slategrey</code></li>
- </ul>
- </li>
- <li>キーワードは <a href="https://ja.wikipedia.org/wiki/X_Window_System">X11</a> の色名からとられたものですが、メーカーが X11 の色を特定のハードウェアに合わせて変えていることがあるので、 RGB 値は X11 システムでの色とは異なる可能性があります。</li>
-</ul>
-
-<div class="note">
-<p><strong>メモ:</strong> 利用可能なキーワードの一覧は、様々な CSS の仕様書によって異なります。</p>
-
-<ul>
- <li>CSS Level 1 は基本的な16色だけを受け付けていました。<a href="https://ja.wikipedia.org/wiki/Video_Graphics_Array">VGA</a> グラフィックカードで表示可能な色の組み合わせという意味で、<em>VGA 色</em>と命名されました。</li>
- <li>CSS Level 2 は <code>orange</code> キーワードを追加しました。</li>
- <li>当初から、ブラウザーはその他の色を受け付けていました。初期のブラウザーのいくつかは X11 アプリケーションであったため、ほとんどは X11 色名称でしたが、少しずつ違いがありました。SVG 1.0 は正式にこうしたキーワードを定義した最初の規格でした。CSS Colors Level 3 も正式にこれらのキーワードを定義しました。このリストはよく<em>拡張色キーワード</em>、<em>X11 色</em>、<em>SVG 色</em>と呼ばれます。</li>
- <li>CSS Colors Level 4 では <a href="https://codepen.io/trezy/post/honoring-a-great-man">ウェブのパイオニア、エリック・メイヤーに敬意を表して</a> <code>rebeccapurple</code> のキーワードを追加しました。</li>
-</ul>
-</div>
-
-<table id="colors_table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">キーワード</th>
- <th scope="col">RGB 16 進表記</th>
- <th scope="col">例</th>
- </tr>
- </thead>
- <tbody>
- <tr style="position: relative;">
- <td rowspan="16">{{SpecName("CSS1")}}</td>
- <td style="text-align: center;"><code>black</code></td>
- <td><code>#000000</code></td>
- <td style="background: black;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>silver</code></td>
- <td><code>#c0c0c0</code></td>
- <td style="background: silver;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>gray</code></td>
- <td><code>#808080</code></td>
- <td style="background: gray;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>white</code></td>
- <td><code>#ffffff</code></td>
- <td style="background: white;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>maroon</code></td>
- <td><code>#800000</code></td>
- <td style="background: maroon;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>red</code></td>
- <td><code>#ff0000</code></td>
- <td style="background: red;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>purple</code></td>
- <td><code>#800080</code></td>
- <td style="background: purple;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>fuchsia</code></td>
- <td><code>#ff00ff</code></td>
- <td style="background: fuchsia;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>green</code></td>
- <td><code>#008000</code></td>
- <td style="background: green;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lime</code></td>
- <td><code>#00ff00</code></td>
- <td style="background: lime;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>olive</code></td>
- <td><code>#808000</code></td>
- <td style="background: olive;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>yellow</code></td>
- <td><code>#ffff00</code></td>
- <td style="background: yellow;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>navy</code></td>
- <td><code>#000080</code></td>
- <td style="background: navy;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>blue</code></td>
- <td><code>#0000ff</code></td>
- <td style="background: blue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>teal</code></td>
- <td><code>#008080</code></td>
- <td style="background: teal;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>aqua</code></td>
- <td><code>#00ffff</code></td>
- <td style="background: aqua;"></td>
- </tr>
- <tr>
- <td>{{SpecName("CSS2.1")}}</td>
- <td style="text-align: center;"><code>orange</code></td>
- <td><code>#ffa500</code></td>
- <td style="background: orange;"></td>
- </tr>
- <tr>
- <td rowspan="130">{{SpecName("CSS3 Colors")}}</td>
- <td style="text-align: center;"><code>aliceblue</code></td>
- <td><code>#f0f8ff</code></td>
- <td style="background: aliceblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>antiquewhite</code></td>
- <td><code>#faebd7</code></td>
- <td style="background: antiquewhite;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>aquamarine</code></td>
- <td><code>#7fffd4</code></td>
- <td style="background: aquamarine;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>azure</code></td>
- <td><code>#f0ffff</code></td>
- <td style="background: azure;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>beige</code></td>
- <td><code>#f5f5dc</code></td>
- <td style="background: beige;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>bisque</code></td>
- <td><code>#ffe4c4</code></td>
- <td style="background: bisque;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>blanchedalmond</code></td>
- <td><code>#ffebcd</code></td>
- <td style="background: blanchedalmond;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>blueviolet</code></td>
- <td><code>#8a2be2</code></td>
- <td style="background: blueviolet;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>brown</code></td>
- <td><code>#a52a2a</code></td>
- <td style="background: brown;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>burlywood</code></td>
- <td><code>#deb887</code></td>
- <td style="background: burlywood;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>cadetblue</code></td>
- <td><code>#5f9ea0</code></td>
- <td style="background: cadetblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>chartreuse</code></td>
- <td><code>#7fff00</code></td>
- <td style="background: chartreuse;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>chocolate</code></td>
- <td><code>#d2691e</code></td>
- <td style="background: chocolate;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>coral</code></td>
- <td><code>#ff7f50</code></td>
- <td style="background: coral;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>cornflowerblue</code></td>
- <td><code>#6495ed</code></td>
- <td style="background: cornflowerblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>cornsilk</code></td>
- <td><code>#fff8dc</code></td>
- <td style="background: cornsilk;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>crimson</code></td>
- <td><code>#dc143c</code></td>
- <td style="background: crimson;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>cyan</code><br>
- (synonym of <code>aqua</code>)</td>
- <td><code>#00ffff</code></td>
- <td style="background: cyan;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkblue</code></td>
- <td><code>#00008b</code></td>
- <td style="background: darkblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkcyan</code></td>
- <td><code>#008b8b</code></td>
- <td style="background: darkcyan;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkgoldenrod</code></td>
- <td><code>#b8860b</code></td>
- <td style="background: darkgoldenrod;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkgray</code></td>
- <td><code>#a9a9a9</code></td>
- <td style="background: darkgray;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkgreen</code></td>
- <td><code>#006400</code></td>
- <td style="background: darkgreen;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkgrey</code></td>
- <td><code>#a9a9a9</code></td>
- <td style="background: darkgrey;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkkhaki</code></td>
- <td><code>#bdb76b</code></td>
- <td style="background: darkkhaki;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkmagenta</code></td>
- <td><code>#8b008b</code></td>
- <td style="background: darkmagenta;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkolivegreen</code></td>
- <td><code>#556b2f</code></td>
- <td style="background: darkolivegreen;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkorange</code></td>
- <td><code>#ff8c00</code></td>
- <td style="background: darkorange;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkorchid</code></td>
- <td><code>#9932cc</code></td>
- <td style="background: darkorchid;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkred</code></td>
- <td><code>#8b0000</code></td>
- <td style="background: darkred;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darksalmon</code></td>
- <td><code>#e9967a</code></td>
- <td style="background: darksalmon;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkseagreen</code></td>
- <td><code>#8fbc8f</code></td>
- <td style="background: darkseagreen;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkslateblue</code></td>
- <td><code>#483d8b</code></td>
- <td style="background: darkslateblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkslategray</code></td>
- <td><code>#2f4f4f</code></td>
- <td style="background: darkslategray;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkslategrey</code></td>
- <td><code>#2f4f4f</code></td>
- <td style="background: darkslategrey;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkturquoise</code></td>
- <td><code>#00ced1</code></td>
- <td style="background: darkturquoise;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>darkviolet</code></td>
- <td><code>#9400d3</code></td>
- <td style="background: darkviolet;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>deeppink</code></td>
- <td><code>#ff1493</code></td>
- <td style="background: deeppink;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>deepskyblue</code></td>
- <td><code>#00bfff</code></td>
- <td style="background: deepskyblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>dimgray</code></td>
- <td><code>#696969</code></td>
- <td style="background: dimgray;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>dimgrey</code></td>
- <td><code>#696969</code></td>
- <td style="background: dimgrey;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>dodgerblue</code></td>
- <td><code>#1e90ff</code></td>
- <td style="background: dodgerblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>firebrick</code></td>
- <td><code>#b22222</code></td>
- <td style="background: firebrick;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>floralwhite</code></td>
- <td><code>#fffaf0</code></td>
- <td style="background: floralwhite;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>forestgreen</code></td>
- <td><code>#228b22</code></td>
- <td style="background: forestgreen;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>gainsboro</code></td>
- <td><code>#dcdcdc</code></td>
- <td style="background: gainsboro;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>ghostwhite</code></td>
- <td><code>#f8f8ff</code></td>
- <td style="background: ghostwhite;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>gold</code></td>
- <td><code>#ffd700</code></td>
- <td style="background: gold;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>goldenrod</code></td>
- <td><code>#daa520</code></td>
- <td style="background: goldenrod;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>greenyellow</code></td>
- <td><code>#adff2f</code></td>
- <td style="background: greenyellow ;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>grey</code></td>
- <td><code>#808080</code></td>
- <td style="background: grey;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>honeydew</code></td>
- <td><code>#f0fff0</code></td>
- <td style="background: honeydew;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>hotpink</code></td>
- <td><code>#ff69b4</code></td>
- <td style="background: hotpink;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>indianred</code></td>
- <td><code>#cd5c5c</code></td>
- <td style="background: indianred;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>indigo</code></td>
- <td><code>#4b0082</code></td>
- <td style="background: indigo;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>ivory</code></td>
- <td><code>#fffff0</code></td>
- <td style="background: ivory;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>khaki</code></td>
- <td><code>#f0e68c</code></td>
- <td style="background: khaki;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lavender</code></td>
- <td><code>#e6e6fa</code></td>
- <td style="background: lavender;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lavenderblush</code></td>
- <td><code>#fff0f5</code></td>
- <td style="background: lavenderblush ;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lawngreen</code></td>
- <td><code>#7cfc00</code></td>
- <td style="background: lawngreen;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lemonchiffon</code></td>
- <td><code>#fffacd</code></td>
- <td style="background: lemonchiffon;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lightblue</code></td>
- <td><code>#add8e6</code></td>
- <td style="background: lightblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lightcoral</code></td>
- <td><code>#f08080</code></td>
- <td style="background: lightcoral;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lightcyan</code></td>
- <td><code>#e0ffff</code></td>
- <td style="background: lightcyan;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lightgoldenrodyellow</code></td>
- <td><code>#fafad2</code></td>
- <td style="background: lightgoldenrodyellow ;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lightgray</code></td>
- <td><code>#d3d3d3</code></td>
- <td style="background: lightgray;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lightgreen</code></td>
- <td><code>#90ee90</code></td>
- <td style="background: lightgreen;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lightgrey</code></td>
- <td><code>#d3d3d3</code></td>
- <td style="background: lightgrey;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lightpink</code></td>
- <td><code>#ffb6c1</code></td>
- <td style="background: lightpink;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lightsalmon</code></td>
- <td><code>#ffa07a</code></td>
- <td style="background: lightsalmon;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lightseagreen</code></td>
- <td><code>#20b2aa</code></td>
- <td style="background: lightseagreen;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lightskyblue</code></td>
- <td><code>#87cefa</code></td>
- <td style="background: lightskyblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lightslategray</code></td>
- <td><code>#778899</code></td>
- <td style="background: lightslategray;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lightslategrey</code></td>
- <td><code>#778899</code></td>
- <td style="background: lightslategrey;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lightsteelblue</code></td>
- <td><code>#b0c4de</code></td>
- <td style="background: lightsteelblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>lightyellow</code></td>
- <td><code>#ffffe0</code></td>
- <td style="background: lightyellow;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>limegreen</code></td>
- <td><code>#32cd32</code></td>
- <td style="background: limegreen;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>linen</code></td>
- <td><code>#faf0e6</code></td>
- <td style="background: linen;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>magenta</code><br>
- (synonym of <code>fuchsia</code>)</td>
- <td><code>#ff00ff</code></td>
- <td style="background: magenta;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>mediumaquamarine</code></td>
- <td><code>#66cdaa</code></td>
- <td style="background: mediumaquamarine;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>mediumblue</code></td>
- <td><code>#0000cd</code></td>
- <td style="background: mediumblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>mediumorchid</code></td>
- <td><code>#ba55d3</code></td>
- <td style="background: mediumorchid;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>mediumpurple</code></td>
- <td><code>#9370db</code></td>
- <td style="background: mediumpurple;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>mediumseagreen</code></td>
- <td><code>#3cb371</code></td>
- <td style="background: mediumseagreen;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>mediumslateblue</code></td>
- <td><code>#7b68ee</code></td>
- <td style="background: mediumslateblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>mediumspringgreen</code></td>
- <td><code>#00fa9a</code></td>
- <td style="background: mediumspringgreen;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>mediumturquoise</code></td>
- <td><code>#48d1cc</code></td>
- <td style="background: mediumturquoise;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>mediumvioletred</code></td>
- <td><code>#c71585</code></td>
- <td style="background: mediumvioletred;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>midnightblue</code></td>
- <td><code>#191970</code></td>
- <td style="background: midnightblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>mintcream</code></td>
- <td><code>#f5fffa</code></td>
- <td style="background: mintcream;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>mistyrose</code></td>
- <td><code>#ffe4e1</code></td>
- <td style="background: mistyrose;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>moccasin</code></td>
- <td><code>#ffe4b5</code></td>
- <td style="background: moccasin;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>navajowhite</code></td>
- <td><code>#ffdead</code></td>
- <td style="background: navajowhite;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>oldlace</code></td>
- <td><code>#fdf5e6</code></td>
- <td style="background: oldlace;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>olivedrab</code></td>
- <td><code>#6b8e23</code></td>
- <td style="background: olivedrab;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>orangered</code></td>
- <td><code>#ff4500</code></td>
- <td style="background: orangered;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>orchid</code></td>
- <td><code>#da70d6</code></td>
- <td style="background: orchid;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>palegoldenrod</code></td>
- <td><code>#eee8aa</code></td>
- <td style="background: palegoldenrod;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>palegreen</code></td>
- <td><code>#98fb98</code></td>
- <td style="background: palegreen;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>paleturquoise</code></td>
- <td><code>#afeeee</code></td>
- <td style="background: paleturquoise;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>palevioletred</code></td>
- <td><code>#db7093</code></td>
- <td style="background: palevioletred;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>papayawhip</code></td>
- <td><code>#ffefd5</code></td>
- <td style="background: papayawhip;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>peachpuff</code></td>
- <td><code>#ffdab9</code></td>
- <td style="background: peachpuff;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>peru</code></td>
- <td><code>#cd853f</code></td>
- <td style="background: peru;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>pink</code></td>
- <td><code>#ffc0cb</code></td>
- <td style="background: pink;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>plum</code></td>
- <td><code>#dda0dd</code></td>
- <td style="background: plum;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>powderblue</code></td>
- <td><code>#b0e0e6</code></td>
- <td style="background: powderblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>rosybrown</code></td>
- <td><code>#bc8f8f</code></td>
- <td style="background: rosybrown;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>royalblue</code></td>
- <td><code>#4169e1</code></td>
- <td style="background: royalblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>saddlebrown</code></td>
- <td><code>#8b4513</code></td>
- <td style="background: saddlebrown;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>salmon</code></td>
- <td><code>#fa8072</code></td>
- <td style="background: salmon;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>sandybrown</code></td>
- <td><code>#f4a460</code></td>
- <td style="background: sandybrown;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>seagreen</code></td>
- <td><code>#2e8b57</code></td>
- <td style="background: seagreen;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>seashell</code></td>
- <td><code>#fff5ee</code></td>
- <td style="background: seashell;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>sienna</code></td>
- <td><code>#a0522d</code></td>
- <td style="background: sienna;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>skyblue</code></td>
- <td><code>#87ceeb</code></td>
- <td style="background: skyblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>slateblue</code></td>
- <td><code>#6a5acd</code></td>
- <td style="background: slateblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>slategray</code></td>
- <td><code>#708090</code></td>
- <td style="background: slategray;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>slategrey</code></td>
- <td><code>#708090</code></td>
- <td style="background: slategrey;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>snow</code></td>
- <td><code>#fffafa</code></td>
- <td style="background: snow;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>springgreen</code></td>
- <td><code>#00ff7f</code></td>
- <td style="background: springgreen;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>steelblue</code></td>
- <td><code>#4682b4</code></td>
- <td style="background: steelblue;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>tan</code></td>
- <td><code>#d2b48c</code></td>
- <td style="background: tan;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>thistle</code></td>
- <td><code>#d8bfd8</code></td>
- <td style="background: thistle;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>tomato</code></td>
- <td><code>#ff6347</code></td>
- <td style="background: tomato;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>turquoise</code></td>
- <td><code>#40e0d0</code></td>
- <td style="background: turquoise;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>violet</code></td>
- <td><code>#ee82ee</code></td>
- <td style="background: violet;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>wheat</code></td>
- <td><code>#f5deb3</code></td>
- <td style="background: wheat;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>whitesmoke</code></td>
- <td><code>#f5f5f5</code></td>
- <td style="background: whitesmoke;"></td>
- </tr>
- <tr>
- <td style="text-align: center;"><code>yellowgreen</code></td>
- <td><code>#9acd32</code></td>
- <td style="background: yellowgreen;"></td>
- </tr>
- <tr>
- <td>{{SpecName("CSS4 Colors")}}</td>
- <td style="text-align: center;"><a href="https://en.wikipedia.org/wiki/Eric_A._Meyer#Personal_life"><code>rebeccapurple</code></a></td>
- <td><code>#663399</code></td>
- <td style="background: rebeccapurple;"></td>
- </tr>
- </tbody>
+{{CSSRef}}
+
+**`<color>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、一つの色を表します。
+`<color>` は[アルファチャネル](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%AB%E3%83%95%E3%82%A1%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB)*透過値*を含むことがあり、この色を背景とどれだけ<a class="external" href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">合成</a>するかを示すこともできます。
+
+`<color>` は以下の何れかの方法で定義することができます。
+
+- キーワードを使用すること (`blue` や `transparent` など)。既存のキーワードはすべて、[sRGB 色空間](https://en.wikipedia.org/wiki/SRGB)内の色で定められています。
+- [RGB 立方体座標方式](https://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation)の使用 (# + 16 進数値や、`rgb()` や `rgba()` の関数表記による)。
+ これらは常に[sRGB 色空間](https://en.wikipedia.org/wiki/SRGB)内の色で定められます。
+- [HSL 円筒座標系](https://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93) の使用 ({{cssxref("color_value/hsl()","hsl()")}} や {{cssxref("color_value/hsla()","hsla()")}} の関数表記による)
+ これらは常に[sRGB 色空間](https://en.wikipedia.org/wiki/SRGB)内の色で定められます。
+- [LCH 円筒座標系](https://ja.wikipedia.org/wiki/CIE_Luv%E8%89%B2%E7%A9%BA%E9%96%93#%E5%86%86%E7%AD%92%E5%BA%A7%E6%A8%99%E7%B3%BB%E3%81%AB%E3%82%88%E3%82%8B%E8%A1%A8%E7%8F%BE_(CIELCH))の使用 ({{cssxref("color_value/lch()","lch()")}} 関数表記による)
+ これは任意の視覚可能な色を指定することができます。
+- [Lab 座標系](https://ja.wikipedia.org/wiki/Lab%E8%89%B2%E7%A9%BA%E9%96%93) ({{cssxref("color_value/lab()","lab()")}} 関数表記による)
+ これは任意の視覚可能な色を指定することができます。
+- {{cssxref("color_value/color()","color()")}} 関数表記を使用して、様々な定義済みまたは独自の色空間で色を指定することができます。
+
+> **Note:** この記事は `<color>` データ型の詳細を説明しています。 HTML での色の使い方について詳しくは、 [CSS を使用した HTML 要素への色の適用](/ja/docs/Web/HTML/Applying_color)を参照してください。
+
+## 構文
+
+`<color>` データ型は以下のいずれか1つの方法を使って指定されます。
+
+> **Note:** `<color>` の色は詳細に定義されていますが、出力機器によって (時には著しく) 違って見えるかもしれません。出力機器の大半は色補正がされておらず、ブラウザーによっては出力機器の[色プロファイル](https://ja.wikipedia.org/wiki/ICC%E3%83%97%E3%83%AD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB)に対応していないからです。
+
+### 色キーワード
+
+色キーワードは大文字と小文字の区別をしない識別子で、特定の色を表します。例えば `red`, `blue`, `black`, `lightseagreen` といったものです。色名は多少なりとそれぞれの色を説明していますが、ほとんどは基本的に人工的であり、名前の仕様について強い根拠はありません。
+
+キーワードを使うとき、考慮すべき点がいくつかあります。
+
+- [HTML](/ja/docs/Web/HTML) は CSS1 に見られる基本 16 色のみを解釈し、解釈できない値を (ふつう完全に違う色に) 変換する際は特定のアルゴリズムを使用します。その他の色キーワードは CSS および [SVG](/ja/docs/Web/SVG) のみで使用してください。
+- HTML とは異なり、 CSS では未知のキーワードは完全に無視されます。
+- CSS のキーワード定義された色はどれも透明度を持たず、完全に不透明な色です。
+- 同じ色を表すキーワードがいくつかあります。
+
+ - `aqua` / `cyan`
+ - `fuchsia` / `magenta`
+ - `darkgray` / `darkgrey`
+ - `darkslategray` / `darkslategrey`
+ - `dimgray` / `dimgrey`
+ - `lightgray` / `lightgrey`
+ - `lightslategray` / `lightslategrey`
+ - `gray` / `grey`
+ - `slategray` / `slategrey`
+
+- キーワードは [X11](https://ja.wikipedia.org/wiki/X_Window_System) の色名からとられたものですが、メーカーが X11 の色を特定のハードウェアに合わせて変えていることがあるので、 RGB 値は X11 システムでの色とは異なる可能性があります。
+
+> **Note:** 利用可能なキーワードの一覧は、様々な CSS の仕様書によって異なります。
+>
+> - CSS Level 1 では基本的な 16 色だけを受け付けていました。これは *VGA 色*と呼ばれ、[VGA](https://ja.wikipedia.org/wiki/Video_Graphics_Array) グラフィックカードで表示可能な色です。
+> - CSS Level 2 では `orange` キーワードが追加されました。
+> - 初期のブラウザーでは仕様にない様々な色 (主に X11 色リストからの転用) に対応していましたが、正式に定義されたのは SVG 1.0 と CSS Colors Level 3 からでした。これらはよく*拡張色キーワード*、*X11 色*、*SVG 色*と呼ばれます。
+> - CSS Colors Level 4 では [ウェブのパイオニア、エリック・メイヤーに敬意を表して](https://codepen.io/trezy/post/honoring-a-great-man) `rebeccapurple` のキーワードを追加しました。
+
+<table>
+ <thead>
+ <tr>
+ <th scope="col">仕様書</th>
+ <th scope="col">キーワード</th>
+ <th scope="col">RGB 16 進表記</th>
+ <th scope="col">例</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr style="position: relative">
+ <td rowspan="16">{{SpecName("CSS1")}}</td>
+ <td style="text-align: center"><code>black</code></td>
+ <td><code>#000000</code></td>
+ <td style="background: black"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>silver</code></td>
+ <td><code>#c0c0c0</code></td>
+ <td style="background: silver"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>gray</code></td>
+ <td><code>#808080</code></td>
+ <td style="background: gray"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>white</code></td>
+ <td><code>#ffffff</code></td>
+ <td style="background: white"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>maroon</code></td>
+ <td><code>#800000</code></td>
+ <td style="background: maroon"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>red</code></td>
+ <td><code>#ff0000</code></td>
+ <td style="background: red"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>purple</code></td>
+ <td><code>#800080</code></td>
+ <td style="background: purple"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>fuchsia</code></td>
+ <td><code>#ff00ff</code></td>
+ <td style="background: fuchsia"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>green</code></td>
+ <td><code>#008000</code></td>
+ <td style="background: green"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lime</code></td>
+ <td><code>#00ff00</code></td>
+ <td style="background: lime"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>olive</code></td>
+ <td><code>#808000</code></td>
+ <td style="background: olive"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>yellow</code></td>
+ <td><code>#ffff00</code></td>
+ <td style="background: yellow"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>navy</code></td>
+ <td><code>#000080</code></td>
+ <td style="background: navy"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>blue</code></td>
+ <td><code>#0000ff</code></td>
+ <td style="background: blue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>teal</code></td>
+ <td><code>#008080</code></td>
+ <td style="background: teal"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>aqua</code></td>
+ <td><code>#00ffff</code></td>
+ <td style="background: aqua"></td>
+ </tr>
+ <tr>
+ <td>{{SpecName("CSS2.1")}}</td>
+ <td style="text-align: center"><code>orange</code></td>
+ <td><code>#ffa500</code></td>
+ <td style="background: orange"></td>
+ </tr>
+ <tr>
+ <td rowspan="130">{{SpecName("CSS3 Colors")}}</td>
+ <td style="text-align: center"><code>aliceblue</code></td>
+ <td><code>#f0f8ff</code></td>
+ <td style="background: aliceblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>antiquewhite</code></td>
+ <td><code>#faebd7</code></td>
+ <td style="background: antiquewhite"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>aquamarine</code></td>
+ <td><code>#7fffd4</code></td>
+ <td style="background: aquamarine"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>azure</code></td>
+ <td><code>#f0ffff</code></td>
+ <td style="background: azure"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>beige</code></td>
+ <td><code>#f5f5dc</code></td>
+ <td style="background: beige"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>bisque</code></td>
+ <td><code>#ffe4c4</code></td>
+ <td style="background: bisque"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>blanchedalmond</code></td>
+ <td><code>#ffebcd</code></td>
+ <td style="background: blanchedalmond"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>blueviolet</code></td>
+ <td><code>#8a2be2</code></td>
+ <td style="background: blueviolet"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>brown</code></td>
+ <td><code>#a52a2a</code></td>
+ <td style="background: brown"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>burlywood</code></td>
+ <td><code>#deb887</code></td>
+ <td style="background: burlywood"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>cadetblue</code></td>
+ <td><code>#5f9ea0</code></td>
+ <td style="background: cadetblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>chartreuse</code></td>
+ <td><code>#7fff00</code></td>
+ <td style="background: chartreuse"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>chocolate</code></td>
+ <td><code>#d2691e</code></td>
+ <td style="background: chocolate"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>coral</code></td>
+ <td><code>#ff7f50</code></td>
+ <td style="background: coral"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>cornflowerblue</code></td>
+ <td><code>#6495ed</code></td>
+ <td style="background: cornflowerblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>cornsilk</code></td>
+ <td><code>#fff8dc</code></td>
+ <td style="background: cornsilk"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>crimson</code></td>
+ <td><code>#dc143c</code></td>
+ <td style="background: crimson"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center">
+ <code>cyan</code><br />(<code>aqua</code> の同義語)
+ </td>
+ <td><code>#00ffff</code></td>
+ <td style="background: cyan"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkblue</code></td>
+ <td><code>#00008b</code></td>
+ <td style="background: darkblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkcyan</code></td>
+ <td><code>#008b8b</code></td>
+ <td style="background: darkcyan"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkgoldenrod</code></td>
+ <td><code>#b8860b</code></td>
+ <td style="background: darkgoldenrod"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkgray</code></td>
+ <td><code>#a9a9a9</code></td>
+ <td style="background: darkgray"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkgreen</code></td>
+ <td><code>#006400</code></td>
+ <td style="background: darkgreen"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkgrey</code></td>
+ <td><code>#a9a9a9</code></td>
+ <td style="background: darkgrey"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkkhaki</code></td>
+ <td><code>#bdb76b</code></td>
+ <td style="background: darkkhaki"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkmagenta</code></td>
+ <td><code>#8b008b</code></td>
+ <td style="background: darkmagenta"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkolivegreen</code></td>
+ <td><code>#556b2f</code></td>
+ <td style="background: darkolivegreen"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkorange</code></td>
+ <td><code>#ff8c00</code></td>
+ <td style="background: darkorange"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkorchid</code></td>
+ <td><code>#9932cc</code></td>
+ <td style="background: darkorchid"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkred</code></td>
+ <td><code>#8b0000</code></td>
+ <td style="background: darkred"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darksalmon</code></td>
+ <td><code>#e9967a</code></td>
+ <td style="background: darksalmon"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkseagreen</code></td>
+ <td><code>#8fbc8f</code></td>
+ <td style="background: darkseagreen"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkslateblue</code></td>
+ <td><code>#483d8b</code></td>
+ <td style="background: darkslateblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkslategray</code></td>
+ <td><code>#2f4f4f</code></td>
+ <td style="background: darkslategray"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkslategrey</code></td>
+ <td><code>#2f4f4f</code></td>
+ <td style="background: darkslategrey"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkturquoise</code></td>
+ <td><code>#00ced1</code></td>
+ <td style="background: darkturquoise"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>darkviolet</code></td>
+ <td><code>#9400d3</code></td>
+ <td style="background: darkviolet"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>deeppink</code></td>
+ <td><code>#ff1493</code></td>
+ <td style="background: deeppink"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>deepskyblue</code></td>
+ <td><code>#00bfff</code></td>
+ <td style="background: deepskyblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>dimgray</code></td>
+ <td><code>#696969</code></td>
+ <td style="background: dimgray"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>dimgrey</code></td>
+ <td><code>#696969</code></td>
+ <td style="background: dimgrey"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>dodgerblue</code></td>
+ <td><code>#1e90ff</code></td>
+ <td style="background: dodgerblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>firebrick</code></td>
+ <td><code>#b22222</code></td>
+ <td style="background: firebrick"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>floralwhite</code></td>
+ <td><code>#fffaf0</code></td>
+ <td style="background: floralwhite"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>forestgreen</code></td>
+ <td><code>#228b22</code></td>
+ <td style="background: forestgreen"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>gainsboro</code></td>
+ <td><code>#dcdcdc</code></td>
+ <td style="background: gainsboro"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>ghostwhite</code></td>
+ <td><code>#f8f8ff</code></td>
+ <td style="background: ghostwhite"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>gold</code></td>
+ <td><code>#ffd700</code></td>
+ <td style="background: gold"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>goldenrod</code></td>
+ <td><code>#daa520</code></td>
+ <td style="background: goldenrod"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>greenyellow</code></td>
+ <td><code>#adff2f</code></td>
+ <td style="background: greenyellow"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>grey</code></td>
+ <td><code>#808080</code></td>
+ <td style="background: grey"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>honeydew</code></td>
+ <td><code>#f0fff0</code></td>
+ <td style="background: honeydew"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>hotpink</code></td>
+ <td><code>#ff69b4</code></td>
+ <td style="background: hotpink"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>indianred</code></td>
+ <td><code>#cd5c5c</code></td>
+ <td style="background: indianred"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>indigo</code></td>
+ <td><code>#4b0082</code></td>
+ <td style="background: indigo"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>ivory</code></td>
+ <td><code>#fffff0</code></td>
+ <td style="background: ivory"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>khaki</code></td>
+ <td><code>#f0e68c</code></td>
+ <td style="background: khaki"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lavender</code></td>
+ <td><code>#e6e6fa</code></td>
+ <td style="background: lavender"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lavenderblush</code></td>
+ <td><code>#fff0f5</code></td>
+ <td style="background: lavenderblush"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lawngreen</code></td>
+ <td><code>#7cfc00</code></td>
+ <td style="background: lawngreen"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lemonchiffon</code></td>
+ <td><code>#fffacd</code></td>
+ <td style="background: lemonchiffon"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lightblue</code></td>
+ <td><code>#add8e6</code></td>
+ <td style="background: lightblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lightcoral</code></td>
+ <td><code>#f08080</code></td>
+ <td style="background: lightcoral"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lightcyan</code></td>
+ <td><code>#e0ffff</code></td>
+ <td style="background: lightcyan"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lightgoldenrodyellow</code></td>
+ <td><code>#fafad2</code></td>
+ <td style="background: lightgoldenrodyellow"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lightgray</code></td>
+ <td><code>#d3d3d3</code></td>
+ <td style="background: lightgray"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lightgreen</code></td>
+ <td><code>#90ee90</code></td>
+ <td style="background: lightgreen"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lightgrey</code></td>
+ <td><code>#d3d3d3</code></td>
+ <td style="background: lightgrey"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lightpink</code></td>
+ <td><code>#ffb6c1</code></td>
+ <td style="background: lightpink"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lightsalmon</code></td>
+ <td><code>#ffa07a</code></td>
+ <td style="background: lightsalmon"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lightseagreen</code></td>
+ <td><code>#20b2aa</code></td>
+ <td style="background: lightseagreen"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lightskyblue</code></td>
+ <td><code>#87cefa</code></td>
+ <td style="background: lightskyblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lightslategray</code></td>
+ <td><code>#778899</code></td>
+ <td style="background: lightslategray"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lightslategrey</code></td>
+ <td><code>#778899</code></td>
+ <td style="background: lightslategrey"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lightsteelblue</code></td>
+ <td><code>#b0c4de</code></td>
+ <td style="background: lightsteelblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>lightyellow</code></td>
+ <td><code>#ffffe0</code></td>
+ <td style="background: lightyellow"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>limegreen</code></td>
+ <td><code>#32cd32</code></td>
+ <td style="background: limegreen"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>linen</code></td>
+ <td><code>#faf0e6</code></td>
+ <td style="background: linen"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center">
+ <code>magenta</code><br />(<code>fuchsia</code> の同義語)
+ </td>
+ <td><code>#ff00ff</code></td>
+ <td style="background: magenta"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>mediumaquamarine</code></td>
+ <td><code>#66cdaa</code></td>
+ <td style="background: mediumaquamarine"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>mediumblue</code></td>
+ <td><code>#0000cd</code></td>
+ <td style="background: mediumblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>mediumorchid</code></td>
+ <td><code>#ba55d3</code></td>
+ <td style="background: mediumorchid"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>mediumpurple</code></td>
+ <td><code>#9370db</code></td>
+ <td style="background: mediumpurple"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>mediumseagreen</code></td>
+ <td><code>#3cb371</code></td>
+ <td style="background: mediumseagreen"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>mediumslateblue</code></td>
+ <td><code>#7b68ee</code></td>
+ <td style="background: mediumslateblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>mediumspringgreen</code></td>
+ <td><code>#00fa9a</code></td>
+ <td style="background: mediumspringgreen"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>mediumturquoise</code></td>
+ <td><code>#48d1cc</code></td>
+ <td style="background: mediumturquoise"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>mediumvioletred</code></td>
+ <td><code>#c71585</code></td>
+ <td style="background: mediumvioletred"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>midnightblue</code></td>
+ <td><code>#191970</code></td>
+ <td style="background: midnightblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>mintcream</code></td>
+ <td><code>#f5fffa</code></td>
+ <td style="background: mintcream"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>mistyrose</code></td>
+ <td><code>#ffe4e1</code></td>
+ <td style="background: mistyrose"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>moccasin</code></td>
+ <td><code>#ffe4b5</code></td>
+ <td style="background: moccasin"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>navajowhite</code></td>
+ <td><code>#ffdead</code></td>
+ <td style="background: navajowhite"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>oldlace</code></td>
+ <td><code>#fdf5e6</code></td>
+ <td style="background: oldlace"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>olivedrab</code></td>
+ <td><code>#6b8e23</code></td>
+ <td style="background: olivedrab"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>orangered</code></td>
+ <td><code>#ff4500</code></td>
+ <td style="background: orangered"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>orchid</code></td>
+ <td><code>#da70d6</code></td>
+ <td style="background: orchid"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>palegoldenrod</code></td>
+ <td><code>#eee8aa</code></td>
+ <td style="background: palegoldenrod"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>palegreen</code></td>
+ <td><code>#98fb98</code></td>
+ <td style="background: palegreen"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>paleturquoise</code></td>
+ <td><code>#afeeee</code></td>
+ <td style="background: paleturquoise"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>palevioletred</code></td>
+ <td><code>#db7093</code></td>
+ <td style="background: palevioletred"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>papayawhip</code></td>
+ <td><code>#ffefd5</code></td>
+ <td style="background: papayawhip"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>peachpuff</code></td>
+ <td><code>#ffdab9</code></td>
+ <td style="background: peachpuff"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>peru</code></td>
+ <td><code>#cd853f</code></td>
+ <td style="background: peru"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>pink</code></td>
+ <td><code>#ffc0cb</code></td>
+ <td style="background: pink"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>plum</code></td>
+ <td><code>#dda0dd</code></td>
+ <td style="background: plum"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>powderblue</code></td>
+ <td><code>#b0e0e6</code></td>
+ <td style="background: powderblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>rosybrown</code></td>
+ <td><code>#bc8f8f</code></td>
+ <td style="background: rosybrown"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>royalblue</code></td>
+ <td><code>#4169e1</code></td>
+ <td style="background: royalblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>saddlebrown</code></td>
+ <td><code>#8b4513</code></td>
+ <td style="background: saddlebrown"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>salmon</code></td>
+ <td><code>#fa8072</code></td>
+ <td style="background: salmon"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>sandybrown</code></td>
+ <td><code>#f4a460</code></td>
+ <td style="background: sandybrown"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>seagreen</code></td>
+ <td><code>#2e8b57</code></td>
+ <td style="background: seagreen"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>seashell</code></td>
+ <td><code>#fff5ee</code></td>
+ <td style="background: seashell"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>sienna</code></td>
+ <td><code>#a0522d</code></td>
+ <td style="background: sienna"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>skyblue</code></td>
+ <td><code>#87ceeb</code></td>
+ <td style="background: skyblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>slateblue</code></td>
+ <td><code>#6a5acd</code></td>
+ <td style="background: slateblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>slategray</code></td>
+ <td><code>#708090</code></td>
+ <td style="background: slategray"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>slategrey</code></td>
+ <td><code>#708090</code></td>
+ <td style="background: slategrey"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>snow</code></td>
+ <td><code>#fffafa</code></td>
+ <td style="background: snow"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>springgreen</code></td>
+ <td><code>#00ff7f</code></td>
+ <td style="background: springgreen"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>steelblue</code></td>
+ <td><code>#4682b4</code></td>
+ <td style="background: steelblue"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>tan</code></td>
+ <td><code>#d2b48c</code></td>
+ <td style="background: tan"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>thistle</code></td>
+ <td><code>#d8bfd8</code></td>
+ <td style="background: thistle"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>tomato</code></td>
+ <td><code>#ff6347</code></td>
+ <td style="background: tomato"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>turquoise</code></td>
+ <td><code>#40e0d0</code></td>
+ <td style="background: turquoise"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>violet</code></td>
+ <td><code>#ee82ee</code></td>
+ <td style="background: violet"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>wheat</code></td>
+ <td><code>#f5deb3</code></td>
+ <td style="background: wheat"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>whitesmoke</code></td>
+ <td><code>#f5f5f5</code></td>
+ <td style="background: whitesmoke"></td>
+ </tr>
+ <tr>
+ <td style="text-align: center"><code>yellowgreen</code></td>
+ <td><code>#9acd32</code></td>
+ <td style="background: yellowgreen"></td>
+ </tr>
+ <tr>
+ <td>{{SpecName("CSS4 Colors")}}</td>
+ <td style="text-align: center">
+ <a href="https://en.wikipedia.org/wiki/Eric_A._Meyer#Personal_life"
+ ><code>rebeccapurple</code></a
+ >
+ </td>
+ <td><code>#663399</code></td>
+ <td style="background: rebeccapurple"></td>
+ </tr>
+ </tbody>
</table>
-<h3 id="transparent_keyword" name="transparent_keyword"><code id="transparent">transparent</code> キーワード</h3>
+### `transparent` キーワード
-<p><code>transparent</code> は完全な透明色を表すキーワードです。この色が付いた項目の背後の背景は完全に見えます。厳密にはこれはアルファチャンネルに最大値を持つ黒色で、計算値<code> rgba(0,0,0,0)</code> へのショートカットです。</p>
+`transparent` は完全な透明色を表すキーワードです。この色が付いた項目の背後の背景は完全に見えます。厳密には、`transparent` は `rgba(0,0,0,0)` のショートカットです。
-<div class="note">
-<p><strong>互換性のメモ:</strong> {{cssxref("gradient","グラデーション")}}の場合の同様、予期しない動きを避けるために、現在の CSS の仕様書は <code>transparent</code> を<a href="https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax">アルファ乗算色空間</a>で計算するように定めています。しかし、古いブラウザーはアルファ―チャンネルが <code>0</code> の値である黒として扱うかもしれません。</p>
-</div>
+> **Note:** {{cssxref("gradient","グラデーション")}}の場合の同様、予期しない動きを避けるために、現在の CSS の仕様書は `transparent` を[アルファ乗算色空間](https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax)で計算するように定めています。しかし、古いブラウザーはアルファチャンネルが `0` の値である黒として扱うかもしれません。
-<div class="note">
-<p><strong>歴史的なメモ:</strong> <code>transparent</code> キーワードは CSS Level 2 (Revision 1) では色ではありませんでした。これは {{Cssxref("background")}} プロパティと {{Cssxref("border")}} プロパティの2つにおいて、通常の <code>&lt;color&gt;</code> の代わりに使用することができた特殊なキーワードでした。基本的に、継承された色を開発者が上書きすることができるように追加されたものです。 CSS Colors Level 3 でアルファチャンネルが出現し、 <code>transparent</code> は色として再定義されました。 <code>&lt;color&gt;</code> の値を使用することができる場所ならば、どこでも使用することができるようになりました。</p>
-</div>
+> **Note:** `transparent` キーワードは CSS Level 2 (Revision 1) では色ではありませんでした。これは {{Cssxref("background")}} プロパティと {{Cssxref("border")}} プロパティの 2 つにおいて、通常の `<color>` の代わりに使用することができた特殊なキーワードでした。基本的に、継承された色を開発者が上書きすることができるように追加されたものです。 CSS Colors Level 3 でアルファチャンネルが出現し、 `transparent` は色として再定義されました。 `<color>` の値を使用することができる場所ならば、どこでも使用することができるようになりました。
-<h3 id="currentcolor_keyword" name="currentcolor_keyword"><code id="currentColor">currentcolor</code> キーワード</h3>
+### `currentColor` キーワード
-<p><code>currentcolor</code> キーワードは、要素の {{Cssxref("color")}} プロパティの値を表します。これで <code>color</code> の値をプロパティが既定で受け取らなくても利用することができます。</p>
+`currentColor` キーワードは、要素の {{Cssxref("color")}} プロパティの値を表します。これで `color` の値をプロパティが既定で受け取らなくても利用することができます。
-<p><code>currentcolor</code> が <code>color</code> プロパティの値として使用された場合、 <code>color</code> プロパティが継承した値が使用されます。</p>
+`currentColor` が `color` プロパティの値として使用された場合、 `color` プロパティが継承した値が使用されます。
-<h4 id="currentcolor_example" name="currentcolor_example">currentcolor の例</h4>
+<h4 id="currentColor_example">currentcolor の例</h4>
-<h5 id="HTML">HTML</h5>
-
-<pre class="brush: html">&lt;div style="color:blue; border: 1px dashed currentcolor;"&gt;
+```html
+<div style="color:blue; border: 1px dashed currentColor;">
この文字列の色は青です。
- &lt;div style="background:currentcolor; height:9px;"&gt;&lt;/div&gt;
+ <div style="background:currentColor; height:9px;"></div>
このブロックは青い境界線で囲まれています。
-&lt;/div&gt;</pre>
-
-<h5 id="Result" name="Result">結果</h5>
-
-<p>{{EmbedLiveSample('currentcolor_example')}}</p>
-
-<h3 id="RGB_色">RGB 色</h3>
-
-<p>RGB 色モデルは赤、緑、青の成分によって指定された色を定義します。任意のアルファ成分は色の透過性を表します。</p>
-
-<h4 id="Syntax_2" name="Syntax_2">構文</h4>
-
-<p>RGB 色は16進表記 (<code>#</code> の接頭辞つき) と関数表記 (<code id="rgb()">rgb()</code>, <code id="rgba()">rgba()</code>) の両方で表すことができます。</p>
-
-<div class="note">
-<p><strong>メモ:</strong> CSS Colors Level 4 では、 <code>rgba()</code> は <code>rgb()</code> の別名です。 Level 4 標準を実装するブラウザーでは、同じ引数を受け取り同じ挙動をします。</p>
</div>
+```
-<dl>
- <dt>16進表記: <code>#RRGGBB[AA]</code></dt>
- <dd><code>R</code> (赤)、 <code>G</code> (緑)、 <code>B</code> (青) と <code>A</code> (アルファ) は16進数の文字 (0–9, A–F) です。 <code>A</code> は任意です。例えば、 <code>#ff0000</code> は <code>#ff0000ff</code> と同等です。</dd>
- <dt>16進表記: <code>#RGB[A]</code></dt>
- <dd><code>R</code> (赤)、 <code>G</code> (緑)、 <code>B</code> (青) と <code>A</code> (アルファ) は16進数の文字 (0–9, A–F) です。 <code>A</code> は任意です。3桁表記 (<code>#RGB</code>) は6桁形式 (<code>#RRGGBB</code>) を短縮したものです。例えば、 <code>#f09</code> は <code>#ff0099</code> と同じ色です。同様に、4桁の RGB 表記 (<code>#RGBA</code>) は8桁形式 (<code>#RRGGBBAA</code>) を短縮したものです。例えば、 <code>#0f38</code> は <code>#00ff3388</code> と同じ色です。</dd>
- <dt>関数表記: <code>rgb[a](R, G, B[, A])</code></dt>
- <dd><code>R</code> (赤)、 <code>G</code> (緑)、 <code>B</code> (青) は {{cssxref("&lt;number&gt;", "数値")}}または{{cssxref("&lt;percentage&gt;", "パーセント表記")}}のどちらかで、<code>255</code>が<code>100%</code>に対応します。 <code>A</code> (アルファ)は<code>0</code>と<code>1</code>の間の{{cssxref("&lt;number&gt;", "数値")}}、または{{cssxref("&lt;percentage&gt;", "パーセント表記")}}で、数値<code>1</code>が<code>100%</code> (不透明) です。</dd>
- <dt>関数表記: <code>rgb[a](R G B[ / A])</code></dt>
- <dd>CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。</dd>
-</dl>
-
-<h4 id="Examples" name="Examples">例</h4>
-
-<h5 id="RGB_syntax_variations" name="RGB_syntax_variations">様々な RGB 構文</h5>
+{{EmbedLiveSample('currentColor_example', 600, 80)}}
-<p>この例は、一つの色を RGB 色構文で生成することができる様々な方法を示しています。</p>
+### RGB 色
-<pre>/* これらの様々な構文は、すべて同じ色、不透明な濃いピンク色を指定します。 */
+RGB 色モデルは赤、緑、青の成分によって指定された[sRGB 色空間](https://en.wikipedia.org/wiki/SRGB)内の色を定義します。アルファ成分は任意で、色の透過性を表します。
+
+#### 構文
+
+RGB 色は 16 進表記 (`#` の接頭辞つき) と関数表記 (`rgb()`, `rgba()`) の両方で表現することができます。
+
+> **Note:** CSS Colors Level 4 では、 `rgba()` は `rgb()` の別名です。 Level 4 標準を実装するブラウザーでは、同じ引数を受け取り同じ挙動をします。
+
+- 16 進表記: `#RRGGBB[AA]`
+ - : `R` (赤)、 `G` (緑)、 `B` (青) と `A` (アルファ) は 16 進数の文字 (0–9, A–F) です。 `A` は任意です。例えば、 `#ff0000` は `#ff0000ff` と同等です。
+- 16 進表記: `#RGB[A]`
+ - : `R` (赤)、 `G` (緑)、 `B` (青) と `A` (アルファ) は 16 進数の文字 (0–9, A–F) です。 `A` は任意です。3 桁表記 (`#RGB`) は 6 桁形式 (`#RRGGBB`) を短縮したものです。例えば、 `#f09` は `#ff0099` と同じ色です。同様に、4 桁の RGB 表記 (`#RGBA`) は8桁形式 (`#RRGGBBAA`) を短縮したものです。例えば、 `#0f38` は `#00ff3388` と同じ色です。
+- 関数表記: `rgb[a](R, G, B[, A])`
+ - : `R` (赤)、 `G` (緑)、 `B` (青) は {{cssxref("&lt;number&gt;")}} または {{cssxref("&lt;percentage&gt;")}} のどちらかで、`255` が `100%` に対応します。 `A` (アルファ) は `0` と `1` の間の {{cssxref("&lt;number&gt;")}} 、または {{cssxref("&lt;percentage&gt;")}} で、数値 `1` が `100%` (不透明) です。
+- 関数表記: `rgb[a](R G B[ / A])`
+ - : CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。
+
+### HSL 色
+
+HSL 色モデルは色相 (H)、彩度 (S)、明度 (L) の各成分によって与えられた[sRGB 色空間](https://en.wikipedia.org/wiki/SRGB)内の色を定義します。アルファ成分は任意で、色の透過性を表します。
+
+HSL は、色相、彩度、明度をそれぞれ独立して調整できるため、RGB よりも直感的であると感じるデザイナーが多いようです。また、HSL を使用することで、同じ色のセットを簡単に作成することができます (同じ色相で複数の影を作成する場合など)。
+しかし、HSL を使用して色のバリエーションを作成すると、[知覚的に均一ではない](https://ja.wikipedia.org/wiki/%E8%89%B2%E5%B7%AE#%E8%A8%B1%E5%AE%B9%E5%80%A4)ため、驚くような結果になることがあります。たとえば、 `hsl(240 100% 50%)` と `hsl(60 100% 50%)` は、明度が同じであるにもかかわらず、前者が後者よりもはるかに暗くなります。
+
+#### 構文
+
+HSL 色は関数表記の `hsl()` および `hsla()` を通して表現されます。
+
+> **Note:** CSS Colors Level 4 では、 `hsla()` は `hsl()` の別名です。 Level 4 標準を実装するブラウザーでは、同じ引数を受け取り同じ挙動をします。
+
+- 関数表記: `hsl[a](H, S, L[, A])`
+
+ - : `H` (色相) は色相環の{{cssxref("&lt;angle&gt;", "角度")}}を {{SpecName("CSS4 Colors","#the-hsl-notation")}} で定義されている `deg`、 `rad`、 `grad`、 `turn` の単位で与えます。単位のない{{cssxref("&lt;number&gt;", "数値")}}の場合は、 {{SpecName("CSS3 Colors", "#hsl-color")}} で定められている通り deg (度) として扱われます。定義では、赤=0deg=360deg であり、他の色は、緑=120deg、 青=240deg、 などのように色相環を回ります。 `<angle>` は暗黙的に周回するので、 -120deg=240deg、 480deg=120deg、 -1turn=1turn のようになります。
+
+ `S` (彩度) と `L` (明度) はパーセント表記です。**彩度**`100%`は完全に鮮やかな色で、彩度`0%`は完全に薄い色 (灰色) です。**明度**`100%`は白で、明度`0%`は黒で、明度`50%`は「普通」です。
+
+ `A` (アルファ)は`0`と`1`の間の{{cssxref("&lt;number&gt;")}}、または{{cssxref("&lt;percentage&gt;")}}で、数値`1`が`100%` (不透明) です。
+
+- 関数表記: `hsl[a](H S L[ / A])`
+ - : CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。
+
+### システム色
+
+*色強制モード* ([forced-colors](/ja/docs/Web/CSS/@media/forced-colors) メディアクエリーで検出可能) では、多くの色がユーザーまたはブラウザーが定義したパレットに制約されます。これらのシステム色は以下のキーワードで公開されており、ページの残りの部分が制限されたパレットにうまく合わせられることを保証するために使用することができます。これらの値は他のコンテキストでも使用できますが、ブラウザーの対応は限定的です。
+
+以下のリストにあるキーワードは、 CSS Color Module Level 4 仕様書で定義されています。
+
+> **Note:** なお、これらのキーワードは*大文字小文字を区別しません*が、読みやすさのために大文字小文字を交ぜて表記しています。
+
+- ActiveText
+ - : アクティブなリンクのテキスト
+- ButtonFace
+ - : プッシュボタンの背景
+- ButtonText
+ - : プッシュボタンのテキスト
+- Canvas
+ - : アプリケーションのコンテンツや文書の背景
+- CanvasText
+ - : アプリケーションのコンテンツや文書のテキスト
+- Field
+ - : 入力フィールドの背景
+- FieldText
+ - : 入力フィールドのテキスト
+- GrayText
+ - : 無効なテキスト
+- Highlight
+ - : コントロールの中で選択されているアイテムの背景
+- HighlightText
+ - : コントロールの中で選択されているアイテムのテキスト
+- LinkText
+ - : アクティブではない、訪問していないリンクのテキスト
+- Mark
+ - : (HTML の `mark` 要素のように) 特別なマークが付けられたテキストの背景
+- MarkText
+ - : (HTML の `mark` 要素のように) 特別にマークされたテキスト
+- VisitedText
+ - : 訪問済みのリンクのテキスト
+
+#### 非推奨のシステム色のキーワード
+
+以下のキーワードは、 CSS Color モジュールの初期の版で定義されていました。これらは非推奨になりました。公開ウェブページでの使用は {{deprecated_inline}} です。
+
+- ActiveBorder
+ - : アクティブウィンドウの境界線。
+- ActiveCaption
+ - : アクティブウィンドウのキャプション。 `CaptionText` を前景色として使用してください。
+- AppWorkspace
+ - : 複数文書インターフェイス (MDI) の背景色。
+- Background
+ - : デスクトップの背景です。
+- ButtonHighlight
+ - : 周囲の境界線の層によって立体的に見える 3D 要素の、光源に面した境界線の色です。
+- ButtonShadow
+ - : 周囲の境界線の層によって立体的に見える 3D 要素の、光源から離れた境界線の色です。
+- CaptionText
+ - : キャプションの文字列、サイズ変更ボックス、スクロールバーの矢印ボックスの文字列です。 `ActiveCaption` を背景色として使用してください。
+- InactiveBorder
+ - : 非アクティブウィンドウの境界線です。
+- InactiveCaption
+ - : 非アクティブウィンドウのキャプションです。 `InactiveCaptionText` を前景色に使用してください。
+- InactiveCaptionText
+ - : 非アクティブなキャプションの文字列の色です。 `InactiveCaption` を背景色に使用してください。
+- InfoBackground
+ - : ツールチップコントロールの背景色です。 `InfoText` を前景色に使用してください。
+- InfoText
+ - : ツールチップコントロールの文字色です。 `InfoBackground` を背景色に使用してください。
+- Menu
+ - : メニューの背景。 `MenuText` または `-moz-MenuBarText` を前景色に使用してください。
+- MenuText
+ - : メニュー内の文字列。 `Menu` を背景色に使用してください。
+- Scrollbar
+ - : スクロールバーの背景色。
+- ThreeDDarkShadow
+ - : 連続した 2 つの境界線によって立体的に見える 3D 要素の、光源から離れた 2 つの境界線のうち、暗い方 (一般的には外側) の境界線の色。
+- ThreeDFace
+ - : 連続した 2 つの境界線によって立体的に見える 3D 要素の表面の色。前景色には `ButtonText` を使用してください。
+- ThreeDHighlight
+ - : 連続した 2 つの境界線によって立体的に見える 3D 要素の、光源に向いた 2 つの境界線のうち、明るい方 (一般的には外側) の色。
+- ThreeDLightShadow
+ - : 連続した 2 つの境界線によって立体的に見える 3D 要素の、光源に向いた 2 つの境界線のうち、暗い方 (一般的には内側) の色。
+- ThreeDShadow
+ - : 連続した 2 つの境界線によって立体的に見える 3D 要素の、光源から離れた 2 つの境界線のうち、明るい方 (一般的には内側) の色。
+- Window
+ - : ウィンドウの背景。 `WindowText` を前景色に使用してください。
+- WindowFrame
+ - : ウィンドウの枠。
+- WindowText
+ - : ウィンドウ内の文字列。 `Window` を背景色に使用してください。
+
+### Mozilla システム色拡張
+
+- \-moz-ButtonDefault
+ - : ダイアログボックスの既定の動作を表すボタンの周りを囲む境界線の色です。
+- \-moz-ButtonHoverFace
+ - : マウスポインターが上にある時のボタンの背景色 (マウスポインターが上にない場合は `ThreeDFace` または `ButtonFace`)。 `-moz-ButtonHoverText` の前景色と一緒に使う必要があります。
+- \-moz-ButtonHoverText
+ - : マウスポインタが上にあるボタンのテキスト色 (マウスポインタが上にない場合は `ButtonText`)。 `-moz-ButtonHoverFace background` の背景色と一緒に使う必要があります。
+- \-moz-CellHighlight
+ - : ツリーウィジェットで選択された項目の背景色。 `-moz-CellHighlightText` の前景色と一緒に使用する必要があります。 `-moz-html-CellHighlight` も参照。
+- \-moz-CellHighlightText
+ - : ツリー内で選択された項目のテキスト色。 `-moz-CellHighlight background` の背景色と一緒に使う必要があります。 `-moz-html-CellHighlightText` も参照。
+- \-moz-Combobox
+ - : コンボボックスの背景色。 `-moz-ComboboxText` の前景色と一緒に使う必要があります。 1.9.2 以前のバージョンでは、代わりに `-moz-Field` を使用してください。
+- \-moz-ComboboxText
+ - : コンボボックスのテキスト色。 `-moz-Combobox` の背景色と一緒に使う必要があります。 1.9.2 以前のバージョンでは、代わりに `-moz-FieldText` を使用してください。
+- \-moz-Dialog
+ - : ダイアログボックスの背景色。moz-DialogTextの前景色と一緒に使う必要があります。
+- \-moz-DialogText
+ - : ダイアログボックスのテキスト色。 `-moz-DialogText` の背景色と一緒に使う必要があります。
+- \-moz-dragtargetzone, -moz-EvenTreeRow
+ - : ツリー内の偶数行の背景色。 `-moz-FieldText` の前景色と一緒に使う必要があります。 Gecko のバージョン 1.9 より前のバージョンでは、 `-moz-Field` を使用してください。 `-moz-OddTreeRow` も参照してください。
+- \-moz-html-CellHighlight
+ - : HTML の {{HTMLElement("select")}} における強調表示されたアイテムの背景色。前景色には `-moz-html-CellHighlightText` を使用します。 Gecko 1.9 以前では、 `-moz-CellHighlight` を使用してください。
+- \-moz-html-CellHighlightText
+ - : HTML の {{HTMLElement("select")}} における強調表示されたアイテムのテキストの色。背景色には `-moz-html-CellHighlight` を使用します。 Gecko 1.9 以前では、 `-moz-CellHighlightText` を使用してください。
+- \-moz-mac-accentdarkestshadow, -moz-mac-accentdarkshadow, -moz-mac-accentface, -moz-mac-accentlightesthighlight, -moz-mac-accentlightshadow, -moz-mac-accentregularhighlight, -moz-mac-accentregularshadow
+ - : アクセント色です。
+- \-moz-mac-chrome-active, -moz-mac-chrome-inactive
+ - : 非アクティブおよびアクティブなブラウザーのクロームの色です。
+- \-moz-mac-focusring, -moz-mac-menuselect, -moz-mac-menushadow, -moz-mac-menutextselect, -moz-MenuHover
+ - : ホバーされたメニュー項目の背景色。 `Highlight` によく似ています。 `-moz-MenuHoverText` や `-moz-MenuBarHoverText` の前景色と一緒に使う必要があります。
+- \-moz-MenuHoverText
+ - : ホバーされたメニュー項目のテキスト色。 `HighlightText` によく似ています。 `-moz-MenuHover` の背景色と一緒に使う必要があります。
+- \-moz-MenuBarText
+ - : メニューバーのテキスト色。 `MenuText` によく似ています。 `Menu` の背景の上に使用します。
+- \-moz-MenuBarHoverText
+ - : メニューバーのホバーされたテキストの色。多くの場合、 `-moz-MenuHoverText` に似ています。 `-moz-MenuHover` 背景の上に使用する必要があります。
+- \-moz-nativehyperlinktext
+ - : 既定のプラットフォームのハイパーリンク色です。
+- \-moz-OddTreeRow
+ - : ツリー内の奇数行の背景色。 `-moz-FieldText` の前景色と一緒に使う必要があります。 Gecko のバージョン 1.9 より前のバージョンでは、 `-moz-Field` を使用してください。 `-moz-EvenTreeRow` も参照してください。
+- \-moz-win-communicationstext
+ - : `{{cssxref("appearance", "-moz-appearance")}}: -moz-win-communications-toolbox;` を持つオブジェクトのテキストに使用する必要があります。
+- \-moz-win-mediatext
+ - : `{{cssxref("appearance", "-moz-appearance")}}: -moz-win-media-toolbox` を持つオブj稀有とのテキストに使用する必要があります。
+- \-moz-win-accentcolor
+ - : スタートメニューやタスクバー、タイトルバーなどに設定できる Windows 10 のカスタムアクセント色にアクセスするために使用します。
+- \-moz-win-accentcolortext
+ - : スタートメニュー、タスクバー、タイトルバーなどの Windows 10 のカスタムアクセント色の上に配置されたテキストの色にアクセスするために使用します。
+
+### Mozilla 色設定拡張
+
+- \-moz-activehyperlinktext
+ - : アクティブ化されたリンクの文字色のユーザー設定です。既定の文書の背景色と共に使用されます。
+- \-moz-default-background-color
+ - : 文書の背景色のユーザー設定です。
+- \-moz-default-color
+ - : 文字色のユーザー設定です。
+- \-moz-hyperlinktext
+ - : 未訪問のリンクにおける文字色のユーザー設定です。既定の文書の背景色と共に使用されます。
+- \-moz-visitedhyperlinktext
+ - : 訪問済みのリンクにおける文字色のユーザー設定です。既定の文書の背景色と共に使用されます。
+
+### Lab 色
+
+CSS Color 4 で Lab 色が導入されました。
+Lab 色は、{{cssxref("color_value/lab()","lab()")}} 関数表記で指定します。
+Lab 色は、特定の色空間に限定されず、人間の視覚の全領域を表現することができます。
+
+### LCH 色
+
+CSS Color 4 で LCH 色が導入されました。
+LCH 色は、{{cssxref("color_value/lch()","lch()")}} という関数記法で指定します。
+特定の色空間に限定されず、人間の視覚の全領域を表現することができます。
+
+実は、LCH は Lab の極致です。彩度と色相の構成要素が、混合ではなく、目的の色の質を指定する点で、Lab よりも人間に優しいものです。
+この点では HSL と似ていますが、知覚的な均一性ははるかに高いと言えます。
+HSL が `hsl(60 100% 50%)` と `hsl(240 100% 50%)` の両方を同じ明るさと表現するのに対し、LCH (および Lab) は、前者 (黄) の L は 97.6、後者 (青) の L は 29.6 と、それぞれ異なる明るさを正しく表現します。
+そのため、LCH を使ってまったく異なる色のパレットを作成しても、予測可能な結果が得られます。
+なお、LCH の色相は HSL の色相とは異なり、LCH の彩度は HSL の彩度とは異なりますが、概念的には類似していますのでご注意ください。
+
+### color() 色
+
+CSS Color 4 でこの表記が導入されました。
+{{cssxref("color_value/color()","color()")}} 関数で指定された色は、定義済みの色空間のほか、[`@color-profile`](/en-US/docs/Web/CSS/@color-profile) ルールで定義されたカスタム色空間でも色を指定できます。
+
+## 補間
+
+アニメーションや[グラデーション](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)において、 `<color>` の値は赤、緑、青の成分ごとに補間されます。それぞれの成分は浮動小数点の実数として補間されます。なお、予期しない灰色が現れるのを避けるため、色の補間は[アルファ乗算済み sRGBA 色空間](https://www.gimp.org/docs/plug-in/appendix-alpha.html)で行われます。アニメーションでは補間の速度はアニメーションと関連づけられた[タイミング関数](/ja/docs/Web/CSS/easing-function)によって決められます。
+
+## アクセシビリティの考慮
+
+色を見分けることが難しい人がいます。[WCAG 2.0](https://www.w3.org/TR/WCAG/#visual-audio-contrast) 勧告では、色を特定のメッセージ、動作、結果を伝える唯一の手段として使用することを避けるよう強く勧告しています。詳しくは[色と色のコントラスト](/ja/docs/Learn/Accessibility/CSS_and_JavaScript#color_and_color_contrast)をご覧ください。
+
+## 例
+
+<h3 id="Color_value_tester">色の値のテスター</h3>
+
+この例では、`<div>` とテキスト入力を用意しています。入力欄に有効な色を入力すると、`<div>` にその色が採用され、色の値をテストすることができます。
+
+#### HTML
+
+```html
+<div></div>
+<hr>
+<label for="color">有効な色の値を入力してください:</label>
+<input type="text" id="color">
+```
+
+#### CSS
+
+```css
+div {
+  width: 100%;
+  height: 200px;
+}
+```
+
+```js hidden
+const inputElem = document.querySelector('input');
+const divElem = document.querySelector('div');
+
+function validTextColor(stringToTest) {
+ if (stringToTest === "") { return false; }
+ if (stringToTest === "inherit") { return false; }
+ if (stringToTest === "transparent") { return false; }
+
+ const image = document.createElement("img");
+ image.style.color = "rgb(0, 0, 0)";
+ image.style.color = stringToTest;
+ if (image.style.color !== "rgb(0, 0, 0)") { return true; }
+ image.style.color = "rgb(255, 255, 255)";
+ image.style.color = stringToTest;
+ return image.style.color !== "rgb(255, 255, 255)";
+}
+
+inputElem.addEventListener('change', () => {
+ if(validTextColor(inputElem.value)) {
+ divElem.style.backgroundColor = inputElem.value;
+ divElem.textContent = '';
+ } else {
+ divElem.style.backgroundColor = 'white';
+ divElem.textContent = 'Invalid color value';
+ }
+});
+```
+
+#### 結果
-/* 16進表記 */
-#f09
-#F09
-#ff0099
-#FF0099
+{{EmbedLiveSample('Color_value_tester','100%', 300)}}
+
+### 様々な RGB 構文
+
+この例は、一つの色を RGB 色構文で生成することができる様々な方法を示しています。
+
+ /* これらの様々な構文は、すべて同じ色、不透明な濃いピンク色を指定します。 */
-/* 関数表記 */
-rgb(255,0,153)
-rgb(255, 0, 153)
-rgb(255, 0, 153.0)
-rgb(100%,0%,60%)
-rgb(100%, 0%, 60%)
-rgb(100%, 0, 60%) /* ERROR! 数値とパーセントを混ぜないでください */
-rgb(255 0 153)
+ /* 16進表記 */
+ #f09
+ #F09
+ #ff0099
+ #FF0099
-/* アルファ値付き16進表記 */
-#f09f
-#F09F
-#ff0099ff
-#FF0099FF
+ /* 関数表記 */
+ rgb(255,0,153)
+ rgb(255, 0, 153)
+ rgb(255, 0, 153.0)
+ rgb(100%,0%,60%)
+ rgb(100%, 0%, 60%)
+ rgb(100%, 0, 60%) /* ERROR! 数値とパーセントを混ぜないでください */
+ rgb(255 0 153)
-/* アルファ値付き関数表記 */
-rgb(255, 0, 153, 1)
-rgb(255, 0, 153, 100%)
+ /* アルファ値付き16進表記 */
+ #f09f
+ #F09F
+ #ff0099ff
+ #FF0099FF
-/* 空白区切りの構文 */
-rgb(255 0 153 / 1)
-rgb(255 0 153 / 100%)
+ /* アルファ値付き関数表記 */
+ rgb(255, 0, 153, 1)
+ rgb(255, 0, 153, 100%)
-/* 浮動小数点値による実数表記 */
-rgb(255, 0, 153.6, 1)
-rgb(1e2, .5e1, .5e0, +.25e2%)
-</pre>
+ /* 空白区切りの構文 */
+ rgb(255 0 153 / 1)
+ rgb(255 0 153 / 100%)
-<h5 id="RGB_transparency_variations" name="RGB_transparency_variations">RGB の様々な透過性</h5>
-
-<pre>/* 16進表記 */
-#3a30 <span style="background: #3a30;"> /* 透明な緑 */ </span>
-#3A3F <span style="background: #3A3F;"> /* 不透明な緑 */ </span>
-#33aa3300 <span style="background: #33aa3300;"> /* 完全に透明な緑 */ </span>
-#33AA3388 <span style="background: #33AA3380;"> /* 50%半透明の緑 */ </span>
-
-/* 関数表記 */
-rgba(51, 170, 51, .1) <span style="background: rgba(51, 170, 51, .1);"> /* 10%半透明の緑 */ </span>
-rgba(51, 170, 51, .4) <span style="background: rgba(51, 170, 51, .4);"> /* 40%半透明の緑 */ </span>
-rgba(51, 170, 51, .7) <span style="background: rgba(51, 170, 51, .7);"> /* 70%半透明の緑 */ </span>
-rgba(51, 170, 51, 1) <span style="background: rgba(51, 170, 51, 1);"> /* 完全に不透明な緑 */ </span>
-
-/* ホワイトスペース区切りの構文 */
-rgba(51 170 51 / 0.4) <span> /* 40%半透明の緑 */ </span>
-rgba(51 170 51 / 40%) <span> /* 40%半透明の緑 */ </span>
-
-/* 実数値の関数構文 */
-rgba(255, 0, 153.6, 1)
-rgba(1e2, .5e1, .5e0, +.25e2%)
-</pre>
-
-<h3 id="HSL_colors" name="HSL_colors">HSL 色</h3>
-
-<p>HSL 色モデルは色相 (H)、彩度 (S)、明度 (L) の各成分によって与えられた色を定義します。任意のアルファ成分は色の透過性を表します。</p>
-
-<p>多くのデザイナーは、 HSL は色相、彩度、明度をそれぞれ個別に調整できるので、 RGB より直感的であると考えています。 HSL は一連の合う色の組み合わせ (例えば、同じ色相で、明暗や彩度が異なる色など) をより簡単に作成することもできます。</p>
-
-<h4 id="Syntax_3" name="Syntax_3">構文</h4>
-
-<p>HSL 色は関数表記の <code id="hsl()">hsl()</code> および <code id="hsla()">hsla()</code> を通して説明されます。</p>
-
-<div class="note">
-<p><strong>メモ:</strong> CSS Colors Level 4 では、 <code>hsla()</code> は <code>hsl()</code> の別名です。 Level 4 標準を実装するブラウザーでは、同じ引数を受け取り同じ挙動をします。</p>
-</div>
-
-<dl>
- <dt>関数表記: <code>hsl[a](H, S, L[, A])</code></dt>
- <dd><code>H</code> (色相) は色相環の{{cssxref("&lt;angle&gt;", "角度")}}を {{SpecName("CSS4 Colors","#the-hsl-notation")}} で定義されている <code>deg</code>、 <code>rad</code>、 <code>grad</code>、 <code>turn</code> の単位で与えます。単位のない{{cssxref("&lt;number&gt;", "数値")}}の場合は、 {{SpecName("CSS3 Colors", "#hsl-color")}} で定められている通り deg (度) として扱われます。定義では、赤=0deg=360deg であり、他の色は、緑=120deg、 青=240deg、 などのように色相環を回ります。 <code>&lt;angle&gt;</code> は暗黙的に周回するので、 -120deg=240deg、 480deg=120deg、 -1turn=1turn のようになります。</dd>
- <dd><code>S</code> (彩度) と <code>L</code> (明度) はパーセント表記です。<strong>彩度</strong><code>100%</code>は完全に鮮やかな色で、彩度<code>0%</code>は完全に薄い色 (灰色) です。<strong>明度</strong><code>100%</code>は白で、明度<code>0%</code>は黒で、明度<code>50%</code>は「普通」です。</dd>
- <dd><code>A</code> (アルファ)は<code>0</code>と<code>1</code>の間の{{cssxref("&lt;number&gt;", "数値")}}、または{{cssxref("&lt;percentage&gt;", "パーセント表記")}}で、数値<code>1</code>が<code>100%</code> (不透明) です。</dd>
- <dt>関数表記: <code>hsl[a](H S L[ / A])</code></dt>
- <dd>CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。</dd>
-</dl>
-
-<h4 id="Examples_2" name="Examples_2">例</h4>
-
-<h5 id="HSL_syntax_variations" name="HSL_syntax_variations">様々な HSL の構文</h5>
-
-<pre>/* これらの例はすべて同じ色、ラベンダーを指定します。 */
-hsl(270,60%,70%)
-hsl(270, 60%, 70%)
-hsl(270 60% 70%)
-hsl(270deg, 60%, 70%)
-hsl(4.71239rad, 60%, 70%)
-hsl(.75turn, 60%, 70%)
-
-/* これらの例はすべて同じ色、15%半透明のラベンダーを指定します。 */
-hsl(270, 60%, 50%, .15)
-hsl(270, 60%, 50%, 15%)
-hsl(270 60% 50% / .15)
-hsl(270 60% 50% / 15%)
-</pre>
-
-<h5 id="Fully_saturated_colors" name="Fully_saturated_colors">彩度100%の色</h5>
+ /* 浮動小数点値による実数表記 */
+ rgb(255, 0, 153.6, 1)
+ rgb(1e2, .5e1, .5e0, +.25e2%)
+
+### RGB の様々な透過性
+
+ /* 16進表記 */
+ #3a30 /* 完全に透明な緑 */
+ #3A3F /* 完全に不透明な緑 */
+ #33aa3300 /* 完全に透明な緑 */
+ #33AA3380 /* 50% 半透明な緑 */
+
+ /* 関数表記 */
+ rgba(51, 170, 51, .1) /* 10% 半透明の緑 */
+ rgba(51, 170, 51, .4) /* 40% 半透明の緑 */
+ rgba(51, 170, 51, .7) /* 70% 半透明の緑 */
+ rgba(51, 170, 51, 1) /* 完全に不透明の緑 */
+
+ /* ホワイトスペース区切りの構文 */
+ rgba(51 170 51 / 0.4) /* 40% 半透明の緑 */
+ rgba(51 170 51 / 40%) /* 40% 半透明の緑 */
+
+ /* 実数値の関数構文 */
+ rgba(51, 170, 51.6, 1)
+ rgba(5.1e1, 1.7e2, 5.1e1, 1e2%)
+
+### 様々な HSL の構文
+
+ /* これらの例はすべて同じ色、ラベンダーを指定します。 */
+ hsl(270,60%,70%)
+ hsl(270, 60%, 70%)
+ hsl(270 60% 70%)
+ hsl(270deg, 60%, 70%)
+ hsl(4.71239rad, 60%, 70%)
+ hsl(.75turn, 60%, 70%)
+
+ /* これらの例はすべて同じ色、15%半透明のラベンダーを指定します。 */
+ hsl(270, 60%, 50%, .15)
+ hsl(270, 60%, 50%, 15%)
+ hsl(270 60% 50% / .15)
+ hsl(270 60% 50% / 15%)
+
+### 彩度100%の色
<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">表記</th>
- <th scope="col">説明</th>
- <th scope="col">例</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><code>hsl(0, 100%, 50%)</code></td>
- <td>red</td>
- <td style="background: hsl(0,100%,50%);"></td>
- </tr>
- <tr>
- <td><code>hsl(30, 100%, 50%)</code></td>
- <td>orange</td>
- <td style="background: hsl(30,100%,50%);"></td>
- </tr>
- <tr>
- <td><code>hsl(60, 100%, 50%)</code></td>
- <td>yellow</td>
- <td style="background: hsl(60,100%,50%);"></td>
- </tr>
- <tr>
- <td><code>hsl(90, 100%, 50%)</code></td>
- <td>lime green</td>
- <td style="background: hsl(90,100%,50%);"></td>
- </tr>
- <tr>
- <td><code>hsl(120, 100%, 50%)</code></td>
- <td>green</td>
- <td style="background: hsl(120,100%,50%);"></td>
- </tr>
- <tr>
- <td><code>hsl(150, 100%, 50%)</code></td>
- <td>blue-green</td>
- <td style="background: hsl(150,100%,50%);"></td>
- </tr>
- <tr>
- <td><code>hsl(180, 100%, 50%)</code></td>
- <td>cyan</td>
- <td style="background: hsl(180,100%,50%);"></td>
- </tr>
- <tr>
- <td><code>hsl(210, 100%, 50%)</code></td>
- <td>sky blue</td>
- <td style="background: hsl(210,100%,50%);"></td>
- </tr>
- <tr>
- <td><code>hsl(240, 100%, 50%)</code></td>
- <td>blue</td>
- <td style="background: hsl(240,100%,50%);"></td>
- </tr>
- <tr>
- <td><code>hsl(270, 100%, 50%)</code></td>
- <td>purple</td>
- <td style="background: hsl(270,100%,50%);"></td>
- </tr>
- <tr>
- <td><code>hsl(300, 100%, 50%)</code></td>
- <td>magenta</td>
- <td style="background: hsl(300,100%,50%);"></td>
- </tr>
- <tr>
- <td><code>hsl(330, 100%, 50%)</code></td>
- <td>pink</td>
- <td style="background: hsl(330,100%,50%);"></td>
- </tr>
- <tr>
- <td><code>hsl(360, 100%, 50%)</code></td>
- <td>red</td>
- <td style="background: hsl(360,100%,50%);"></td>
- </tr>
- </tbody>
+ <thead>
+ <tr>
+ <th scope="col">表記</th>
+ <th scope="col">説明</th>
+ <th scope="col">例</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>hsl(0, 100%, 50%)</code></td>
+ <td>red</td>
+ <td style="background: hsl(0, 100%, 50%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(30, 100%, 50%)</code></td>
+ <td>orange</td>
+ <td style="background: hsl(30, 100%, 50%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(60, 100%, 50%)</code></td>
+ <td>yellow</td>
+ <td style="background: hsl(60, 100%, 50%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(90, 100%, 50%)</code></td>
+ <td>lime green</td>
+ <td style="background: hsl(90, 100%, 50%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(120, 100%, 50%)</code></td>
+ <td>green</td>
+ <td style="background: hsl(120, 100%, 50%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(150, 100%, 50%)</code></td>
+ <td>blue-green</td>
+ <td style="background: hsl(150, 100%, 50%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(180, 100%, 50%)</code></td>
+ <td>cyan</td>
+ <td style="background: hsl(180, 100%, 50%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(210, 100%, 50%)</code></td>
+ <td>sky blue</td>
+ <td style="background: hsl(210, 100%, 50%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(240, 100%, 50%)</code></td>
+ <td>blue</td>
+ <td style="background: hsl(240, 100%, 50%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(270, 100%, 50%)</code></td>
+ <td>purple</td>
+ <td style="background: hsl(270, 100%, 50%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(300, 100%, 50%)</code></td>
+ <td>magenta</td>
+ <td style="background: hsl(300, 100%, 50%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(330, 100%, 50%)</code></td>
+ <td>pink</td>
+ <td style="background: hsl(330, 100%, 50%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(360, 100%, 50%)</code></td>
+ <td>red</td>
+ <td style="background: hsl(360, 100%, 50%)"></td>
+ </tr>
+ </tbody>
</table>
-<h5 id="Lighter_and_darker_greens" name="Lighter_and_darker_greens">緑の明度の変化</h5>
+### 様々な明度の緑
<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">表記</th>
- <th scope="col">説明</th>
- <th scope="col">例</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><code>hsl(120, 100%, 0%)</code></td>
- <td>black</td>
- <td style="background: hsl(120,100%,0%);"></td>
- </tr>
- <tr>
- <td><code>hsl(120, 100%, 20%)</code></td>
- <td></td>
- <td style="background: hsl(120,100%,20%);"></td>
- </tr>
- <tr>
- <td><code>hsl(120, 100%, 40%)</code></td>
- <td></td>
- <td style="background: hsl(120,100%,40%);"></td>
- </tr>
- <tr>
- <td><code>hsl(120, 100%, 60%)</code></td>
- <td></td>
- <td style="background: hsl(120,100%,60%);"></td>
- </tr>
- <tr>
- <td><code>hsl(120, 100%, 80%)</code></td>
- <td></td>
- <td style="background: hsl(120,100%,80%);"></td>
- </tr>
- <tr>
- <td><code>hsl(120, 100%, 100%)</code></td>
- <td>white</td>
- <td style="background: hsl(120,100%,100%);"></td>
- </tr>
- </tbody>
+ <thead>
+ <tr>
+ <th scope="col">表記</th>
+ <th scope="col">説明</th>
+ <th scope="col">例</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>hsl(120, 100%, 0%)</code></td>
+ <td>black</td>
+ <td style="background: hsl(120, 100%, 0%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(120, 100%, 20%)</code></td>
+ <td></td>
+ <td style="background: hsl(120, 100%, 20%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(120, 100%, 40%)</code></td>
+ <td></td>
+ <td style="background: hsl(120, 100%, 40%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(120, 100%, 60%)</code></td>
+ <td></td>
+ <td style="background: hsl(120, 100%, 60%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(120, 100%, 80%)</code></td>
+ <td></td>
+ <td style="background: hsl(120, 100%, 80%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(120, 100%, 100%)</code></td>
+ <td>white</td>
+ <td style="background: hsl(120, 100%, 100%)"></td>
+ </tr>
+ </tbody>
</table>
-<h5 id="Saturated_and_desaturated_greens" name="Saturated_and_desaturated_greens">緑の彩度の変化</h5>
+### 様々な彩度の緑
<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">表記</th>
- <th scope="col">説明</th>
- <th scope="col">例</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><code>hsl(120, 100%, 50%)</code></td>
- <td>green</td>
- <td style="background: hsl(120,100%,50%);"></td>
- </tr>
- <tr>
- <td><code>hsl(120, 80%, 50%)</code></td>
- <td></td>
- <td style="background: hsl(120,80%,50%);"></td>
- </tr>
- <tr>
- <td><code>hsl(120, 60%, 50%)</code></td>
- <td></td>
- <td style="background: hsl(120,60%,50%);"></td>
- </tr>
- <tr>
- <td><code>hsl(120, 40%, 50%)</code></td>
- <td></td>
- <td style="background: hsl(120,40%,50%);"></td>
- </tr>
- <tr>
- <td><code>hsl(120, 20%, 50%)</code></td>
- <td></td>
- <td style="background: hsl(120,20%,50%);"></td>
- </tr>
- <tr>
- <td><code>hsl(120, 0%, 50%)</code></td>
- <td>gray</td>
- <td style="background: hsl(120,0%,50%);"></td>
- </tr>
- </tbody>
+ <thead>
+ <tr>
+ <th scope="col">表記</th>
+ <th scope="col">説明</th>
+ <th scope="col">例</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>hsl(120, 100%, 50%)</code></td>
+ <td>green</td>
+ <td style="background: hsl(120, 100%, 50%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(120, 80%, 50%)</code></td>
+ <td></td>
+ <td style="background: hsl(120, 80%, 50%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(120, 60%, 50%)</code></td>
+ <td></td>
+ <td style="background: hsl(120, 60%, 50%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(120, 40%, 50%)</code></td>
+ <td></td>
+ <td style="background: hsl(120, 40%, 50%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(120, 20%, 50%)</code></td>
+ <td></td>
+ <td style="background: hsl(120, 20%, 50%)"></td>
+ </tr>
+ <tr>
+ <td><code>hsl(120, 0%, 50%)</code></td>
+ <td>gray</td>
+ <td style="background: hsl(120, 0%, 50%)"></td>
+ </tr>
+ </tbody>
</table>
-<h5 id="HSL_transparency_variations" name="HSL_transparency_variations">HSL の様々な透過性</h5>
-
-<pre>hsla(240, 100%, 50%, .05) <span style="background: hsla(240,100%,50%,0.05);"> /* 5%半透明の青 */ </span>
-hsla(240, 100%, 50%, .4) <span style="background: hsla(240,100%,50%,0.4);"> /* 40%半透明の青 */ </span>
-hsla(240, 100%, 50%, .7) <span style="background: hsla(240,100%,50%,0.7);"> /* 70%半透明の青 */ </span>
-hsla(240, 100%, 50%, 1) <span style="background: hsla(240,100%,50%,1);"> /* 不透明な青 */ </span>
-
-/* 空白表記 */
-hsla(240 100% 50% / .05) <span style="background: hsla(240,100%,50%,0.05);"> /* 5%半透明の青 */ </span>
-
-/* アルファのパーセント表記 */
-hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> /* 5%半透明の青 */ </span>
-</pre>
-
-<h3 id="System_Colors" name="System_Colors">システム色</h3>
+### HSL の様々な透過性
-<p><em>色強制モード</em> (<a href="/ja/docs/Web/CSS/@media/forced-colors">forced-colors</a> メディアクエリで検出可能) では、多くの色がユーザーまたはブラウザーが定義したパレットに制約されます。これらのシステム色は以下のキーワードで公開されており、ページの残りの部分が制限されたパレットにうまく合わせられることを保証するために使用することができます。これらの値は他のコンテキストでも使用できますが、ブラウザーの対応は限定的です。</p>
+ hsla(240, 100%, 50%, .05) /* 5% 半透明の青 */
+ hsla(240, 100%, 50%, .4) /* 40% 半透明の青 */
+ hsla(240, 100%, 50%, .7) /* 70% 半透明の青 */
+ hsla(240, 100%, 50%, 1) /* 完全に不透明の青 */
-<p>以下のリストにあるキーワードは、 CSS Color Module Level 4 仕様書で定義されています。</p>
-
-<div class="blockIndicator note">
-<p>なお、これらのキーワードは<em>大文字小文字を区別しません</em>が、読みやすさのために大文字小文字を交ぜて表記しています。</p>
-</div>
-
-<dl>
- <dt>ActiveText</dt>
- <dd>
- <p>アクティブなリンクのテキスト</p>
- </dd>
- <dt>ButtonFace</dt>
- <dd>
- <p>プッシュボタンの背景</p>
- </dd>
- <dt>ButtonText</dt>
- <dd>
- <p>プッシュボタンのテキスト</p>
- </dd>
- <dt>Canvas</dt>
- <dd>
- <p>アプリケーションのコンテンツや文書の背景</p>
- </dd>
- <dt>CanvasText</dt>
- <dd>
- <p>アプリケーションのコンテンツや文書のテキスト</p>
- </dd>
- <dt>Field</dt>
- <dd>
- <p>入力フィールドの背景</p>
- </dd>
- <dt>FieldText</dt>
- <dd>
- <p>入力フィールドのテキスト</p>
- </dd>
- <dt>GrayText</dt>
- <dd>
- <p>無効なテキスト</p>
- </dd>
- <dt>Highlight</dt>
- <dd>
- <p>コントロールの中で選択されているアイテムの背景</p>
- </dd>
- <dt>HighlightText</dt>
- <dd>
- <p>コントロールの中で選択されているアイテムのテキスト</p>
- </dd>
- <dt>LinkText</dt>
- <dd>
- <p>アクティブではない、訪問していないリンクのテキスト</p>
- </dd>
- <dt>VisitedText</dt>
- <dd>
- <p>訪問したリンクのテキスト</p>
- </dd>
-</dl>
-
-<h4 id="Deprecated_system_color_keywords" name="Deprecated_system_color_keywords">非推奨のシステム色のキーワード</h4>
-
-<p>以下のキーワードは、 CSS Color モジュールの早期の版で定義されていました。これらは非推奨になりました。公開ウェブページでの使用は {{deprecated_inline}} です。</p>
-
-<div class="twocolumns">
-<dl>
- <dt>ActiveBorder</dt>
- <dd>
- <p>アクティブウィンドウの境界線。</p>
- </dd>
- <dt>ActiveCaption</dt>
- <dd>
- <p>アクティブウィンドウのキャプション。 <code>CaptionText</code> を前景色として使用してください。</p>
- </dd>
- <dt>AppWorkspace</dt>
- <dd>
- <p>複数文書インターフェイス (MDI) の背景色。</p>
- </dd>
- <dt>Background</dt>
- <dd>
- <p>デスクトップの背景です。</p>
- </dd>
- <dt>ButtonHighlight</dt>
- <dd>
- <p>周囲の境界線で1つの平面を作って3Dになっている3D要素の光源に向いている境界線です。</p>
- </dd>
- <dt>ButtonShadow</dt>
- <dd>
- <p>周囲の境界線で1つの平面を作って3Dになっている3D要素の光源から離れている境界線です。</p>
- </dd>
- <dt>CaptionText</dt>
- <dd>
- <p>キャプションの文字列、サイズ変更ボックス、スクロールバーの矢印ボックスの文字列です。 <code>ActiveCaption</code> を背景色として使用してください。</p>
- </dd>
- <dt>InactiveBorder</dt>
- <dd>
- <p>非アクティブウィンドウの境界線です。</p>
- </dd>
- <dt>InactiveCaption</dt>
- <dd>
- <p>非アクティブウィンドウのキャプションです。 <code>InactiveCaptionText</code> を前景色に使用してください。</p>
- </dd>
- <dt>InactiveCaptionText</dt>
- <dd>
- <p>非アクティブなキャプションの文字列の色です。 <code>InactiveCaption</code> を背景色に使用してください。</p>
- </dd>
- <dt>InfoBackground</dt>
- <dd>
- <p>ツールチップコントロールの背景色です。 <code>InfoText</code> を前景色に使用してください。</p>
- </dd>
- <dt>InfoText</dt>
- <dd>
- <p>ツールチップコントロールの文字色です。 <code>InfoBackground</code> を背景色に使用してください。</p>
- </dd>
- <dt>Menu</dt>
- <dd>
- <p>メニューの背景。 <code>MenuText</code> または <code>-moz-MenuBarText</code> を前景色に使用してください。</p>
- </dd>
- <dt>MenuText</dt>
- <dd>
- <p>メニュー内の文字列。 <code>Menu</code> を背景色に使用してください。</p>
- </dd>
- <dt>Scrollbar</dt>
- <dd>
- <p>スクロールバーの背景色。</p>
- </dd>
- <dt>ThreeDDarkShadow</dt>
- <dd>
- <p>囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源から遠い2辺の暗い方 (ふつうは外側) の色。</p>
- </dd>
- <dt>ThreeDFace</dt>
- <dd>
- <p>囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の表面の色。前景色には <code>ButtonText</code> を使用してください。</p>
- </dd>
- <dt>ThreeDHighlight</dt>
- <dd>
- <p>囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源に向いた2辺の明るい方 (ふつうは外側) の色。</p>
- </dd>
- <dt>ThreeDLightShadow</dt>
- <dd>
- <p>囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源に向いた2辺のっ暗い方 (ふつうは内側) の色。</p>
- </dd>
- <dt>ThreeDShadow</dt>
- <dd>
- <p>囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源から遠い2辺の明るい方 (ふつうは内側) の色。</p>
- </dd>
- <dt>Window</dt>
- <dd>
- <p>ウィンドウの背景。 <code>WindowText</code> を前景色に使用してください。</p>
- </dd>
- <dt>WindowFrame</dt>
- <dd>
- <p>ウィンドウの枠。</p>
- </dd>
- <dt>WindowText</dt>
- <dd>
- <p>ウィンドウ内の文字列。 <code>Window</code> を背景色に使用してください。</p>
- </dd>
-</dl>
-</div>
-
-<h3 id="Mozilla_System_Color_Extensions" name="Mozilla_System_Color_Extensions">Mozilla システム色拡張</h3>
-
-<div class="twocolumns">
-<dl>
- <dt>-moz-ButtonDefault</dt>
- <dd>
- <p>ダイアログボックスの既定の動作を表すボタンの周りを囲む境界線の色です。</p>
- </dd>
- <dt>-moz-ButtonHoverFace</dt>
- <dd>
- <p>マウスポインターが上にある時のボタンの背景色 (マウスポインターが上にない場合は <code>ThreeDFace</code> または <code>ButtonFace</code>)。 <code>-moz-ButtonHoverText</code> の前景色と一緒に使う必要があります。</p>
- </dd>
- <dt>-moz-ButtonHoverText</dt>
- <dd>
- <p>マウスポインタが上にあるボタンのテキスト色 (マウスポインタが上にない場合は <code>ButtonText</code>)。 <code>-moz-ButtonHoverFace background</code> の背景色と一緒に使う必要があります。</p>
- </dd>
- <dt>-moz-CellHighlight</dt>
- <dd>
- <p>ツリーウィジェットで選択された項目の背景色。 <code>-moz-CellHighlightText</code> の前景色と一緒に使用する必要があります。 <code>-moz-html-CellHighlight</code> も参照。</p>
- </dd>
- <dt>-moz-CellHighlightText</dt>
- <dd>
- <p>ツリー内で選択された項目のテキスト色。 <code>-moz-CellHighlight background</code> の背景色と一緒に使う必要があります。 <code>-moz-html-CellHighlightText</code> も参照。</p>
- </dd>
- <dt>-moz-Combobox</dt>
- <dd>
- <p>{{Gecko_minversion_inline("1.9.2")}} コンボボックスの背景色。 <code>-moz-ComboboxText</code> の前景色と一緒に使う必要があります。 1.9.2 以前のバージョンでは、代わりに <code>-moz-Field</code> を使用してください。</p>
- </dd>
- <dt>-moz-ComboboxText</dt>
- <dd>
- <p>{{Gecko_minversion_inline("1.9.2")}} コンボボックスのテキスト色。 <code>-moz-Combobox</code> の背景色と一緒に使う必要があります。 1.9.2 以前のバージョンでは、代わりに <code>-moz-FieldText</code> を使用してください。</p>
- </dd>
- <dt>-moz-Dialog</dt>
- <dd>
- <p>ダイアログボックスの背景色。moz-DialogTextの前景色と一緒に使う必要があります。</p>
- </dd>
- <dt>-moz-DialogText</dt>
- <dd>
- <p>ダイアログボックスのテキスト色。 <code>-moz-DialogText</code> の背景色と一緒に使う必要があります。</p>
- </dd>
- <dt>-moz-dragtargetzone</dt>
- <dt>-moz-EvenTreeRow</dt>
- <dd>
- <p>{{gecko_minversion_inline("1.9")}} ツリー内の偶数行の背景色。 <code>-moz-FieldText</code> の前景色と一緒に使う必要があります。 Gecko のバージョン 1.9 より前のバージョンでは、 <code>-moz-Field</code> を使用してください。 <code>-moz-OddTreeRow</code> も参照してください。</p>
- </dd>
- <dt>-moz-html-CellHighlight</dt>
- <dd>
- <p>{{gecko_minversion_inline("1.9")}} HTML の {{HTMLElement("select")}} における強調表示されたアイテムの背景色。前景色には <code>-moz-html-CellHighlightText</code> を使用します。 Gecko 1.9 以前では、 <code>-moz-CellHighlight</code> を使用してください。</p>
- </dd>
- <dt>-moz-html-CellHighlightText</dt>
- <dd>
- <p>{{gecko_minversion_inline("1.9")}} HTML の {{HTMLElement("select")}} における強調表示されたアイテムのテキストの色。背景色には <code>-moz-html-CellHighlight</code> を使用します。 Gecko 1.9 以前では、 <code>-moz-CellHighlightText</code> を使用してください。</p>
- </dd>
- <dt>-moz-mac-accentdarkestshadow</dt>
- <dt>-moz-mac-accentdarkshadow</dt>
- <dt>-moz-mac-accentface</dt>
- <dt>-moz-mac-accentlightesthighlight</dt>
- <dt>-moz-mac-accentlightshadow</dt>
- <dt>-moz-mac-accentregularhighlight</dt>
- <dt>-moz-mac-accentregularshadow</dt>
- <dt>-moz-mac-chrome-active</dt>
- <dd>
- <p>{{Gecko_minversion_inline("1.9.1")}}</p>
- </dd>
- <dt>-moz-mac-chrome-inactive</dt>
- <dd>
- <p>{{Gecko_minversion_inline("1.9.1")}}</p>
- </dd>
- <dt>-moz-mac-focusring</dt>
- <dt>-moz-mac-menuselect</dt>
- <dt>-moz-mac-menushadow</dt>
- <dt>-moz-mac-menutextselect</dt>
- <dt>-moz-MenuHover</dt>
- <dd>
- <p>ホバーされたメニュー項目の背景色。 <code>Highlight</code> によく似ています。 <code>-moz-MenuHoverText</code> や <code>-moz-MenuBarHoverText</code> の前景色と一緒に使う必要があります。</p>
- </dd>
- <dt>-moz-MenuHoverText</dt>
- <dd>
- <p>ホバーされたメニュー項目のテキスト色。 <code>HighlightText</code> によく似ています。 <code>-moz-MenuHover</code> の背景色と一緒に使う必要があります。</p>
- </dd>
- <dt>-moz-MenuBarText</dt>
- <dd>
- <p>{{Gecko_minversion_inline("1.9.2")}} メニューバーのテキスト色。 <code>MenuText</code> によく似ています。 <code>Menu</code> の背景の上に使用します。</p>
- </dd>
- <dt>-moz-MenuBarHoverText</dt>
- <dd>
- <p>メニューバーのホバーされたテキストの色。多くの場合、 <code>-moz-MenuHoverText</code> に似ています。 <code>-moz-MenuHover</code> 背景の上に使用する必要があります。</p>
- </dd>
- <dt>-moz-nativehyperlinktext</dt>
- <dd>
- <p>{{Gecko_minversion_inline("1.9.1")}} 既定のプラットフォームのハイパーリンク色</p>
- </dd>
- <dt>-moz-OddTreeRow</dt>
- <dd>
- <p>{{gecko_minversion_inline("1.9")}} ツリー内の奇数行の背景色。 <code>-moz-FieldText</code> の前景色と一緒に使う必要があります。 Gecko のバージョン 1.9 より前のバージョンでは、 <code>-moz-Field</code> を使用してください。 <code>-moz-EvenTreeRow</code> も参照してください。</p>
- </dd>
- <dt>-moz-win-communicationstext</dt>
- <dd>
- <p>{{gecko_minversion_inline("1.9")}} <code>{{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;</code> を持つオブジェクトのテキストに使用する必要があります。</p>
- </dd>
- <dt>-moz-win-mediatext</dt>
- <dd>
- <p>{{gecko_minversion_inline("1.9")}} <code>{{cssxref("-moz-appearance")}}: -moz-win-media-toolbox</code> を持つオブj稀有とのテキストに使用する必要があります。</p>
- </dd>
- <dt>-moz-win-accentcolor</dt>
- <dd>
- <p>{{gecko_minversion_inline("56")}}<br>
- スタートメニューやタスクバー、タイトルバーなどに設定できる Windows 10 のカスタムアクセントカラーにアクセスするために使用します。</p>
- </dd>
- <dt>-moz-win-accentcolortext</dt>
- <dd>
- <p>{{gecko_minversion_inline("56")}}<br>
- スタートメニュー、タスクバー、タイトルバーなどの Windows 10 のカスタムアクセントカラーの上に配置されたテキストの色にアクセスするために使用します。</p>
- </dd>
-</dl>
-</div>
+ /* ホワイトスペース構文 */
+ hsla(240 100% 50% / .05) /* 5% 半透明の青 */
-<h3 id="Mozilla_Color_Preference_Extensions" name="Mozilla_Color_Preference_Extensions">Mozilla 色設定拡張</h3>
-
-<dl>
- <dt>-moz-activehyperlinktext</dt>
- <dd>
- <p>アクティブ化されたリンクの文字色のユーザー設定です。既定の文書の背景色と共に使用されます。</p>
- </dd>
- <dt>-moz-default-background-color</dt>
- <dd>
- <p>{{Gecko_minversion_inline("5.0")}} 文書の背景色のユーザー設定です。</p>
- </dd>
- <dt>-moz-default-color</dt>
- <dd>
- <p>{{Gecko_minversion_inline("5.0")}} 文字色のユーザー設定です。</p>
- </dd>
- <dt>-moz-hyperlinktext</dt>
- <dd>
- <p>未訪問のリンクにおける文字色のユーザー設定です。既定の文書の背景色と共に使用されます。</p>
- </dd>
- <dt>-moz-visitedhyperlinktext</dt>
- <dd>
- <p>訪問済みのリンクにおける文字色のユーザー設定です。既定の文書の背景色と共に使用されます。</p>
- </dd>
-</dl>
-
-<h2 id="Interpolation" name="Interpolation">補間</h2>
-
-<p>アニメーションや<a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">グラデーション</a>において、 <code>&lt;color&gt;</code> の値は赤、緑、青の成分ごとに補間されます。それぞれの成分は浮動小数点の実数として補間されます。なお、予期しない灰色が現れるのを避けるため、色の補間は<a class="external" href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">アルファ乗算済み sRGBA 色空間</a>で行われます。アニメーションでは補間の速度はアニメーションと関連づけられた<a href="/ja/docs/Web/CSS/single-transition-timing-function">タイミング関数</a>によって決められます。</p>
-
-<h2 id="Accessibility_considerations" name="Accessibility_considerations">アクセシビリティの考慮事項</h2>
-
-<p>色を見分けることが難しい人がいます。 <a class="external" href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> 勧告は、色を特定のメッセージ、動作、結果を伝える唯一の手段として使用することを避けるよう強く勧告しています。詳しくは <a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a> をご覧ください。</p>
+ /* アルファのパーセント表記 */
+ hsla(240 100% 50% / 5%) /* 5% 半透明の青 */
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('CSS4 Colors', '#colorunits', '&lt;color&gt;')}}</td>
- <td>{{Spec2('CSS4 Colors')}}</td>
- <td><code>rebeccapurple</code>、4 桁 (<code>#RGBA</code>) および 8 桁 (<code>#RRGGBBAA</code>) の 16 進記法、<code>rgb()</code> および <code>hsl()</code> の別名である <code>rgba()</code> および <code>hsla()</code> (どちらも引数の構文が同じ)、関数の引数をカンマの代わりに空白で区切るこおｔ、アルファ値のパーセント値表記、<code>hsl()</code> 色の色相の角度表記を追加。</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS3 Colors', '#colorunits', '&lt;color&gt;')}}</td>
- <td>{{Spec2('CSS3 Colors')}}</td>
- <td>システム色を非推奨化。 SVG 色を追加。<code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> 関数記法を追加</td>
- </tr>
- <tr style="vertical-align: top;">
- <td style="vertical-align: top;">{{SpecName('CSS2.1', 'syndata.html#value-def-color', '&lt;color&gt;')}}</td>
- <td style="vertical-align: top;">{{Spec2('CSS2.1')}}</td>
- <td><code>orange</code> キーワードとシステム色を追加</td>
- </tr>
- <tr>
- <td style="vertical-align: top;">{{SpecName('CSS1', '#color-units', '&lt;color&gt;')}}</td>
- <td style="vertical-align: top;">{{Spec2('CSS1')}}</td>
- <td style="vertical-align: top;">初回定義。基本16色のキーワードを含む。</td>
- </tr>
- </tbody>
+ <thead>
+ <tr>
+ <th scope="col">仕様書</th>
+ <th scope="col">状態</th>
+ <th scope="col">備考</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS4 Colors', '#changes-from-3')}}</td>
+ <td>{{Spec2('CSS4 Colors')}}</td>
+ <td>
+ LCH および Lab の色、<code>color()</code> 関数表記、<code>rebeccapurple</code>、4 桁 (<code>#RGBA</code>) および 8 桁 (<code>#RRGGBBAA</code>) の 16 進表記を追加し、<code>rgba()</code> および <code>hsla()</code> を <code>rgb()</code> および <code>hsl()</code> の別名とし (引数の構文を共通化)、関数の空白区切りの引数をカンマの代替とし、アルファ値にパーセント値を追加し、<code>hsl()</code> 色の色相の角度表記を追加。
+ </td>
+ </tr>
+ <tr>
+ <td>
+ {{SpecName('CSS3 Colors', '#colorunits', '&lt;color&gt;')}}
+ </td>
+ <td>{{Spec2('CSS3 Colors')}}</td>
+ <td>
+ システム色を非推奨化。 SVG 色を追加。<code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> 関数表記を追加。
+ </td>
+ </tr>
+ <tr style="vertical-align: top">
+ <td style="vertical-align: top">
+ {{SpecName('CSS2.1', 'syndata.html#value-def-color', '&lt;color&gt;')}}
+ </td>
+ <td style="vertical-align: top">{{Spec2('CSS2.1')}}</td>
+ <td style="vertical-align: top">
+ <code>orange</code> キーワードとシステム色を追加。
+ </td>
+ </tr>
+ <tr>
+ <td style="vertical-align: top">
+ {{SpecName('CSS1', '#color-units', '&lt;color&gt;')}}
+ </td>
+ <td style="vertical-align: top">{{Spec2('CSS1')}}</td>
+ <td style="vertical-align: top">
+ 初回定義。基本 16 色のキーワードを含む。
+ </td>
+ </tr>
+ </tbody>
</table>
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
-<p>{{Compat("css.types.color")}}</p>
+{{Compat}}
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
-<ul>
- <li>{{Cssxref("opacity")}} プロパティは要素レベルで色の透明度を定義できます。</li>
- <li>このデータ型を使用するよく使われるプロパティ: {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}}, {{Cssxref("box-shadow")}}</li>
- <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></li>
-</ul>
+- {{Cssxref("opacity")}} プロパティは要素レベルで色の透明度を定義できます。
+- このデータ型を使用するよく使われるプロパティ: {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("box-shadow")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}}
+- [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color)
diff --git a/files/ja/web/css/css_color/index.md b/files/ja/web/css/css_color/index.md
index 83d5bcadac..36962c578b 100644
--- a/files/ja/web/css/css_color/index.md
+++ b/files/ja/web/css/css_color/index.md
@@ -4,108 +4,65 @@ slug: Web/CSS/CSS_Color
tags:
- CSS
- CSS 色
+ - ガイド
- HTML 色
- - Reference
- - スタイル
- 概要
+ - リファレンス
+ - スタイル
+ - Styling HTML
- 色
translation_of: Web/CSS/CSS_Color
---
-<div>{{CSSRef}}</div>
-
-<p><span class="seoSummary"><ruby><strong>CSS 色</strong><rp> (</rp><rt>CSS Color</rt><rp>) </rp></ruby>は、色、色の種類、色の混合、透過性、そしてどのようにこれらの色や効果を HTML コンテンツに適用するかを扱う CSS のモジュールです。</span> {{cssxref("&lt;color&gt;")}} を値として取る CSS プロパティがすべてこのモジュールの一部であるとは限りませんが、このモジュールに依存することがあります。</p>
-
-<h2 id="Reference" name="Reference">リファレンス</h2>
-
-<h3 id="Properties" name="Properties">プロパティ</h3>
-
-<div class="index">
-<ul>
- <li>{{cssxref("color")}}</li>
- <li>{{cssxref("color-adjust")}}</li>
- <li>{{cssxref("opacity")}}</li>
-</ul>
-</div>
-
-<h3 id="Data_types" name="Data_types">データ型</h3>
-
-<div class="index">
-<ul>
- <li>{{cssxref("&lt;color&gt;")}}</li>
-</ul>
-</div>
-
-<h2 id="Guides" name="Guides">ガイド</h2>
-
-<dl>
- <dt><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML 要素への色の適用</a></dt>
- <dd>様々な種類のコンテンツに CSS を使って色を適用するためのガイドです。色に関するすべての CSS プロパティが関係します。</dd>
-</dl>
-
-<h2 id="Tools" name="Tools">ツール</h2>
-
-<dl>
- <dt><a href="/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool">色選択ツール</a></dt>
- <dd>このツールは独自の色を簡単に作成、調整、実験することができます。</dd>
-</dl>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('CSS4 Colors')}}</td>
- <td>{{Spec2('CSS4 Colors')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('CSS3 Colors')}}</td>
- <td>{{Spec2('CSS3 Colors')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('CSS2.1', 'colors.html')}}</td>
- <td>{{Spec2('CSS2.1')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('CSS1')}}</td>
- <td>{{Spec2('CSS1')}}</td>
- <td>初回定義</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<h3 id="color_プロパティ"><code>color</code> プロパティ</h3>
-
-<div>
-<p>{{Compat("css.properties.color")}}</p>
-</div>
-
-<h3 id="color-adjust_プロパティ"><code>color-adjust</code> プロパティ</h3>
-
-<div>
-<p>{{Compat("css.properties.color-adjust")}}</p>
-</div>
-
-<h3 id="opacity_プロパティ"><code>opacity</code> プロパティ</h3>
-
-<div>
-<p>{{Compat("css.properties.opacity")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>他の仕様書で定義されている色に関するプロパティ: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li>
- <li>CSS では、グラデーションは色ではなく<a href="/ja/docs/Web/CSS/CSS_Images">画像</a>です。</li>
-</ul>
+{{CSSRef}}
+
+**CSS 色** (CSS Color) は CSS のモジュールで、色、色の種類、色の混合、透過性、そしてどのようにこれらの色や効果を HTML コンテンツに適用するかを扱います。{{cssxref("&lt;color&gt;")}} を値として取る CSS プロパティがすべてこのモジュールの一部であるとは限りませんが、このモジュールに依存することがあります。
+
+## リファレンス
+
+### プロパティ
+
+- {{cssxref("color")}}
+- {{cssxref("color-adjust")}}
+- {{cssxref("opacity")}}
+
+### データ型
+
+- {{cssxref("&lt;color&gt;")}}
+
+## ガイド
+
+- [CSS を使った HTML 要素への色の適用](/ja/docs/Web/HTML/Applying_color)
+ - : 様々な種類のコンテンツに CSS を使って色を適用するためのガイドです。色に関するすべての CSS プロパティが関係します。
+
+## ツール
+
+- [色選択ツール](/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool)
+ - : このツールは独自の色を簡単に作成、調整、実験することができます。
+
+## 仕様書
+
+| 仕様書 | 状態 | 備考 |
+| ------------------------------------- | ------------------------ | -------- |
+| {{SpecName('CSS4 Colors')}} | {{Spec2('CSS4 Colors')}} | |
+| {{SpecName('CSS3 Colors')}} | {{Spec2('CSS3 Colors')}} | |
+| {{SpecName('CSS2.1', 'colors.html')}} | {{Spec2('CSS2.1')}} | |
+| {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | 初回定義 |
+
+## ブラウザーの互換性
+
+### `color` プロパティ
+
+{{Compat("css.properties.color")}}
+
+### `color-adjust` プロパティ
+
+{{Compat("css.properties.color-adjust")}}
+
+### `opacity` プロパティ
+
+{{Compat("css.properties.opacity")}}
+
+## 関連情報
+
+- 他の仕様書で定義されている色に関するプロパティ: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}
+- CSS では、グラデーションは色ではなく[画像](/ja/docs/Web/CSS/CSS_Images)です。
diff --git a/files/ja/web/css/css_colors/color_picker_tool/index.md b/files/ja/web/css/css_colors/color_picker_tool/index.md
index 5fb090a903..5c68c1677c 100644
--- a/files/ja/web/css/css_colors/color_picker_tool/index.md
+++ b/files/ja/web/css/css_colors/color_picker_tool/index.md
@@ -3,3239 +3,36 @@ title: 色選択ツール
slug: Web/CSS/CSS_Colors/Color_picker_tool
tags:
- CSS
- - CSS 色
- CSS 色選択
- CSS 色選択ツール
- - HTML 色
+ - CSS 色
+ - 色選択
- HTML 色選択
- HTML 色選択ツール
- - color
+ - HTML 色
- ツール
- - 色選択
+ - color
+ - colors
translation_of: Web/CSS/CSS_Colors/Color_picker_tool
---
-<div class="hidden">
-<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">色選択ツール</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html"> &lt;div id="container"&gt;
- &lt;div id="palette" class="block"&gt;
- &lt;div id="color-palette"&gt;&lt;/div&gt;
- &lt;div id="color-info"&gt;
- &lt;div class="title"&gt; CSS 色 &lt;/div&gt;
- &lt;/div&gt;
- &lt;/div&gt;
-
- &lt;div id="picker" class="block"&gt;
- &lt;div class="ui-color-picker" data-topic="picker" data-mode="HSL"&gt;&lt;/div&gt;
- &lt;div id="picker-samples" sample-id="master"&gt;&lt;/div&gt;
- &lt;div id="controls"&gt;
- &lt;div id="delete"&gt;
- &lt;div id="trash-can"&gt;&lt;/div&gt;
- &lt;/div&gt;
- &lt;div id="void-sample" class="icon"&gt;&lt;/div&gt;
- &lt;/div&gt;
- &lt;/div&gt;
-
- &lt;div id="canvas" data-tutorial="drop"&gt;
- &lt;div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
- data-max="20" data-sensivity="10"&gt;&lt;/div&gt;
- &lt;/div&gt;
- &lt;/div&gt;
-
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">/*
- * COLOR PICKER TOOL
- */
-
-.ui-color-picker {
- width: 420px;
- margin: 0;
- border: 1px solid #DDD;
- background-color: #FFF;
- display: table;
-
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.ui-color-picker .picking-area {
- width: 198px;
- height: 198px;
- margin: 5px;
- border: 1px solid #DDD;
- position: relative;
- float: left;
- display: table;
-}
-
-.ui-color-picker .picking-area:hover {
- cursor: default;
-}
-
-/* HSV format - Hue-Saturation-Value(Brightness) */
-.ui-color-picker .picking-area {
- background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
-
- background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
- -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
- background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
- -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
- background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
- -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
- background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
- -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-
- background-color: #F00;
-}
-
-/* HSL format - Hue-Saturation-Lightness */
-.ui-color-picker[data-mode='HSL'] .picking-area {
- background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
- hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
- -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
- background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
- hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
- -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
- background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
- hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
- -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
- background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
- hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
- -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
- background-color: #F00;
-}
-
-.ui-color-picker .picker {
- width: 10px;
- height: 10px;
- border-radius: 50%;
- border: 1px solid #FFF;
- position: absolute;
- top: 45%;
- left: 45%;
-}
-
-.ui-color-picker .picker:before {
- width: 8px;
- height: 8px;
- content: "";
- position: absolute;
- border: 1px solid #999;
- border-radius: 50%;
-}
-
-.ui-color-picker .hue,
-.ui-color-picker .alpha {
- width: 198px;
- height: 28px;
- margin: 5px;
- border: 1px solid #FFF;
- float: left;
-}
-
-.ui-color-picker .hue {
- background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
- background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
- #00F 66.66%, #F0F 83.33%, #F00 100%);
- background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
- #00F 66.66%, #F0F 83.33%, #F00 100%);
- background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
- #00F 66.66%, #F0F 83.33%, #F00 100%);
- background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
- #00F 66.66%, #F0F 83.33%, #F00 100%);
-}
-
-.ui-color-picker .alpha {
- border: 1px solid #CCC;
- background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-}
-
-.ui-color-picker .alpha-mask {
- width: 100%;
- height: 100%;
- background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
-}
-
-.ui-color-picker .slider-picker {
- width: 2px;
- height: 100%;
- border: 1px solid #777;
- background-color: #FFF;
- position: relative;
- top: -1px;
-}
-
-/* input HSV and RGB */
-
-.ui-color-picker .info {
- width: 200px;
- margin: 5px;
- float: left;
-}
-
-.ui-color-picker .info * {
- float: left;
-}
-
-.ui-color-picker .input {
- width: 64px;
- margin: 5px 2px;
- float: left;
-}
-
-.ui-color-picker .input .name {
- height: 20px;
- width: 30px;
- text-align: center;
- font-size: 14px;
- line-height: 18px;
- float: left;
-}
-
-.ui-color-picker .input input {
- width: 30px;
- height: 18px;
- margin: 0;
- padding: 0;
- border: 1px solid #DDD;
- text-align: center;
- float: right;
-
- -moz-user-select: text;
- -webkit-user-select: text;
- -ms-user-select: text;
-}
-
-.ui-color-picker .input[data-topic="lightness"] {
- display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
- display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
- display: block;
-}
-
-.ui-color-picker .input[data-topic="alpha"] {
- margin-top: 10px;
- width: 93px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] &gt; .name {
- width: 60px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] &gt; input {
- float: right;
-}
-
-.ui-color-picker .input[data-topic="hexa"] {
- width: auto;
- float: right;
- margin: 6px 8px 0 0;
-}
-
-.ui-color-picker .input[data-topic="hexa"] &gt; .name {
- display: none;
-}
-
-.ui-color-picker .input[data-topic="hexa"] &gt; input {
- width: 90px;
- height: 24px;
- padding: 2px 0;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-/* Preview color */
-.ui-color-picker .preview {
- width: 95px;
- height: 53px;
- margin: 5px;
- margin-top: 10px;
- border: 1px solid #DDD;
- background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
- float: left;
- position: relative;
-}
-
-.ui-color-picker .preview:before {
- height: 100%;
- width: 50%;
- left: 50%;
- top: 0;
- content: "";
- background: #FFF;
- position: absolute;
- z-index: 1;
-}
-
-.ui-color-picker .preview-color {
- width: 100%;
- height: 100%;
- background-color: rgba(255, 0, 0, 0.5);
- position: absolute;
- z-index: 1;
-}
-
-.ui-color-picker .switch_mode {
- width: 10px;
- height: 20px;
- position: relative;
- border-radius: 5px 0 0 5px;
- border: 1px solid #DDD;
- background-color: #EEE;
- left: -12px;
- top: -1px;
- z-index: 1;
- transition: all 0.5s;
-}
-
-.ui-color-picker .switch_mode:hover {
- background-color: #CCC;
- cursor: pointer;
-}
-
-/*
- * UI Component
- */
-
-.ui-input-slider {
- height: 20px;
- font-family: "Segoe UI", Arial, Helvetica, sans-serif;
- -moz-user-select: none;
- user-select: none;
-}
-
-.ui-input-slider * {
- float: left;
- height: 100%;
- line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider &gt; input {
- margin: 0;
- padding: 0;
- width: 50px;
- text-align: center;
-
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.ui-input-slider-info {
- width: 90px;
- padding: 0px 10px 0px 0px;
- text-align: right;
- text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
- width: 16px;
- cursor: pointer;
- background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
- background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
- width: 90px;
- padding: 0 10px 0 0;
- text-align: right;
- text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
- width: 25px;
- background-color: #2C9FC9;
- border-radius: 5px;
- color: #FFF;
- font-weight: bold;
- line-height: 14px;
- text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
- background-color: #379B4A;
- cursor: pointer;
-}
-
-/*
- * COLOR PICKER TOOL
- */
-
-body {
- max-width: 1000px;
- margin: 0 auto;
-
- font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
- box-shadow: 0 0 5px 0 #999;
-
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
-
-}
-
-/**
- * Resize Handle
- */
-.resize-handle {
- width: 10px;
- height: 10px;
- background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
- position: absolute;
- bottom: 0;
- right: 0;
-}
-
-[data-resize='both']:hover {
- cursor: nw-resize !important;
-}
-
-[data-resize='width']:hover {
- cursor: w-resize !important;
-}
-
-[data-resize='height']:hover {
- cursor: n-resize !important;
-}
-
-[data-hidden='true'] {
- display: none;
-}
-
-[data-collapsed='true'] {
- height: 0 !important;
-}
-
-.block {
- display: table;
-}
-
-
-/**
- * Container
- */
-#container {
- width: 100%;
-
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-
- display: table;
-}
-
-/**
- * Picker Zone
- */
-
-#picker {
- padding: 10px;
- width: 980px;
-}
-
-.ui-color-picker {
- padding: 3px 5px;
- float: left;
- border-color: #FFF;
-}
-
-.ui-color-picker .switch_mode {
- display: none;
-}
-
-.ui-color-picker .preview-color:hover {
- cursor: move;
-}
-
-/**
- * Picker Container
- */
-
-#picker-samples {
- width: 375px;
- height: 114px;
- max-height: 218px;
- margin: 0 10px 0 30px;
- overflow: hidden;
- position: relative;
- float: left;
-
- transition: all 0.2s;
-}
-
-#picker-samples .sample {
- width: 40px;
- height: 40px;
- margin: 5px;
- border: 1px solid #DDD;
- position: absolute;
- float: left;
- transition: all 0.2s;
-}
-
-#picker-samples .sample:hover {
- cursor: pointer;
- border-color: #BBB;
- transform: scale(1.15);
- border-radius: 3px;
-}
-
-#picker-samples .sample[data-active='true'] {
- border-color: #999;
-}
-
-#picker-samples .sample[data-active='true']:after {
- content: "";
- position: absolute;
- background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
- width: 100%;
- height: 12px;
- top: -12px;
- z-index: 2;
-}
-
-#picker-samples #add-icon {
- width: 100%;
- height: 100%;
- position: relative;
- box-shadow: inset 0px 0px 2px 0px #DDD;
-}
-
-#picker-samples #add-icon:hover {
- cursor: pointer;
- border-color: #DDD;
- box-shadow: inset 0px 0px 5px 0px #CCC;
-}
-
-#picker-samples #add-icon:before,
-#picker-samples #add-icon:after {
- content: "";
- position: absolute;
- background-color: #EEE;
- box-shadow: 0 0 1px 0 #EEE;
-}
-
-#picker-samples #add-icon:before {
- width: 70%;
- height: 16%;
- top: 42%;
- left: 15%;
-}
-
-#picker-samples #add-icon:after {
- width: 16%;
- height: 70%;
- top: 15%;
- left: 42%;
-}
-
-#picker-samples #add-icon:hover:before,
-#picker-samples #add-icon:hover:after {
- background-color: #DDD;
- box-shadow: 0 0 1px 0 #DDD;
-}
-
-/**
- * Controls
- */
-
-#controls {
- width: 110px;
- padding: 10px;
- float: right;
-}
-
-#controls #picker-switch {
- text-align: center;
- float: left;
-}
-
-#controls .icon {
- width: 48px;
- height: 48px;
- margin: 10px 0;
- background-repeat: no-repeat;
- background-position: center;
- border: 1px solid #DDD;
- display: table;
- float: left;
-}
-
-#controls .icon:hover {
- cursor: pointer;
-}
-
-#controls .picker-icon {
- background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
-}
-
-#controls #void-sample {
- margin-right: 10px;
- background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
- background-position: center left;
-}
-
-#controls #void-sample[data-active='true'] {
- border-color: #CCC;
- background-position: center right;
-}
-
-#controls .switch {
- width: 106px;
- padding: 1px;
- border: 1px solid #CCC;
- font-size: 14px;
- text-align: center;
- line-height: 24px;
- overflow: hidden;
- float: left;
-}
-
-#controls .switch:hover {
- cursor: pointer;
-}
-
-#controls .switch &gt; * {
- width: 50%;
- padding: 2px 0;
- background-color: #EEE;
- float: left;
-}
-
-#controls .switch [data-active='true'] {
- color: #FFF;
- background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
- background-color: #777;
-}
-
-/**
- * Trash Can
- */
-
-#delete {
- width: 100%;
- height: 94px;
- background-color: #DDD;
- background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
- background-repeat: repeat;
-
- text-align: center;
- color: #777;
-
- position: relative;
- float: right;
-}
-
-#delete #trash-can {
- width: 80%;
- height: 80%;
- border: 2px dashed #FFF;
- border-radius: 5px;
- background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
-
- position: absolute;
- top: 10%;
- left: 10%;
-
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-
- transition: all 0.2s;
-}
-
-#delete[drag-state='enter'] {
- background-color: #999;
-}
-
-/**
- * Color Theme
- */
-
-#color-theme {
- margin: 0 8px 0 0;
- border: 1px solid #EEE;
- display: inline-block;
- float: right;
-}
-
-#color-theme .box {
- width: 80px;
- height: 92px;
- float: left;
-}
-
-/**
- * Color info box
- */
-#color-info {
- width: 360px;
- float: left;
-}
-
-#color-info .title {
- width: 100%;
- padding: 15px;
- font-size: 18px;
- text-align: center;
- background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
- background-repeat:no-repeat;
- background-position: center left 30%;
-}
-
-#color-info .copy-container {
- position: absolute;
- top: -100%;
-}
-
-#color-info .property {
- min-width: 280px;
- height: 30px;
- margin: 10px 0;
- text-align: center;
- line-height: 30px;
-}
-
-#color-info .property &gt; * {
- float: left;
-}
-
-#color-info .property .type {
- width: 60px;
- height: 100%;
- padding: 0 16px 0 0;
- text-align: right;
-}
-
-#color-info .property .value {
- width: 200px;
- height: 100%;
- padding: 0 10px;
- font-family: "Segoe UI", Arial, Helvetica, sans-serif;
- font-size: 16px;
- color: #777;
- text-align: center;
- background-color: #FFF;
- border: none;
-}
-
-#color-info .property .value:hover {
- color: #37994A;
-}
-
-#color-info .property .value:hover + .copy {
- background-position: center right;
-}
-
-#color-info .property .copy {
- width: 24px;
- height: 100%;
- padding: 0 5px;
- background-color: #FFF;
- background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
- background-repeat: no-repeat;
- background-position: center left;
- border-left: 1px solid #EEE;
- text-align: right;
- float: left;
-}
-
-#color-info .property .copy:hover {
- background-position: center right;
-}
-
-
-/**
- * Color Palette
- */
-
-#palette {
- width: 1000px;
- padding: 10px 0;
- background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
- background-repeat: repeat;
- background-color: #EEE;
- color: #777;
-
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-#color-palette {
- width: 640px;
- font-family: Arial, Helvetica, sans-serif;
- color: #777;
- float: left;
-}
-
-#color-palette .container {
- width: 100%;
- height: 50px;
- line-height: 50px;
- overflow: hidden;
- float: left;
- transition: all 0.5s;
-}
-
-#color-palette .container &gt; * {
- float: left;
-}
-
-#color-palette .title {
- width: 100px;
- padding: 0 10px;
- text-align: right;
- line-height: inherit;
-}
-
-#color-palette .palette {
- width: 456px;
- height: 38px;
- margin: 3px;
- padding: 3px;
- display: table;
- background-color: #FFF;
-}
-
-#color-palette .palette .sample {
- width: 30px;
- height: 30px;
- margin: 3px;
- position: relative;
- border: 1px solid #DDD;
- float: left;
- transition: all 0.2s;
-}
-
-#color-palette .palette .sample:hover {
- cursor: pointer;
- border-color: #BBB;
- transform: scale(1.15);
- border-radius: 3px;
-}
-
-#color-palette .controls {
-}
-
-#color-palette .controls &gt; * {
- float: left;
-}
-
-#color-palette .controls &gt; *:hover {
- cursor: pointer;
-}
-
-#color-palette .controls .lock {
- width: 24px;
- height: 24px;
- margin: 10px;
- padding: 3px;
- background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
- background-repeat: no-repeat;
- background-position: bottom right;
-}
-
-#color-palette .controls .lock:hover {
- /*background-image: url('images/unlocked-hover.png');*/
- background-position: bottom left;
-}
-
-#color-palette .controls .lock[locked-state='true'] {
- /*background-image: url('images/locked.png');*/
- background-position: top left ;
-}
-
-#color-palette .controls .lock[locked-state='true']:hover {
- /*background-image: url('images/lock-hover.png');*/
- background-position: top right;
-}
-
-/**
- * Canvas
- */
-
-#canvas {
- width: 100%;
- height: 300px;
- min-height: 250px;
- border-top: 1px solid #DDD;
- background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
- background-repeat: repeat;
- position: relative;
- float: left;
-}
-
-#canvas[data-tutorial='drop'] {
- text-align: center;
- font-size: 30px;
- color: #777;
-}
-
-#canvas[data-tutorial='drop']:before {
- content: "Drop colors here to compare";
- width: 40%;
- padding: 30px 9% 70px 11%;
-
- background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
- background-repeat: no-repeat;
- background-position: left 35px top 60%;
-
- text-align: right;
-
- border: 3px dashed rgb(221, 221, 221);
- border-radius: 15px;
-
- position: absolute;
- top: 50px;
- left: 20%;
-}
-
-#canvas[data-tutorial='drop']:after {
- content: "adjust, change or modify";
- width: 40%;
- font-size: 24px;
- position: absolute;
- top: 130px;
- left: 32%;
- z-index: 2;
-}
-
-#canvas [data-tutorial='dblclick'] {
- background-color: #999 !important;
-}
-
-#canvas [data-tutorial='dblclick']:before {
- content: "double click to activate";
- width: 80px;
- color: #FFF;
- position: absolute;
- top: 10%;
- left: 20%;
- z-index: 2;
-}
-
-#canvas .sample {
- width: 100px;
- height: 100px;
- min-width: 20px;
- min-height: 20px;
- position: absolute;
- border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-#canvas .sample:hover {
- cursor: move;
-}
-
-#canvas .sample[data-active='true']:after {
- content: "";
- position: absolute;
- background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
- width: 100%;
- height: 12px;
- top: -12px;
- z-index: 2;
-}
-
-#canvas .sample:hover &gt; * {
- cursor: pointer;
- display: block !important;
-}
-
-#canvas .sample .resize-handle {
- display: none;
-}
-
-#canvas .sample .pick {
- width: 10px;
- height: 10px;
- margin: 5px;
- background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
- position: absolute;
- top: 0;
- left: 0;
- display: none;
-}
-
-#canvas .sample .delete {
- width: 10px;
- height: 10px;
- margin: 5px;
- background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
- position: absolute;
- top: 0;
- right: 0;
- display: none;
-}
-
-
-/**
- * Canvas controls
- */
-
-#canvas .toggle-bg {
- width: 16px;
- height: 16px;
- margin: 5px;
- background: url("images/canvas-controls.png") center left no-repeat;
- position: absolute;
- top: 0;
- right: 0;
-}
-
-#canvas .toggle-bg:hover {
- cursor: pointer;
-}
-
-#canvas[data-bg='true'] {
- background: none;
-}
-
-#canvas[data-bg='true'] .toggle-bg {
- background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
-}
-
-#zindex {
- height: 20px;
- margin: 5px;
- font-size: 16px;
- position: absolute;
- opacity: 0;
- top: -10000px;
- left: 0;
- color: #777;
- float: left;
- transition: opacity 1s;
-}
-
-#zindex input {
- border: 1px solid #DDD;
- font-size: 16px;
- color: #777;
-}
-
-#zindex .ui-input-slider-info {
- width: 60px;
-}
-
-#zindex[data-active='true'] {
- top: 0;
- opacity: 1;
-}
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js">'use strict';
-
-var UIColorPicker = (function UIColorPicker() {
-
- function getElemById(id) {
- return document.getElementById(id);
- }
-
- var subscribers = [];
- var pickers = [];
-
- /**
- * RGBA Color class
- *
- * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
- * @param hue 0-360
- * @param saturation 0-100
- * @param value 0-100
- * @param lightness 0-100
- */
-
- function Color(color) {
-
- if(color instanceof Color === true) {
- this.copy(color);
- return;
- }
-
- this.r = 0;
- this.g = 0;
- this.b = 0;
- this.a = 1;
- this.hue = 0;
- this.saturation = 0;
- this.value = 0;
- this.lightness = 0;
- this.format = 'HSV';
- }
-
- function RGBColor(r, g, b) {
- var color = new Color();
- color.setRGBA(r, g, b, 1);
- return color;
- }
-
- function RGBAColor(r, g, b, a) {
- var color = new Color();
- color.setRGBA(r, g, b, a);
- return color;
- }
-
- function HSVColor(h, s, v) {
- var color = new Color();
- color.setHSV(h, s, v);
- return color;
- }
-
- function HSVAColor(h, s, v, a) {
- var color = new Color();
- color.setHSV(h, s, v);
- color.a = a;
- return color;
- }
-
- function HSLColor(h, s, l) {
- var color = new Color();
- color.setHSL(h, s, l);
- return color;
- }
-
- function HSLAColor(h, s, l, a) {
- var color = new Color();
- color.setHSL(h, s, l);
- color.a = a;
- return color;
- }
-
- Color.prototype.copy = function copy(obj) {
- if(obj instanceof Color !== true) {
- console.log('Typeof parameter not Color');
- return;
- }
-
- this.r = obj.r;
- this.g = obj.g;
- this.b = obj.b;
- this.a = obj.a;
- this.hue = obj.hue;
- this.saturation = obj.saturation;
- this.value = obj.value;
- this.format = '' + obj.format;
- this.lightness = obj.lightness;
- };
-
- Color.prototype.setFormat = function setFormat(format) {
- if (format === 'HSV')
- this.format = 'HSV';
- if (format === 'HSL')
- this.format = 'HSL';
- };
-
- /*========== Methods to set Color Properties ==========*/
-
- Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
- return (typeof(value) === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
- value &gt;= 0 &amp;&amp; value &lt;= 255);
- };
-
- Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
- if (this.isValidRGBValue(red) === false ||
- this.isValidRGBValue(green) === false ||
- this.isValidRGBValue(blue) === false)
- return;
-
- this.r = red | 0;
- this.g = green | 0;
- this.b = blue | 0;
-
- if (this.isValidRGBValue(alpha) === true)
- this.a = alpha | 0;
- };
-
- Color.prototype.setByName = function setByName(name, value) {
- if (name === 'r' || name === 'g' || name === 'b') {
- if(this.isValidRGBValue(value) === false)
- return;
-
- this[name] = value;
- this.updateHSX();
- }
- };
-
- Color.prototype.setHSV = function setHSV(hue, saturation, value) {
- this.hue = hue;
- this.saturation = saturation;
- this.value = value;
- this.HSVtoRGB();
- };
-
- Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
- this.hue = hue;
- this.saturation = saturation;
- this.lightness = lightness;
- this.HSLtoRGB();
- };
-
- Color.prototype.setHue = function setHue(value) {
- if (typeof(value) !== 'number' || isNaN(value) === true ||
- value &lt; 0 || value &gt; 359)
- return;
- this.hue = value;
- this.updateRGB();
- };
-
- Color.prototype.setSaturation = function setSaturation(value) {
- if (typeof(value) !== 'number' || isNaN(value) === true ||
- value &lt; 0 || value &gt; 100)
- return;
- this.saturation = value;
- this.updateRGB();
- };
-
- Color.prototype.setValue = function setValue(value) {
- if (typeof(value) !== 'number' || isNaN(value) === true ||
- value &lt; 0 || value &gt; 100)
- return;
- this.value = value;
- this.HSVtoRGB();
- };
-
- Color.prototype.setLightness = function setLightness(value) {
- if (typeof(value) !== 'number' || isNaN(value) === true ||
- value &lt; 0 || value &gt; 100)
- return;
- this.lightness = value;
- this.HSLtoRGB();
- };
-
- Color.prototype.setHexa = function setHexa(value) {
- var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
-
- if (valid !== true)
- return;
-
- if (value[0] === '#')
- value = value.slice(1, value.length);
-
- if (value.length === 3)
- value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
-
- this.r = parseInt(value.substr(0, 2), 16);
- this.g = parseInt(value.substr(2, 2), 16);
- this.b = parseInt(value.substr(4, 2), 16);
-
- this.alpha = 1;
- this.RGBtoHSV();
- };
-
- /*========== Conversion Methods ==========*/
-
- Color.prototype.convertToHSL = function convertToHSL() {
- if (this.format === 'HSL')
- return;
-
- this.setFormat('HSL');
- this.RGBtoHSL();
- };
-
- Color.prototype.convertToHSV = function convertToHSV() {
- if (this.format === 'HSV')
- return;
-
- this.setFormat('HSV');
- this.RGBtoHSV();
- };
-
- /*========== Update Methods ==========*/
-
- Color.prototype.updateRGB = function updateRGB() {
- if (this.format === 'HSV') {
- this.HSVtoRGB();
- return;
- }
-
- if (this.format === 'HSL') {
- this.HSLtoRGB();
- return;
- }
- };
-
- Color.prototype.updateHSX = function updateHSX() {
- if (this.format === 'HSV') {
- this.RGBtoHSV();
- return;
- }
-
- if (this.format === 'HSL') {
- this.RGBtoHSL();
- return;
- }
- };
-
- Color.prototype.HSVtoRGB = function HSVtoRGB() {
- var sat = this.saturation / 100;
- var value = this.value / 100;
- var C = sat * value;
- var H = this.hue / 60;
- var X = C * (1 - Math.abs(H % 2 - 1));
- var m = value - C;
- var precision = 255;
-
- C = (C + m) * precision | 0;
- X = (X + m) * precision | 0;
- m = m * precision | 0;
-
- if (H &gt;= 0 &amp;&amp; H &lt; 1) { this.setRGBA(C, X, m); return; }
- if (H &gt;= 1 &amp;&amp; H &lt; 2) { this.setRGBA(X, C, m); return; }
- if (H &gt;= 2 &amp;&amp; H &lt; 3) { this.setRGBA(m, C, X); return; }
- if (H &gt;= 3 &amp;&amp; H &lt; 4) { this.setRGBA(m, X, C); return; }
- if (H &gt;= 4 &amp;&amp; H &lt; 5) { this.setRGBA(X, m, C); return; }
- if (H &gt;= 5 &amp;&amp; H &lt; 6) { this.setRGBA(C, m, X); return; }
- };
-
- Color.prototype.HSLtoRGB = function HSLtoRGB() {
- var sat = this.saturation / 100;
- var light = this.lightness / 100;
- var C = sat * (1 - Math.abs(2 * light - 1));
- var H = this.hue / 60;
- var X = C * (1 - Math.abs(H % 2 - 1));
- var m = light - C/2;
- var precision = 255;
-
- C = (C + m) * precision | 0;
- X = (X + m) * precision | 0;
- m = m * precision | 0;
-
- if (H &gt;= 0 &amp;&amp; H &lt; 1) { this.setRGBA(C, X, m); return; }
- if (H &gt;= 1 &amp;&amp; H &lt; 2) { this.setRGBA(X, C, m); return; }
- if (H &gt;= 2 &amp;&amp; H &lt; 3) { this.setRGBA(m, C, X); return; }
- if (H &gt;= 3 &amp;&amp; H &lt; 4) { this.setRGBA(m, X, C); return; }
- if (H &gt;= 4 &amp;&amp; H &lt; 5) { this.setRGBA(X, m, C); return; }
- if (H &gt;= 5 &amp;&amp; H &lt; 6) { this.setRGBA(C, m, X); return; }
- };
-
- Color.prototype.RGBtoHSV = function RGBtoHSV() {
- var red = this.r / 255;
- var green = this.g / 255;
- var blue = this.b / 255;
-
- var cmax = Math.max(red, green, blue);
- var cmin = Math.min(red, green, blue);
- var delta = cmax - cmin;
- var hue = 0;
- var saturation = 0;
-
- if (delta) {
- if (cmax === red ) { hue = ((green - blue) / delta); }
- if (cmax === green ) { hue = 2 + (blue - red) / delta; }
- if (cmax === blue ) { hue = 4 + (red - green) / delta; }
- if (cmax) saturation = delta / cmax;
- }
-
- this.hue = 60 * hue | 0;
- if (this.hue &lt; 0) this.hue += 360;
- this.saturation = (saturation * 100) | 0;
- this.value = (cmax * 100) | 0;
- };
-
- Color.prototype.RGBtoHSL = function RGBtoHSL() {
- var red = this.r / 255;
- var green = this.g / 255;
- var blue = this.b / 255;
-
- var cmax = Math.max(red, green, blue);
- var cmin = Math.min(red, green, blue);
- var delta = cmax - cmin;
- var hue = 0;
- var saturation = 0;
- var lightness = (cmax + cmin) / 2;
- var X = (1 - Math.abs(2 * lightness - 1));
-
- if (delta) {
- if (cmax === red ) { hue = ((green - blue) / delta); }
- if (cmax === green ) { hue = 2 + (blue - red) / delta; }
- if (cmax === blue ) { hue = 4 + (red - green) / delta; }
- if (cmax) saturation = delta / X;
- }
-
- this.hue = 60 * hue | 0;
- if (this.hue &lt; 0) this.hue += 360;
- this.saturation = (saturation * 100) | 0;
- this.lightness = (lightness * 100) | 0;
- };
-
- /*========== Get Methods ==========*/
-
- Color.prototype.getHexa = function getHexa() {
- var r = this.r.toString(16);
- var g = this.g.toString(16);
- var b = this.b.toString(16);
- if (this.r &lt; 16) r = '0' + r;
- if (this.g &lt; 16) g = '0' + g;
- if (this.b &lt; 16) b = '0' + b;
- var value = '#' + r + g + b;
- return value.toUpperCase();
- };
-
- Color.prototype.getRGBA = function getRGBA() {
-
- var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
- var a = '';
- var v = '';
- var x = parseFloat(this.a);
- if (x !== 1) {
- a = 'a';
- v = ', ' + x;
- }
-
- var value = 'rgb' + a + rgb + v + ')';
- return value;
- };
-
- Color.prototype.getHSLA = function getHSLA() {
- if (this.format === 'HSV') {
- var color = new Color(this);
- color.setFormat('HSL');
- color.updateHSX();
- return color.getHSLA();
- }
-
- var a = '';
- var v = '';
- var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
- var x = parseFloat(this.a);
- if (x !== 1) {
- a = 'a';
- v = ', ' + x;
- }
-
- var value = 'hsl' + a + hsl + v + ')';
- return value;
- };
-
- Color.prototype.getColor = function getColor() {
- if (this.a | 0 === 1)
- return this.getHexa();
- return this.getRGBA();
- };
-
- /*=======================================================================*/
- /*=======================================================================*/
-
- /*========== Capture Mouse Movement ==========*/
-
- var setMouseTracking = function setMouseTracking(elem, callback) {
- elem.addEventListener('mousedown', function(e) {
- callback(e);
- document.addEventListener('mousemove', callback);
- });
-
- document.addEventListener('mouseup', function(e) {
- document.removeEventListener('mousemove', callback);
- });
- };
-
- /*====================*/
- // Color Picker Class
- /*====================*/
-
- function ColorPicker(node) {
- this.color = new Color();
- this.node = node;
- this.subscribers = [];
-
- var type = this.node.getAttribute('data-mode');
- var topic = this.node.getAttribute('data-topic');
-
- this.topic = topic;
- this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
- this.color.setFormat(this.picker_mode);
-
- this.createPickingArea();
- this.createHueArea();
-
- this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
- this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
- this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
- this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
-
- this.createAlphaArea();
-
- this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
- this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
- this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
-
- this.createPreviewBox();
- this.createChangeModeButton();
-
- this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
- this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
-
- this.setColor(this.color);
- pickers[topic] = this;
- }
-
- /*************************************************************************/
- // Function for generating the color-picker
- /*************************************************************************/
-
- ColorPicker.prototype.createPickingArea = function createPickingArea() {
- var area = document.createElement('div');
- var picker = document.createElement('div');
-
- area.className = 'picking-area';
- picker.className = 'picker';
-
- this.picking_area = area;
- this.color_picker = picker;
- setMouseTracking(area, this.updateColor.bind(this));
-
- area.appendChild(picker);
- this.node.appendChild(area);
- };
-
- ColorPicker.prototype.createHueArea = function createHueArea() {
- var area = document.createElement('div');
- var picker = document.createElement('div');
-
- area.className = 'hue';
- picker.className ='slider-picker';
-
- this.hue_area = area;
- this.hue_picker = picker;
- setMouseTracking(area, this.updateHueSlider.bind(this));
-
- area.appendChild(picker);
- this.node.appendChild(area);
- };
-
- ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
- var area = document.createElement('div');
- var mask = document.createElement('div');
- var picker = document.createElement('div');
-
- area.className = 'alpha';
- mask.className = 'alpha-mask';
- picker.className = 'slider-picker';
-
- this.alpha_area = area;
- this.alpha_mask = mask;
- this.alpha_picker = picker;
- setMouseTracking(area, this.updateAlphaSlider.bind(this));
-
- area.appendChild(mask);
- mask.appendChild(picker);
- this.node.appendChild(area);
- };
-
- ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
- var preview_box = document.createElement('div');
- var preview_color = document.createElement('div');
-
- preview_box.className = 'preview';
- preview_color.className = 'preview-color';
-
- this.preview_color = preview_color;
-
- preview_box.appendChild(preview_color);
- this.node.appendChild(preview_box);
- };
-
- ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
- var wrapper = document.createElement('div');
- var input = document.createElement('input');
- var info = document.createElement('span');
-
- wrapper.className = 'input';
- wrapper.setAttribute('data-topic', topic);
- info.textContent = title;
- info.className = 'name';
- input.setAttribute('type', 'text');
-
- wrapper.appendChild(info);
- wrapper.appendChild(input);
- this.node.appendChild(wrapper);
-
- input.addEventListener('change', onChangeFunc);
- input.addEventListener('click', function() {
- this.select();
- });
-
- this.subscribe(topic, function(value) {
- input.value = value;
- });
- };
-
- ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
-
- var button = document.createElement('div');
- button.className = 'switch_mode';
- button.addEventListener('click', function() {
- if (this.picker_mode === 'HSV')
- this.setPickerMode('HSL');
- else
- this.setPickerMode('HSV');
-
- }.bind(this));
-
- this.node.appendChild(button);
- };
-
- /*************************************************************************/
- // Updates properties of UI elements
- /*************************************************************************/
-
- ColorPicker.prototype.updateColor = function updateColor(e) {
- var x = e.pageX - this.picking_area.offsetLeft;
- var y = e.pageY - this.picking_area.offsetTop;
- var picker_offset = 5;
-
- // width and height should be the same
- var size = this.picking_area.clientWidth;
-
- if (x &gt; size) x = size;
- if (y &gt; size) y = size;
- if (x &lt; 0) x = 0;
- if (y &lt; 0) y = 0;
-
- var value = 100 - (y * 100 / size) | 0;
- var saturation = x * 100 / size | 0;
-
- if (this.picker_mode === 'HSV')
- this.color.setHSV(this.color.hue, saturation, value);
- if (this.picker_mode === 'HSL')
- this.color.setHSL(this.color.hue, saturation, value);
-
- this.color_picker.style.left = x - picker_offset + 'px';
- this.color_picker.style.top = y - picker_offset + 'px';
-
- this.updateAlphaGradient();
- this.updatePreviewColor();
-
- this.notify('value', value);
- this.notify('lightness', value);
- this.notify('saturation', saturation);
-
- this.notify('red', this.color.r);
- this.notify('green', this.color.g);
- this.notify('blue', this.color.b);
- this.notify('hexa', this.color.getHexa());
-
- notify(this.topic, this.color);
- };
-
- ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
- var x = e.pageX - this.hue_area.offsetLeft;
- var width = this.hue_area.clientWidth;
-
- if (x &lt; 0) x = 0;
- if (x &gt; width) x = width;
-
- // TODO 360 =&gt; 359
- var hue = ((359 * x) / width) | 0;
- // if (hue === 360) hue = 359;
-
- this.updateSliderPosition(this.hue_picker, x);
- this.setHue(hue);
- };
-
- ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
- var x = e.pageX - this.alpha_area.offsetLeft;
- var width = this.alpha_area.clientWidth;
-
- if (x &lt; 0) x = 0;
- if (x &gt; width) x = width;
-
- this.color.a = (x / width).toFixed(2);
-
- this.updateSliderPosition(this.alpha_picker, x);
- this.updatePreviewColor();
-
- this.notify('alpha', this.color.a);
- notify(this.topic, this.color);
- };
-
- ColorPicker.prototype.setHue = function setHue(value) {
- this.color.setHue(value);
-
- this.updatePickerBackground();
- this.updateAlphaGradient();
- this.updatePreviewColor();
-
- this.notify('red', this.color.r);
- this.notify('green', this.color.g);
- this.notify('blue', this.color.b);
- this.notify('hexa', this.color.getHexa());
- this.notify('hue', this.color.hue);
-
- notify(this.topic, this.color);
- };
-
- // Updates when one of Saturation/Value/Lightness changes
- ColorPicker.prototype.updateSLV = function updateSLV() {
- this.updatePickerPosition();
- this.updateAlphaGradient();
- this.updatePreviewColor();
-
- this.notify('red', this.color.r);
- this.notify('green', this.color.g);
- this.notify('blue', this.color.b);
- this.notify('hexa', this.color.getHexa());
-
- notify(this.topic, this.color);
- };
-
- /*************************************************************************/
- // Update positions of various UI elements
- /*************************************************************************/
-
- ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
- var size = this.picking_area.clientWidth;
- var value = 0;
- var offset = 5;
-
- if (this.picker_mode === 'HSV')
- value = this.color.value;
- if (this.picker_mode === 'HSL')
- value = this.color.lightness;
-
- var x = (this.color.saturation * size / 100) | 0;
- var y = size - (value * size / 100) | 0;
-
- this.color_picker.style.left = x - offset + 'px';
- this.color_picker.style.top = y - offset + 'px';
- };
-
- ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
- elem.style.left = Math.max(pos - 3, -2) + 'px';
- };
-
- ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
- var size = this.hue_area.clientWidth;
- var offset = 1;
- var pos = (this.color.hue * size / 360 ) | 0;
- this.hue_picker.style.left = pos - offset + 'px';
- };
-
- ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
- var size = this.alpha_area.clientWidth;
- var offset = 1;
- var pos = (this.color.a * size) | 0;
- this.alpha_picker.style.left = pos - offset + 'px';
- };
-
- /*************************************************************************/
- // Update background colors
- /*************************************************************************/
-
- ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
- var nc = new Color(this.color);
- nc.setHSV(nc.hue, 100, 100);
- this.picking_area.style.backgroundColor = nc.getHexa();
- };
-
- ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
- this.alpha_mask.style.backgroundColor = this.color.getHexa();
- };
-
- ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
- this.preview_color.style.backgroundColor = this.color.getColor();
- };
-
- /*************************************************************************/
- // Update input elements
- /*************************************************************************/
-
- ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
- var value = parseInt(e.target.value);
- this.setHue(value);
- this.updateHuePicker();
- };
-
- ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
- var value = parseInt(e.target.value);
- this.color.setSaturation(value);
- e.target.value = this.color.saturation;
- this.updateSLV();
- };
-
- ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
- var value = parseInt(e.target.value);
- this.color.setValue(value);
- e.target.value = this.color.value;
- this.updateSLV();
- };
-
- ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
- var value = parseInt(e.target.value);
- this.color.setLightness(value);
- e.target.value = this.color.lightness;
- this.updateSLV();
- };
-
- ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
- var value = parseInt(e.target.value);
- this.color.setByName('r', value);
- e.target.value = this.color.r;
- this.setColor(this.color);
- };
-
- ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
- var value = parseInt(e.target.value);
- this.color.setByName('g', value);
- e.target.value = this.color.g;
- this.setColor(this.color);
- };
-
- ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
- var value = parseInt(e.target.value);
- this.color.setByName('b', value);
- e.target.value = this.color.b;
- this.setColor(this.color);
- };
-
- ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
- var value = parseFloat(e.target.value);
-
- if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
- value &gt;= 0 &amp;&amp; value &lt;= 1)
- this.color.a = value.toFixed(2);
-
- e.target.value = this.color.a;
- this.updateAlphaPicker();
- };
-
- ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
- var value = e.target.value;
- this.color.setHexa(value);
- this.setColor(this.color);
- };
-
- /*************************************************************************/
- // Internal Pub/Sub
- /*************************************************************************/
-
- ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
- this.subscribers[topic] = callback;
- };
-
- ColorPicker.prototype.notify = function notify(topic, value) {
- if (this.subscribers[topic])
- this.subscribers[topic](value);
- };
-
- /*************************************************************************/
- // Set Picker Properties
- /*************************************************************************/
-
- ColorPicker.prototype.setColor = function setColor(color) {
- if(color instanceof Color !== true) {
- console.log('Typeof parameter not Color');
- return;
- }
-
- if (color.format !== this.picker_mode) {
- color.setFormat(this.picker_mode);
- color.updateHSX();
- }
-
- this.color.copy(color);
- this.updateHuePicker();
- this.updatePickerPosition();
- this.updatePickerBackground();
- this.updateAlphaPicker();
- this.updateAlphaGradient();
- this.updatePreviewColor();
-
- this.notify('red', this.color.r);
- this.notify('green', this.color.g);
- this.notify('blue', this.color.b);
-
- this.notify('hue', this.color.hue);
- this.notify('saturation', this.color.saturation);
- this.notify('value', this.color.value);
- this.notify('lightness', this.color.lightness);
-
- this.notify('alpha', this.color.a);
- this.notify('hexa', this.color.getHexa());
- notify(this.topic, this.color);
- };
-
- ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
- if (mode !== 'HSV' &amp;&amp; mode !== 'HSL')
- return;
-
- this.picker_mode = mode;
- this.node.setAttribute('data-mode', this.picker_mode);
- this.setColor(this.color);
- };
-
- /*************************************************************************/
- // UNUSED
- /*************************************************************************/
-
- var setPickerMode = function setPickerMode(topic, mode) {
- if (pickers[topic])
- pickers[topic].setPickerMode(mode);
- };
-
- var setColor = function setColor(topic, color) {
- if (pickers[topic])
- pickers[topic].setColor(color);
- };
-
- var getColor = function getColor(topic) {
- if (pickers[topic])
- return new Color(pickers[topic].color);
- };
-
- var subscribe = function subscribe(topic, callback) {
- if (subscribers[topic] === undefined)
- subscribers[topic] = [];
-
- subscribers[topic].push(callback);
- };
-
- var unsubscribe = function unsubscribe(callback) {
- subscribers.indexOf(callback);
- subscribers.splice(index, 1);
- };
-
- var notify = function notify(topic, value) {
- if (subscribers[topic] === undefined || subscribers[topic].length === 0)
- return;
-
- var color = new Color(value);
- for (var i in subscribers[topic])
- subscribers[topic][i](color);
- };
-
- var init = function init() {
- var elem = document.querySelectorAll('.ui-color-picker');
- var size = elem.length;
- for (var i = 0; i &lt; size; i++)
- new ColorPicker(elem[i]);
- };
-
- return {
- init : init,
- Color : Color,
- RGBColor : RGBColor,
- RGBAColor : RGBAColor,
- HSVColor : HSVColor,
- HSVAColor : HSVAColor,
- HSLColor : HSLColor,
- HSLAColor : HSLAColor,
- setColor : setColor,
- getColor : getColor,
- subscribe : subscribe,
- unsubscribe : unsubscribe,
- setPickerMode : setPickerMode
- };
-
-})();
-
-
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
- var subscribers = {};
- var sliders = [];
-
- var InputComponent = function InputComponent(obj) {
- var input = document.createElement('input');
- input.setAttribute('type', 'text');
- input.style.width = 50 + obj.precision * 10 + 'px';
-
- input.addEventListener('click', function(e) {
- this.select();
- });
-
- input.addEventListener('change', function(e) {
- var value = parseFloat(e.target.value);
-
- if (isNaN(value) === true)
- setValue(obj.topic, obj.value);
- else
- setValue(obj.topic, value);
- });
-
- return input;
- };
-
- var SliderComponent = function SliderComponent(obj, sign) {
- var slider = document.createElement('div');
- var startX = null;
- var start_value = 0;
-
- slider.addEventListener("click", function(e) {
- document.removeEventListener("mousemove", sliderMotion);
- setValue(obj.topic, obj.value + obj.step * sign);
- });
-
- slider.addEventListener("mousedown", function(e) {
- startX = e.clientX;
- start_value = obj.value;
- document.body.style.cursor = "e-resize";
-
- document.addEventListener("mouseup", slideEnd);
- document.addEventListener("mousemove", sliderMotion);
- });
-
- var slideEnd = function slideEnd(e) {
- document.removeEventListener("mousemove", sliderMotion);
- document.body.style.cursor = "auto";
- slider.style.cursor = "pointer";
- };
-
- var sliderMotion = function sliderMotion(e) {
- slider.style.cursor = "e-resize";
- var delta = (e.clientX - startX) / obj.sensivity | 0;
- var value = delta * obj.step + start_value;
- setValue(obj.topic, value);
- };
-
- return slider;
- };
-
- var InputSlider = function(node) {
- var min = parseFloat(node.getAttribute('data-min'));
- var max = parseFloat(node.getAttribute('data-max'));
- var step = parseFloat(node.getAttribute('data-step'));
- var value = parseFloat(node.getAttribute('data-value'));
- var topic = node.getAttribute('data-topic');
- var unit = node.getAttribute('data-unit');
- var name = node.getAttribute('data-info');
- var sensivity = node.getAttribute('data-sensivity') | 0;
- var precision = node.getAttribute('data-precision') | 0;
-
- this.min = isNaN(min) ? 0 : min;
- this.max = isNaN(max) ? 100 : max;
- this.precision = precision &gt;= 0 ? precision : 0;
- this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
- this.topic = topic;
- this.node = node;
- this.unit = unit === null ? '' : unit;
- this.sensivity = sensivity &gt; 0 ? sensivity : 5;
- value = isNaN(value) ? this.min : value;
-
- var input = new InputComponent(this);
- var slider_left = new SliderComponent(this, -1);
- var slider_right = new SliderComponent(this, 1);
-
- slider_left.className = 'ui-input-slider-left';
- slider_right.className = 'ui-input-slider-right';
-
- if (name) {
- var info = document.createElement('span');
- info.className = 'ui-input-slider-info';
- info.textContent = name;
- node.appendChild(info);
- }
-
- node.appendChild(slider_left);
- node.appendChild(input);
- node.appendChild(slider_right);
-
- this.input = input;
- sliders[topic] = this;
- setValue(topic, value);
- };
-
- InputSlider.prototype.setInputValue = function setInputValue() {
- this.input.value = this.value.toFixed(this.precision) + this.unit;
- };
-
- var setValue = function setValue(topic, value, send_notify) {
- var slider = sliders[topic];
- if (slider === undefined)
- return;
-
- value = parseFloat(value.toFixed(slider.precision));
-
- if (value &gt; slider.max) value = slider.max;
- if (value &lt; slider.min) value = slider.min;
-
- slider.value = value;
- slider.node.setAttribute('data-value', value);
-
- slider.setInputValue();
-
- if (send_notify === false)
- return;
-
- notify.call(slider);
- };
-
- var setMax = function setMax(topic, value) {
- var slider = sliders[topic];
- if (slider === undefined)
- return;
-
- slider.max = value;
- setValue(topic, slider.value);
- };
-
- var setMin = function setMin(topic, value) {
- var slider = sliders[topic];
- if (slider === undefined)
- return;
-
- slider.min = value;
- setValue(topic, slider.value);
- };
-
- var setUnit = function setUnit(topic, unit) {
- var slider = sliders[topic];
- if (slider === undefined)
- return;
-
- slider.unit = unit;
- setValue(topic, slider.value);
- };
-
- var setStep = function setStep(topic, value) {
- var slider = sliders[topic];
- if (slider === undefined)
- return;
-
- slider.step = parseFloat(value);
- setValue(topic, slider.value);
- };
-
- var setPrecision = function setPrecision(topic, value) {
- var slider = sliders[topic];
- if (slider === undefined)
- return;
-
- value = value | 0;
- slider.precision = value;
-
- var step = parseFloat(slider.step.toFixed(value));
- if (step === 0)
- slider.step = 1 / Math.pow(10, value);
-
- setValue(topic, slider.value);
- };
-
- var setSensivity = function setSensivity(topic, value) {
- var slider = sliders[topic];
- if (slider === undefined)
- return;
-
- value = value | 0;
-
- slider.sensivity = value &gt; 0 ? value : 5;
- };
-
- var getNode = function getNode(topic) {
- return sliders[topic].node;
- };
-
- var getPrecision = function getPrecision(topic) {
- return sliders[topic].precision;
- };
-
- var getStep = function getStep(topic) {
- return sliders[topic].step;
- };
-
- var subscribe = function subscribe(topic, callback) {
- if (subscribers[topic] === undefined)
- subscribers[topic] = [];
- subscribers[topic].push(callback);
- };
-
- var unsubscribe = function unsubscribe(topic, callback) {
- subscribers[topic].indexOf(callback);
- subscribers[topic].splice(index, 1);
- };
-
- var notify = function notify() {
- if (subscribers[this.topic] === undefined)
- return;
- for (var i = 0; i &lt; subscribers[this.topic].length; i++)
- subscribers[this.topic][i](this.value);
- };
-
- var createSlider = function createSlider(topic, label) {
- var slider = document.createElement('div');
- slider.className = 'ui-input-slider';
- slider.setAttribute('data-topic', topic);
-
- if (label !== undefined)
- slider.setAttribute('data-info', label);
-
- new InputSlider(slider);
- return slider;
- };
-
- var init = function init() {
- var elem = document.querySelectorAll('.ui-input-slider');
- var size = elem.length;
- for (var i = 0; i &lt; size; i++)
- new InputSlider(elem[i]);
- };
-
- return {
- init : init,
- setMax : setMax,
- setMin : setMin,
- setUnit : setUnit,
- setStep : setStep,
- getNode : getNode,
- getStep : getStep,
- setValue : setValue,
- subscribe : subscribe,
- unsubscribe : unsubscribe,
- setPrecision : setPrecision,
- setSensivity : setSensivity,
- getPrecision : getPrecision,
- createSlider : createSlider,
- };
-
-})();
-
-
-'use strict';
-
-window.addEventListener("load", function() {
- ColorPickerTool.init();
-});
-
-var ColorPickerTool = (function ColorPickerTool() {
-
- /*========== Get DOM Element By ID ==========*/
-
- function getElemById(id) {
- return document.getElementById(id);
- }
-
- function allowDropEvent(e) {
- e.preventDefault();
- }
-
- /*========== Make an element resizable relative to it's parent ==========*/
-
- var UIComponent = (function UIComponent() {
-
- function makeResizable(elem, axis) {
- var valueX = 0;
- var valueY = 0;
- var action = 0;
-
- var resizeStart = function resizeStart(e) {
- e.stopPropagation();
- e.preventDefault();
- if (e.button !== 0)
- return;
-
- valueX = e.clientX - elem.clientWidth;
- valueY = e.clientY - elem.clientHeight;
-
- document.body.setAttribute('data-resize', axis);
- document.addEventListener('mousemove', mouseMove);
- document.addEventListener('mouseup', resizeEnd);
- };
-
- var mouseMove = function mouseMove(e) {
- if (action &gt;= 0)
- elem.style.width = e.clientX - valueX + 'px';
- if (action &lt;= 0)
- elem.style.height = e.clientY - valueY + 'px';
- };
-
- var resizeEnd = function resizeEnd(e) {
- if (e.button !== 0)
- return;
-
- document.body.removeAttribute('data-resize', axis);
- document.removeEventListener('mousemove', mouseMove);
- document.removeEventListener('mouseup', resizeEnd);
- };
-
- var handle = document.createElement('div');
- handle.className = 'resize-handle';
-
- if (axis === 'width') action = 1;
- else if (axis === 'height') action = -1;
- else axis = 'both';
-
- handle.className = 'resize-handle';
- handle.setAttribute('data-resize', axis);
- handle.addEventListener('mousedown', resizeStart);
- elem.appendChild(handle);
- };
-
- /*========== Make an element draggable relative to it's parent ==========*/
-
- var makeDraggable = function makeDraggable(elem, endFunction) {
-
- var offsetTop;
- var offsetLeft;
-
- elem.setAttribute('data-draggable', 'true');
-
- var dragStart = function dragStart(e) {
- e.preventDefault();
- e.stopPropagation();
-
- if (e.target.getAttribute('data-draggable') !== 'true' ||
- e.target !== elem || e.button !== 0)
- return;
-
- offsetLeft = e.clientX - elem.offsetLeft;
- offsetTop = e.clientY - elem.offsetTop;
-
- document.addEventListener('mousemove', mouseDrag);
- document.addEventListener('mouseup', dragEnd);
- };
-
- var dragEnd = function dragEnd(e) {
- if (e.button !== 0)
- return;
-
- document.removeEventListener('mousemove', mouseDrag);
- document.removeEventListener('mouseup', dragEnd);
- };
-
- var mouseDrag = function mouseDrag(e) {
- elem.style.left = e.clientX - offsetLeft + 'px';
- elem.style.top = e.clientY - offsetTop + 'px';
- };
-
- elem.addEventListener('mousedown', dragStart, false);
- };
-
- return {
- makeResizable : makeResizable,
- makeDraggable : makeDraggable
- };
-
- })();
-
- /*========== Color Class ==========*/
-
- var Color = UIColorPicker.Color;
- var HSLColor = UIColorPicker.HSLColor;
-
- /**
- * ColorPalette
- */
- var ColorPalette = (function ColorPalette() {
-
- var samples = [];
- var color_palette;
- var complementary;
-
- var hideNode = function(node) {
- node.setAttribute('data-hidden', 'true');
- };
-
- var ColorSample = function ColorSample(id) {
- var node = document.createElement('div');
- node.className = 'sample';
-
- this.uid = samples.length;
- this.node = node;
- this.color = new Color();
-
- node.setAttribute('sample-id', this.uid);
- node.setAttribute('draggable', 'true');
- node.addEventListener('dragstart', this.dragStart.bind(this));
- node.addEventListener('click', this.pickColor.bind(this));
-
- samples.push(this);
- };
-
- ColorSample.prototype.updateBgColor = function updateBgColor() {
- this.node.style.backgroundColor = this.color.getColor();
- };
-
- ColorSample.prototype.updateColor = function updateColor(color) {
- this.color.copy(color);
- this.updateBgColor();
- };
-
- ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
- this.color.copy(color);
- var hue = (steps * degree + this.color.hue) % 360;
- if (hue &lt; 0) hue += 360;
- this.color.setHue(hue);
- this.updateBgColor();
- };
-
- ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
- var saturation = color.saturation + value * steps;
- if (saturation &lt;= 0) {
- this.node.setAttribute('data-hidden', 'true');
- return;
- }
-
- this.node.removeAttribute('data-hidden');
- this.color.copy(color);
- this.color.setSaturation(saturation);
- this.updateBgColor();
- };
-
- ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
- var lightness = color.lightness + value * steps;
- if (lightness &lt;= 0) {
- this.node.setAttribute('data-hidden', 'true');
- return;
- }
- this.node.removeAttribute('data-hidden');
- this.color.copy(color);
- this.color.setLightness(lightness);
- this.updateBgColor();
- };
-
- ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
- var brightness = color.value + value * steps;
- if (brightness &lt;= 0) {
- this.node.setAttribute('data-hidden', 'true');
- return;
- }
- this.node.removeAttribute('data-hidden');
- this.color.copy(color);
- this.color.setValue(brightness);
- this.updateBgColor();
- };
-
- ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
- var alpha = parseFloat(color.a) + value * steps;
- if (alpha &lt;= 0) {
- this.node.setAttribute('data-hidden', 'true');
- return;
- }
- this.node.removeAttribute('data-hidden');
- this.color.copy(color);
- this.color.a = parseFloat(alpha.toFixed(2));
- this.updateBgColor();
- };
-
- ColorSample.prototype.pickColor = function pickColor() {
- UIColorPicker.setColor('picker', this.color);
- };
-
- ColorSample.prototype.dragStart = function dragStart(e) {
- e.dataTransfer.setData('sampleID', this.uid);
- e.dataTransfer.setData('location', 'palette-samples');
- };
-
- var Palette = function Palette(text, size) {
- this.samples = [];
- this.locked = false;
-
- var palette = document.createElement('div');
- var title = document.createElement('div');
- var controls = document.createElement('div');
- var container = document.createElement('div');
- var lock = document.createElement('div');
-
- container.className = 'container';
- title.className = 'title';
- palette.className = 'palette';
- controls.className = 'controls';
- lock.className = 'lock';
- title.textContent = text;
-
- controls.appendChild(lock);
- container.appendChild(title);
- container.appendChild(controls);
- container.appendChild(palette);
-
- lock.addEventListener('click', function () {
- this.locked = !this.locked;
- lock.setAttribute('locked-state', this.locked);
- }.bind(this));
-
- for(var i = 0; i &lt; size; i++) {
- var sample = new ColorSample();
- this.samples.push(sample);
- palette.appendChild(sample.node);
- }
-
- this.container = container;
- this.title = title;
- };
-
- var createHuePalette = function createHuePalette() {
- var palette = new Palette('Hue', 12);
-
- UIColorPicker.subscribe('picker', function(color) {
- if (palette.locked === true)
- return;
-
- for(var i = 0; i &lt; 12; i++) {
- palette.samples[i].updateHue(color, 30, i);
- }
- });
-
- color_palette.appendChild(palette.container);
- };
-
- var createSaturationPalette = function createSaturationPalette() {
- var palette = new Palette('Saturation', 11);
-
- UIColorPicker.subscribe('picker', function(color) {
- if (palette.locked === true)
- return;
-
- for(var i = 0; i &lt; 11; i++) {
- palette.samples[i].updateSaturation(color, -10, i);
- }
- });
-
- color_palette.appendChild(palette.container);
- };
-
- /* Brightness or Lightness - depends on the picker mode */
- var createVLPalette = function createSaturationPalette() {
- var palette = new Palette('Lightness', 11);
-
- UIColorPicker.subscribe('picker', function(color) {
- if (palette.locked === true)
- return;
-
- if(color.format === 'HSL') {
- palette.title.textContent = 'Lightness';
- for(var i = 0; i &lt; 11; i++)
- palette.samples[i].updateLightness(color, -10, i);
- }
- else {
- palette.title.textContent = 'Value';
- for(var i = 0; i &lt; 11; i++)
- palette.samples[i].updateBrightness(color, -10, i);
- }
- });
-
- color_palette.appendChild(palette.container);
- };
-
- var isBlankPalette = function isBlankPalette(container, value) {
- if (value === 0) {
- container.setAttribute('data-collapsed', 'true');
- return true;
- }
-
- container.removeAttribute('data-collapsed');
- return false;
- };
-
- var createAlphaPalette = function createAlphaPalette() {
- var palette = new Palette('Alpha', 10);
-
- UIColorPicker.subscribe('picker', function(color) {
- if (palette.locked === true)
- return;
-
- for(var i = 0; i &lt; 10; i++) {
- palette.samples[i].updateAlpha(color, -0.1, i);
- }
- });
-
- color_palette.appendChild(palette.container);
- };
-
- var getSampleColor = function getSampleColor(id) {
- if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
- return new Color(samples[id].color);
- };
-
- var init = function init() {
- color_palette = getElemById('color-palette');
-
- createHuePalette();
- createSaturationPalette();
- createVLPalette();
- createAlphaPalette();
-
- };
-
- return {
- init : init,
- getSampleColor : getSampleColor
- };
-
- })();
-
- /**
- * ColorInfo
- */
- var ColorInfo = (function ColorInfo() {
-
- var info_box;
- var select;
- var RGBA;
- var HEXA;
- var HSLA;
-
- var updateInfo = function updateInfo(color) {
- if (color.a | 0 === 1) {
- RGBA.info.textContent = 'RGB';
- HSLA.info.textContent = 'HSL';
- }
- else {
- RGBA.info.textContent = 'RGBA';
- HSLA.info.textContent = 'HSLA';
- }
-
- RGBA.value.value = color.getRGBA();
- HSLA.value.value = color.getHSLA();
- HEXA.value.value = color.getHexa();
- };
-
- var InfoProperty = function InfoProperty(info) {
-
- var node = document.createElement('div');
- var title = document.createElement('div');
- var value = document.createElement('input');
- var copy = document.createElement('div');
-
- node.className = 'property';
- title.className = 'type';
- value.className = 'value';
- copy.className = 'copy';
-
- title.textContent = info;
- value.setAttribute('type', 'text');
-
- copy.addEventListener('click', function() {
- value.select();
- });
-
- node.appendChild(title);
- node.appendChild(value);
- node.appendChild(copy);
-
- this.node = node;
- this.value = value;
- this.info = title;
-
- info_box.appendChild(node);
- };
-
- var init = function init() {
-
- info_box = getElemById('color-info');
-
- RGBA = new InfoProperty('RGBA');
- HSLA = new InfoProperty('HSLA');
- HEXA = new InfoProperty('HEXA');
-
- UIColorPicker.subscribe('picker', updateInfo);
-
- };
-
- return {
- init: init
- };
-
- })();
-
- /**
- * ColorPicker Samples
- */
- var ColorPickerSamples = (function ColorPickerSamples() {
-
- var samples = [];
- var nr_samples = 0;
- var active = null;
- var container = null;
- var samples_per_line = 10;
- var trash_can = null;
- var base_color = new HSLColor(0, 50, 100);
- var add_btn;
- var add_btn_pos;
-
- var ColorSample = function ColorSample() {
- var node = document.createElement('div');
- node.className = 'sample';
-
- this.uid = samples.length;
- this.index = nr_samples++;
- this.node = node;
- this.color = new Color(base_color);
-
- node.setAttribute('sample-id', this.uid);
- node.setAttribute('draggable', 'true');
-
- node.addEventListener('dragstart', this.dragStart.bind(this));
- node.addEventListener('dragover' , allowDropEvent);
- node.addEventListener('drop' , this.dragDrop.bind(this));
-
- this.updatePosition(this.index);
- this.updateBgColor();
- samples.push(this);
- };
-
- ColorSample.prototype.updateBgColor = function updateBgColor() {
- this.node.style.backgroundColor = this.color.getColor();
- };
-
- ColorSample.prototype.updatePosition = function updatePosition(index) {
- this.index = index;
- this.posY = 5 + ((index / samples_per_line) | 0) * 52;
- this.posX = 5 + ((index % samples_per_line) | 0) * 52;
- this.node.style.top = this.posY + 'px';
- this.node.style.left = this.posX + 'px';
- };
-
- ColorSample.prototype.updateColor = function updateColor(color) {
- this.color.copy(color);
- this.updateBgColor();
- };
-
- ColorSample.prototype.activate = function activate() {
- UIColorPicker.setColor('picker', this.color);
- this.node.setAttribute('data-active', 'true');
- };
-
- ColorSample.prototype.deactivate = function deactivate() {
- this.node.removeAttribute('data-active');
- };
-
- ColorSample.prototype.dragStart = function dragStart(e) {
- e.dataTransfer.setData('sampleID', this.uid);
- e.dataTransfer.setData('location', 'picker-samples');
- };
-
- ColorSample.prototype.dragDrop = function dragDrop(e) {
- e.stopPropagation();
- this.color = Tool.getSampleColorFrom(e);
- this.updateBgColor();
- };
-
- ColorSample.prototype.deleteSample = function deleteSample() {
- container.removeChild(this.node);
- samples[this.uid] = null;
- nr_samples--;
- };
-
- var updateUI = function updateUI() {
- updateContainerProp();
-
- var index = 0;
- var nr = samples.length;
- for (var i=0; i &lt; nr; i++)
- if (samples[i] !== null) {
- samples[i].updatePosition(index);
- index++;
- }
-
- AddSampleButton.updatePosition(index);
- };
-
- var deleteSample = function deleteSample(e) {
- trash_can.parentElement.setAttribute('drag-state', 'none');
-
- var location = e.dataTransfer.getData('location');
- if (location !== 'picker-samples')
- return;
-
- var sampleID = e.dataTransfer.getData('sampleID');
- samples[sampleID].deleteSample();
- console.log(samples);
-
- updateUI();
- };
-
- var createDropSample = function createDropSample() {
- var sample = document.createElement('div');
- sample.id = 'drop-effect-sample';
- sample.className = 'sample';
- container.appendChild(sample);
- };
-
- var setActivateSample = function setActivateSample(e) {
- if (e.target.className !== 'sample')
- return;
-
- unsetActiveSample(active);
- Tool.unsetVoidSample();
- CanvasSamples.unsetActiveSample();
- active = samples[e.target.getAttribute('sample-id')];
- active.activate();
- };
-
- var unsetActiveSample = function unsetActiveSample() {
- if (active)
- active.deactivate();
- active = null;
- };
-
- var getSampleColor = function getSampleColor(id) {
- if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
- return new Color(samples[id].color);
- };
-
- var updateContainerProp = function updateContainerProp() {
- samples_per_line = ((container.clientWidth - 5) / 52) | 0;
- var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
- container.style.height = height + 10 + 'px';
- };
-
- var AddSampleButton = (function AddSampleButton() {
- var node;
- var _index = 0;
- var _posX;
- var _posY;
-
- var updatePosition = function updatePosition(index) {
- _index = index;
- _posY = 5 + ((index / samples_per_line) | 0) * 52;
- _posX = 5 + ((index % samples_per_line) | 0) * 52;
-
- node.style.top = _posY + 'px';
- node.style.left = _posX + 'px';
- };
-
- var addButtonClick = function addButtonClick() {
- var sample = new ColorSample();
- container.appendChild(sample.node);
- updatePosition(_index + 1);
- updateUI();
- };
-
- var init = function init() {
- node = document.createElement('div');
- var icon = document.createElement('div');
-
- node.className = 'sample';
- icon.id = 'add-icon';
- node.appendChild(icon);
- node.addEventListener('click', addButtonClick);
-
- updatePosition(0);
- container.appendChild(node);
- };
-
- return {
- init : init,
- updatePosition : updatePosition
- };
- })();
-
- var init = function init() {
- container = getElemById('picker-samples');
- trash_can = getElemById('trash-can');
-
- AddSampleButton.init();
-
- for (var i=0; i&lt;16; i++) {
- var sample = new ColorSample();
- container.appendChild(sample.node);
- }
-
- AddSampleButton.updatePosition(samples.length);
- updateUI();
-
- active = samples[0];
- active.activate();
-
- container.addEventListener('click', setActivateSample);
-
- trash_can.addEventListener('dragover', allowDropEvent);
- trash_can.addEventListener('dragenter', function() {
- this.parentElement.setAttribute('drag-state', 'enter');
- });
- trash_can.addEventListener('dragleave', function(e) {
- this.parentElement.setAttribute('drag-state', 'none');
- });
- trash_can.addEventListener('drop', deleteSample);
-
- UIColorPicker.subscribe('picker', function(color) {
- if (active)
- active.updateColor(color);
- });
-
- };
-
- return {
- init : init,
- getSampleColor : getSampleColor,
- unsetActiveSample : unsetActiveSample
- };
-
- })();
-
- /**
- * Canvas Samples
- */
- var CanvasSamples = (function CanvasSamples() {
-
- var active = null;
- var canvas = null;
- var samples = [];
- var zindex = null;
- var tutorial = true;
-
- var CanvasSample = function CanvasSample(color, posX, posY) {
-
- var node = document.createElement('div');
- var pick = document.createElement('div');
- var delete_btn = document.createElement('div');
- node.className = 'sample';
- pick.className = 'pick';
- delete_btn.className = 'delete';
-
- this.uid = samples.length;
- this.node = node;
- this.color = color;
- this.updateBgColor();
- this.zIndex = 1;
-
- node.style.top = posY - 50 + 'px';
- node.style.left = posX - 50 + 'px';
- node.setAttribute('sample-id', this.uid);
-
- node.appendChild(pick);
- node.appendChild(delete_btn);
-
- var activate = function activate() {
- setActiveSample(this);
- }.bind(this);
-
- node.addEventListener('dblclick', activate);
- pick.addEventListener('click', activate);
- delete_btn.addEventListener('click', this.deleteSample.bind(this));
-
- UIComponent.makeDraggable(node);
- UIComponent.makeResizable(node);
-
- samples.push(this);
- canvas.appendChild(node);
- return this;
- };
-
- CanvasSample.prototype.updateBgColor = function updateBgColor() {
- this.node.style.backgroundColor = this.color.getColor();
- };
-
- CanvasSample.prototype.updateColor = function updateColor(color) {
- this.color.copy(color);
- this.updateBgColor();
- };
-
- CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
- this.zIndex = value;
- this.node.style.zIndex = value;
- };
-
- CanvasSample.prototype.activate = function activate() {
- this.node.setAttribute('data-active', 'true');
- zindex.setAttribute('data-active', 'true');
-
- UIColorPicker.setColor('picker', this.color);
- InputSliderManager.setValue('z-index', this.zIndex);
- };
-
- CanvasSample.prototype.deactivate = function deactivate() {
- this.node.removeAttribute('data-active');
- zindex.removeAttribute('data-active');
- };
-
- CanvasSample.prototype.deleteSample = function deleteSample() {
- if (active === this)
- unsetActiveSample();
- canvas.removeChild(this.node);
- samples[this.uid] = null;
- };
-
- CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
- this.node.style.top = posY - this.startY + 'px';
- this.node.style.left = posX - this.startX + 'px';
- };
-
- var canvasDropEvent = function canvasDropEvent(e) {
- var color = Tool.getSampleColorFrom(e);
-
- if (color) {
- var offsetX = e.pageX - canvas.offsetLeft;
- var offsetY = e.pageY - canvas.offsetTop;
- var sample = new CanvasSample(color, offsetX, offsetY);
- if (tutorial) {
- tutorial = false;
- canvas.removeAttribute('data-tutorial');
- var info = new CanvasSample(new Color(), 100, 100);
- info.node.setAttribute('data-tutorial', 'dblclick');
- }
- }
-
- };
-
- var setActiveSample = function setActiveSample(sample) {
- ColorPickerSamples.unsetActiveSample();
- Tool.unsetVoidSample();
- unsetActiveSample();
- active = sample;
- active.activate();
- };
-
- var unsetActiveSample = function unsetActiveSample() {
- if (active)
- active.deactivate();
- active = null;
- };
-
- var createToggleBgButton = function createToggleBgButton() {
- var button = document.createElement('div');
- var state = false;
- button.className = 'toggle-bg';
- canvas.appendChild(button);
-
- button.addEventListener('click', function() {
- console.log(state);
- state = !state;
- canvas.setAttribute('data-bg', state);
- });
- };
-
- var init = function init() {
- canvas = getElemById('canvas');
- zindex = getElemById('zindex');
-
- canvas.addEventListener('dragover', allowDropEvent);
- canvas.addEventListener('drop', canvasDropEvent);
-
- createToggleBgButton();
-
- UIColorPicker.subscribe('picker', function(color) {
- if (active) active.updateColor(color);
- });
-
- InputSliderManager.subscribe('z-index', function (value) {
- if (active) active.updateZIndex(value);
- });
-
- UIComponent.makeResizable(canvas, 'height');
- };
-
- return {
- init : init,
- unsetActiveSample : unsetActiveSample
- };
-
- })();
-
- var StateButton = function StateButton(node, state) {
- this.state = false;
- this.callback = null;
-
- node.addEventListener('click', function() {
- this.state = !this.state;
- if (typeof this.callback === "function")
- this.callback(this.state);
- }.bind(this));
- };
-
- StateButton.prototype.set = function set() {
- this.state = true;
- if (typeof this.callback === "function")
- this.callback(this.state);
- };
-
- StateButton.prototype.unset = function unset() {
- this.state = false;
- if (typeof this.callback === "function")
- this.callback(this.state);
- };
-
- StateButton.prototype.subscribe = function subscribe(func) {
- this.callback = func;
- };
-
-
- /**
- * Tool
- */
- var Tool = (function Tool() {
-
- var samples = [];
- var controls = null;
- var void_sw;
-
- var createPickerModeSwitch = function createPickerModeSwitch() {
- var parent = getElemById('controls');
- var icon = document.createElement('div');
- var button = document.createElement('div');
- var hsv = document.createElement('div');
- var hsl = document.createElement('div');
- var active = null;
-
- icon.className = 'icon picker-icon';
- button.className = 'switch';
- button.appendChild(hsv);
- button.appendChild(hsl);
-
- hsv.textContent = 'HSV';
- hsl.textContent = 'HSL';
-
- active = hsl;
- active.setAttribute('data-active', 'true');
-
- function switchPickingModeTo(elem) {
- active.removeAttribute('data-active');
- active = elem;
- active.setAttribute('data-active', 'true');
- UIColorPicker.setPickerMode('picker', active.textContent);
- };
-
- var picker_sw = new StateButton(icon);
- picker_sw.subscribe(function() {
- if (active === hsv)
- switchPickingModeTo(hsl);
- else
- switchPickingModeTo(hsv);
- });
-
- hsv.addEventListener('click', function() {
- switchPickingModeTo(hsv);
- });
- hsl.addEventListener('click', function() {
- switchPickingModeTo(hsl);
- });
-
- parent.appendChild(icon);
- parent.appendChild(button);
- };
-
- var setPickerDragAndDrop = function setPickerDragAndDrop() {
- var preview = document.querySelector('#picker .preview-color');
- var picking_area = document.querySelector('#picker .picking-area');
-
- preview.setAttribute('draggable', 'true');
- preview.addEventListener('drop', drop);
- preview.addEventListener('dragstart', dragStart);
- preview.addEventListener('dragover', allowDropEvent);
-
- picking_area.addEventListener('drop', drop);
- picking_area.addEventListener('dragover', allowDropEvent);
-
- function drop(e) {
- var color = getSampleColorFrom(e);
- UIColorPicker.setColor('picker', color);
- };
-
- function dragStart(e) {
- e.dataTransfer.setData('sampleID', 'picker');
- e.dataTransfer.setData('location', 'picker');
- };
- };
-
- var getSampleColorFrom = function getSampleColorFrom(e) {
- var sampleID = e.dataTransfer.getData('sampleID');
- var location = e.dataTransfer.getData('location');
-
- if (location === 'picker')
- return UIColorPicker.getColor(sampleID);
- if (location === 'picker-samples')
- return ColorPickerSamples.getSampleColor(sampleID);
- if (location === 'palette-samples')
- return ColorPalette.getSampleColor(sampleID);
- };
-
- var setVoidSwitch = function setVoidSwitch() {
- var void_sample = getElemById('void-sample');
- void_sw = new StateButton(void_sample);
- void_sw.subscribe( function (state) {
- void_sample.setAttribute('data-active', state);
- if (state === true) {
- ColorPickerSamples.unsetActiveSample();
- CanvasSamples.unsetActiveSample();
- }
- });
- };
-
- var unsetVoidSample = function unsetVoidSample() {
- void_sw.unset();
- };
-
- var init = function init() {
- controls = getElemById('controls');
-
- var color = new Color();
- color.setHSL(0, 51, 51);
- UIColorPicker.setColor('picker', color);
-
- setPickerDragAndDrop();
- createPickerModeSwitch();
- setVoidSwitch();
- };
-
- return {
- init : init,
- unsetVoidSample : unsetVoidSample,
- getSampleColorFrom : getSampleColorFrom
- };
-
- })();
-
- var init = function init() {
- UIColorPicker.init();
- InputSliderManager.init();
- ColorInfo.init();
- ColorPalette.init();
- ColorPickerSamples.init();
- CanvasSamples.init();
- Tool.init();
- };
-
- return {
- init : init
- };
-
-})();
-</pre>
-</div>
-
-<p>{{CSSRef}}</p>
+{{CSSRef}}
-<p><span class="seoSummary">このツールは、ウェブの独自の色を簡単に作成、調整、実験することができます。</span> HEXA 色, RGB (Red/Green/Blue), HSL (Hue/Saturation/Lightness) RGB など、 <a href="/ja/docs/Web/CSS">CSS</a> で対応している様々な<a href="/ja/docs/Web/CSS/color_value">色形式</a>に変換することもできます。アルファチャネルの制御も、 RGB (rgba) 及び HSL (hsla) 形式で対応しています。</p>
+このツールは、ウェブの独自の色を簡単に作成、調整、実験することができます。 HEXA 色, RGB (Red/Green/Blue), HSL (Hue/Saturation/Lightness) RGB など、 [CSS](/ja/docs/Web/CSS) で対応している様々な[色形式](/ja/docs/Web/CSS/color_value)に変換することもできます。アルファチャネルの制御も、 RGB (rgba) および HSL (hsla) 形式で対応しています。
-<p>色を定義するパラメーターを調整すると、３つの標準ウェブ CSS 形式すべてが表示されます。さらに、現在選択されている色に基づいて、 HSL および HSV のパレット、およびアルファが生成されます。「スポイト」スタイルのカラーピッカーボックスは、 HSL または HSV 形式の間で切り替えることができます。また、ツールの下部にあるボックスに色をドラッグし、色を重ね合わせることで、色とその重なり具合をテストすることもできます。 相対 Z インデックス値を調整して、前後に移動させることができます。</p>
+色を定義するパラメーターを調整すると、3 つの標準ウェブ CSS 形式すべてが表示されます。さらに、現在選択されている色に基づいて、 HSL および HSV のパレット、およびアルファが生成されます。「スポイト」スタイルのカラーピッカーボックスは、 HSL または HSV 形式の間で切り替えることができます。また、ツールの下部にあるボックスに色をドラッグし、色を重ね合わせることで、色とその重なり具合をテストすることもできます。 相対 Z インデックス値を調整して、前後に移動させることができます。
-<p>このツールは <a href="/ja/docs/Web/HTML">HTML</a> に適用する完全な CSS 色を識別するのに役立ちます。</p>
+このツールは [HTML](/ja/docs/Web/HTML) に適用する完全な CSS 色を識別するのに役立ちます。
-<div>{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</div>
+{{EmbedGHLiveSample("css-examples/tools/color-picker/", '100%', 900)}}
-<p>上記で作成した色は、特に注意書きがない限り、 CSS や HTML のどこの色でも使用することができます。</p>
+上記で作成した色は、特に注意書きがない限り、 CSS や HTML のどこの色でも使用することができます。
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
-<p>色の使用について詳しくは、以下を参照してください。</p>
+色の使用について詳しくは、以下を参照してください。
-<ul>
- <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></li>
- <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li>
- <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Borders">Styling borders using CSS</a></li>
- <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Backgrounds">Changing background styles using CSS</a></li>
- <li><a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">色とそのコントラスト</a></li>
-</ul>
+- [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color)
+- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals)
+- [CSS を使用した境界のスタイル付け](/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+- [CSS を使用した背景スタイルの変更](/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+- [色とそのコントラスト](/ja/docs/Learn/Accessibility/CSS_and_JavaScript#color_and_color_contrast)
diff --git a/files/ja/web/css/opacity/index.md b/files/ja/web/css/opacity/index.md
index 48781e619b..5e7760a7ef 100644
--- a/files/ja/web/css/opacity/index.md
+++ b/files/ja/web/css/opacity/index.md
@@ -4,66 +4,91 @@ slug: Web/CSS/opacity
tags:
- CSS
- CSS プロパティ
- - Opacity
- - Reference
- 不透明度
+ - リファレンス
+ - recipe:css-property
+browser-compat: css.properties.opacity
translation_of: Web/CSS/opacity
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p>CSS の <strong><code>opacity</code></strong> プロパティは、要素の不透明度を設定します。不透明度は要素の裏にあるコンテンツが隠れる度合いであり、透明度の逆です。</p>
+**`opacity`** は CSS のプロパティで、要素の不透明度を設定します。不透明度は要素の裏にあるコンテンツが隠れる度合いであり、透明度の逆です。
-<div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div>
+{{EmbedInteractiveExample("pages/css/opacity.html")}}
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+## 構文
-<p>この値は子要素に継承されませんが、その効果は当該要素の内容を含む全体に及びます。すなわち、要素とそれに含まれる子要素は、互いに透明度が異なっていても、その要素の背景に対しては同程度の透明度となります。</p>
+```css
+opacity: 0.9
+opacity: 90%
-<p>このプロパティを <code>1</code> 以外の値で用いると、その要素は新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を作ります。</p>
+/* グローバル値 */
+opacity: inherit;
+opacity: initial;
+opacity: revert;
+opacity: unset;
+```
-<p>もし、<a href="http://stackoverflow.com/questions/13508877/resetting-the-opacity-of-a-child-elements-maple-browser-samsung-tv-app">子要素に透明度を適用したくない場合</a>は、以下のように代わりに {{cssxref("background")}} プロパティを使用してください。</p>
+### 値
-<pre class="brush:css notranslate">background: rgba(0, 0, 0, 0.4);</pre>
+- `<alpha-value>`
-<h2 id="Syntax" name="Syntax">構文</h2>
+ - : {{cssxref("number")}} を `0.0` 以上 `1.0` 以下で、また {{cssxref("percentage")}} を `0%` 以上 `100%` 以下で、チャネルの不透明度 (つまり、アルファチャネルの値) を表します。範囲外の数値も有効ですが、近い方の限界値に丸められます。
-<h3 id="Values" name="Values">値</h3>
+ | 値 | 意味 |
+ | ----------------------------------------------------- | ------------------------------------------------------------- |
+ | `0` | 要素は完全に透明です (つまり、不可視です)。 |
+ | `0` と `1` の中間にある何れかの {{cssxref("number")}} | 要素は半透明です (つまり、要素の背後のコンテンツが見えます)。 |
+ | `1` (既定値) | 要素は完全に不透明です (中身が詰まって見えます)。 |
-<dl>
- <dt><code>&lt;alpha-value&gt;</code></dt>
- <dd>{{cssxref("number")}} を <code>0.0</code> 以上 <code>1.0</code> 以下で、また {{cssxref("percentage")}} を <code>0%</code> 以上 <code>100%</code> 以下で、チャネルの不透明度 (つまり、アルファチャネルの値) を表します。範囲外の数値も有効ですが、近い方の限界値におさめられます。
- <table class="standard-table">
- <tbody>
- <tr>
- <th>値</th>
- <th>意味</th>
- </tr>
- <tr>
- <td><code>0</code></td>
- <td>要素は完全に透明です (つまり、不可視です)</td>
- </tr>
- <tr>
- <td>{{cssxref("number")}} が <code>0</code> より大きく <code>1</code> 未満の何れかの値</td>
- <td>要素は半透明です (つまり、要素の背後のコンテンツが見えます)。</td>
- </tr>
- <tr>
- <td><code>1</code> (既定値)</td>
- <td>要素は完全に不透明です (中身が詰まって見えます)</td>
- </tr>
- </tbody>
- </table>
- </dd>
-</dl>
+## 解説
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+`opacity` の値は子要素に継承されませんが、要素のコンテンツを含む全体に適用されます。すなわち、ある要素とその子の不透明度が互いに異なっていたとしても、その要素の背景に対してはすべて同じ不透明度になります。
+
+このプロパティを `1` 以外の値で用いると、その要素は新しい[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)を作ります。
+
+背景の不透明度のみを変更したい場合は、{{cssxref("background")}} プロパティでアルファチャネルを使用できる[色の値](/ja/docs/Web/CSS/color_value)を使用してください。
+
+```css
+background: rgba(0, 0, 0, 0.4);
+```
+
+## アクセシビリティの考慮
+
+文字列の opacity を調整した場合、テキストの色と、テキストが配置されている背景の色とのコントラスト比が、弱視の人がページの内容を読むことができる程度に十分高くなるよう確認することが重要です。
+
+色のコントラスト比は、透明度を調整したテキストと背景色の明度の値を比較することで決定されます。現在の[ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)](https://www.w3.org/WAI/intro/wcag) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。
+
+- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
+- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
{{csssyntax}}
-<h2 id="Examples" name="Examples">例</h2>
+## 例
+
+<h3 id="Setting_opacity">基本的な例</h3>
+
+次の例では、`opacity` プロパティで要素とその内容全体の不透明度を変更することで、テキストを非常に読みにくくしています。
+
+#### HTML
+
+```html
+<div class="light">何とか見える程度でしょう。</div>
+<div class="medium">簡単に見えるでしょう。</div>
+<div class="heavy">とても見やすいでしょう。</div>
+```
-<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+#### CSS
-<pre class="brush: css notranslate">div { background-color: yellow; }
+```css
+div { background-color: yellow; font-weight: bold; font-size: 130%; }
.light {
opacity: 0.2; /* Barely see the text over the background */
}
@@ -73,80 +98,55 @@ translation_of: Web/CSS/opacity
.heavy {
opacity: 0.9; /* See the text very clearly over the background */
}
-</pre>
+```
-<pre class="brush: html notranslate">&lt;div class="light"&gt;You can barely see this.&lt;/div&gt;
-&lt;div class="medium"&gt;This is easier to see.&lt;/div&gt;
-&lt;div class="heavy"&gt;This is very easy to see.&lt;/div&gt;
-</pre>
+#### 結果
-<p>{{EmbedLiveSample('Basic_example', '640', '64')}}</p>
+{{EmbedLiveSample('Setting_opacity', '640', '105')}}
-<h3 id="Different_opacity_with_hover" name="Different_opacity_with_hover">:hover を使った透明度の変化</h3>
+<h3 id="Setting_opacity_on_hover">ホバー時の透明度の設定</h3>
-<pre class="brush: css notranslate">img.opacity {
+次の例では、ホバー時に不透明度を変更し、親要素の縞模様の背景画像が透けて見えるようにしています。
+
+#### HTML
+
+```html
+<div class="wrapper">
+ <img src="//interactive-examples.mdn.mozilla.net/media/dino.svg"
+ alt="MDN Dino" width="128" height="146"
+ class="opacity">
+</div>
+```
+
+#### CSS
+
+```css
+img.opacity {
opacity: 1;
- filter: alpha(opacity=100); /* IE8 and lower */
- zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
}
img.opacity:hover {
opacity: 0.5;
- filter: alpha(opacity=50);
- zoom: 1;
-}</pre>
-
-<pre class="brush: html notranslate">&lt;img src="<a href="/static/img/opengraph-logo.png">//developer.mozilla.org/static/img/opengraph-logo.png</a>"
- alt="MDN ロゴ" width="128" height="146"
- class="opacity"&gt;
-</pre>
-
-<p>{{EmbedLiveSample('Different_opacity_with_hover', '150', '175')}}</p>
-
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
-
-<p>文字列の opacity を調整した場合、テキストの色と、テキストが配置されている背景の色とのコントラスト比が、弱視の人がページの内容を読むことができる程度に十分高くなるよう確認することが重要です。</p>
-
-<p>色のコントラスト比は、透明度を調整したテキストと背景色の明度の値を比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。</p>
-
-<ul>
- <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('CSS4 Colors', '#transparency', 'opacity')}}</td>
- <td>{{Spec2('CSS4 Colors')}}</td>
- <td>opacity の値にパーセント値を定義。</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td>
- <td>{{Spec2('CSS3 Colors')}}</td>
- <td>初回定義</td>
- </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.opacity", 2)}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="http://msdn.microsoft.com/ja-jp/library/ms532910%28VS.85%29.aspx">マイクロソフトの filter:alpha(opacity=xx)</a></li>
-</ul>
+}
+
+.wrapper {
+ width: 200px;
+ height: 160px;
+ background-color: #f03cc3;
+ background-image: linear-gradient(90deg, transparent 50%,
+ rgba(255,255,255,.5) 50%);
+ background-size: 20px 20px;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample('Setting_opacity_on_hover', '150', '200')}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-18 00:43:30 +0000