色の組成法と混色法 — Compositing and Blending Module Level 1

2.1. ~module間の相互作用

この仕様は、 一群の~CSS~propを定義する。 それらは、 それらが適用される要素の視覚的な描画に影響する。 これらの効果は、［ 要素が `CSS21$r `§ 視覚-整形~model＠~CSS2J#visuren$ に則って~sizeされ, 位置された後 ］に適用される。 これらの~propの一部の値による結果，`包含塊$や`積層~文脈$が作成される場合がある。 ◎ This specification defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the Visual formatting model from [CSS21]. Some values of these properties result in the creation of a containing block, and/or the creation of a stacking context.

`background-blend-mode$p ~propは、 `CSS3BG$r にて`定義される~prop＠~CSSBG#placement$を基に築かれている。 ◎ The background-blend-mode property also builds upon the properties defined in the CSS Backgrounds and Borders module [CSS3BG].

この仕様は、［ `SVG11$r にて指定される`単純~alpha組成-法＠~SVG11/masking.html#SimpleAlphaBlending$ ］と［ `CSS-COLOR-4$r による`単純~alpha組成-法＠~CSSCOLOR#alpha$ ］の規則も強化する。 ◎ This specification also enhances the rules as specified in Section 14.2 Simple alpha compositing of [SVG11] and simple alpha compositing of [CSS-COLOR-4].

この~moduleは、 `globalCompositeOperation$m も拡張する。 ◎ This module also extends the globalCompositeOperation attribute.

2.2. 値

【 この節の内容は、 `~CSS日本語訳 共通~page＠~CSScommon#values$に移譲 】

3.1. ~graphicな演算の順序

組成~modelは `~SVG組成~model$ `SVG11$r に従うモノトスル： ~filterがあれば，まずそれを適用してから、［ 切抜き, ~mask法, 混色-法, 組成-法 ］を順に適用する。 ◎ The compositing model must follow the SVG compositing model [SVG11]: first any filter effect is applied, then any clipping, masking, blending and compositing.

3.2. ~HTMLに特有な挙動

~CSSにおいて`積層~文脈$を作成するものは、 【`参考（ MDN ）＠https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context$】 すべて，`隔離d~group$になると見なすモノトスル。 ~HTML要素~自体は、 ~groupを作成するべきでない。 ◎ Everything in CSS that creates a stacking context must be considered an ‘isolated’ group. HTML elements themselves should not create groups.

混色-法が適用された要素は、［ 当の要素が属する`積層~文脈$を成す，下層の内容 ］すべてと伴に混色するモノトスル。 ◎ An element that has blending applied, must blend with all the underlying content of the stacking context [CSS21] that that element belongs to.

~HTML文書における`根~要素$は、 `文書~要素$を指す。 ◎ The root element for an HTML document is the document element.

3.3. ~SVGに特有な挙動

既定では、 どの要素も非 `隔離d~group$を作成するモノトスル。 ◎ By default, every element must create a non-isolated group.

しかしながら，~SVGにおける ある種の演算は、 `隔離d~group$を作成することになる。 次に挙げる いずれかの特能が利用された場合、 当の~groupを隔離するモノトスル： ◎ However, certain operations in SVG will create isolated groups. If one of the following features is used, the group must become isolated:

• 不透明度 ◎ opacity
• ~filter ◎ filters

• ~3D変形（ `transforms^en, 座標系変換） （ ~2D変形は、隔離を生じさせないモノトスル）。

  【 元々の~SVG仕様は，~3D変形を~supportしないが、 `CSS Transform Level 2^cite により`拡張されている＠~TRANSFORM2#svg-three-dimensional-functions$。 】

  ◎ 3D transforms (2D transforms must NOT cause isolation)
• 混色-法 ◎ blending
• ~mask法 ◎ masking

~SVG文書における`根~要素$は、 `~SVG要素＠~SVGstruct#NewDocument$ 【！`~SVG要素＠~SVG11/struct.html#NewDocument$】 【最外縁な `svg^e 要素？】 を指す。 ◎ The root element for SVG is the SVG element.

3.4. 各種~CSS~prop

`blend-mode@t
	= `normal$v
	| `darken$v
	| `multiply$v
	| `color-burn$v
	| `lighten$v
	| `screen$v
	| `color-dodge$v
	| `overlay$v
	| `soft-light$v
	| `hard-light$v
	| `difference$v
	| `exclusion$v
	| `hue$v
	| `saturation$v
	| `color$v
	| `luminosity$v

body { background-color: lime; }

body { background-color: lime; }
img { `mix-blend-mode$p: `multiply$v; }

circle { `mix-blend-mode$p: `screen$v; }

body { background-color: lime; }
div { background-color: red; width: 200px; opacity: .95}
img { `mix-blend-mode$p: `difference$v; }

div { background-image: url('texture.png'); }
@font-face {
  font-family: "Mythos Std";
  src: url("http://myfontvendor.com/mythos.otf");
}
p {
  `mix-blend-mode$p: `overlay$v;
  font-family: "Mythos Std";
}

`isolation-mode@t = `auto^v | `isolate^v

body { background-color: lime; }
div {
  width: 200px;
  height: 200px;
  background-size: 200px 200px;
  background-repeat:no-repeat;
  background-image: linear-gradient(to right, #000000 0%,#ffffff 100%), url('ducky.png');
  `background-blend-mode$p: difference, normal;
}

5.1. 単純~alpha組成-法

単純~alpha組成-法の公式は： ◎ The formula for simple alpha compositing is

%co = %Cs × %αs + %Cb × %αb × ( 1 − %αs )

注記： すべての値は 0 〜 1 の閉区間に入る。 ◎ Note: All values are between 0 and 1 inclusive.

【 明示的に言及されていないので解り難くなっているが、 単純~alpha組成-法は，［ `§ 組成-法の序論＠#whatiscompositing$の冒頭に述べた一般の場合において、 混色~段は自明なもの（結果は，~sourceの色そのまま）にされ， ~Porter-Duff組成-法が `source-over$v にされた特殊な場合 ］になる。 すなわち、 この節に示されている単純~alpha組成~公式の中の %Cs は， `混色-法$の結果をそのまま表している。 】

組成-後の画素 値（ %co ）は、 ~sourceからの寄与分 [ %Cs × %αs ] と, 後景からの寄与分 [ %Cb × %αb × ( 1 − %αs ) ] を加算して与えられる。 色の寄与分を決定するため、 ［ ~source, 後景 ］どちらも，その色~値は各自の~alphaで乗算される。 ~alpha 0 は，色の寄与分がないことを意味し、 部分的な~alphaは，その割合の色が寄与することを意味する。 後景の寄与分は、 ~sourceの不透明度に基づいて更に減量される： 概念的には、 後景のうち [ 1 − %αs ] の割合が~sourceを透過することを意味する — すなわち、 ~sourceが全-不透明（ %αs ＝ 1 ）ならば， 後景は透過しなくなる。 ◎ The pixel value after compositing (co) is given by adding the contributions from the source graphic element [Cs x αs] and the backdrop [Cb x αb x (1 - αs)]. For both the graphic element and the backdrop, the color values are multiplied by the alpha to determine the amount of color that contributes. With zero alpha meaning that the color does not contribute and partial alpha means that some percentage of the color contributes. The contribution of the backdrop is further reduced based on the opacity of the graphic element. Conceptually, (1 - αs) of the backdrop shows through the graphic element, meaning that if the graphic element is fully opaque (αs=1) then no backdrop shows through.

上に挙げられた単純~alpha組成~公式は、［ 後景と~source ］の色を，各自の~alphaによる重みで加重平均をとって得られる色を与える。 結果の組成~alpha値は、 単純に，組成される一連の要素が寄与する~alphaの合計になる。 結果の組成~alphaの公式は： ◎ The simple alpha compositing formula listed above gives a resultant color which is the result of the weighted average of the backdrop color and graphic element color, with the weighting determined by the backdrop and graphic element alphas. The resultant alpha value of the composite is simply the sum of the contributed alpha of the composited elements. The formula for the resultant alpha of the composite is

%αo = %αs + %αb × ( 1 − %αs )

%cs = %Cs × %αs

%co = %cs + %cb × ( 1 − %αs )

%Co = %co ÷ %αo

%Cs = RGB(1, 0, 0)
%αs = 1
%Cb = RGB(0, 0, 0)
%αb = 0

%co = %Cs × %αs + %Cb × %αb × ( 1 − %αs )
   = RGB(1, 0, 0) × 1 + RGB(0, 0, 0) × 0 × ( 1 − 1 )
   = RGB(1, 0, 0)

%Cs = RGB(0, 0, 1)
%αs = 1
%Cb = RGB(1, 0, 0)
%αb = 1

%co = %Cs × %αs + %Cb × %αb × ( 1 − %αs )
   = RGB(0, 0, 1) × 1 + RGB(1, 0, 0) × 1 × ( 1 − 1 )
   = RGB(0, 0, 1)

%αo = %αs + %αb × ( 1 − %αs )
   = 1 + 1 × ( 1 − 1 )
   = 1

%Co = %co ÷ %αo
   = RGB(0, 0, 1) ÷ 1
   = RGB(0, 0, 1)

%Cs = RGB(0, 0, 1)
%αs = 0.5
%Cb = RGB(1, 0, 0)
%αb = 1

%co = %Cs × %αs + %Cb × %αb × ( 1 − %αs )
   = RGB(0, 0, 1) × 0.5 + RGB(1, 0, 0) × 1 × ( 1 − 0.5 )
   = RGB(0, 0, 1) × 0.5 + RGB(1, 0, 0) × 0.5
   = RGB(0.5, 0, 0.5)

%αo = %αs + %αb × ( 1 − %αs )
   = 0.5 + 1 × ( 1 − 0.5 )
   = 1

%Co = %co ÷ %αo
   = RGB(0.5, 0, 0.5) ÷ 1
   = RGB(0.5, 0, 0.5)

%Cs = RGB(0, 0, 1)
%αs = 0.5
%Cb = RGB(1, 0, 0)
%αb = 0.5

%co = %Cs × %αs + %Cb × %αb × ( 1 − %αs )
   = RGB(0, 0, 1) × 0.5 + RGB(1, 0, 0) × 0.5 × ( 1 − 0.5 )
   = RGB(0, 0, 1) × 0.5 + RGB(1, 0, 0) × 0.25
   = RGB(0.25, 0, 0.5)

%αo = %αs + %αb × ( 1 − %αs )
   = 0.5 + 0.5 × ( 1 − 0.5 )
   = 0.75

%Co = %co ÷ %αo
   = RGB(0.25, 0, 0.5) ÷ 0.75
   = RGB(0.33, 0, 0.66)

7.1. 後景の計算~例

8.1. ~group不変性

`単純~alpha組成-法$の重要な特質として、 その演算が，~group不変性†を満たすことが挙げられる。 この挙動は、 この仕様の中で述べるより複階的な~modelにおいても保全される。 既定の属性により~group分けが追加されたり, 除去されても、 視覚的な相違は示さないモノトスル （次の式の "+" は組成~演算を表す）： ◎ An important property of simple alpha compositing is its group invariance. This behavior is preserved in the more complex model described in this specification. Adding or removing grouping with default attributes shall not show visual differences.

`source-over^v: A + B + C = A + (B + C) = (A + B) + C

【† “~group不変性（ `group invariance^en ）” — どのように “~group分け” しても結果は “不変” 。 すなわち、 組成~演算が`結合法則＠https://ja.wikipedia.org/wiki/%E7%B5%90%E5%90%88%E6%B3%95%E5%89%87$を満たすことを意味する （`参考＠https://dbaron.org/log/20130306-compositing-blending$）。

この不変則は、 ~groupに次に挙げるいずれかの属性が追加された場合， 満たされなくなり得る ⇒＃ 隔離【 `isolation$p: `isolate^v 】, `normal$v 以外の混色-~mode【 `mix-blend-mode$p 】, `source-over$v 以外の~Porter-Duff組成~演算子 ◎ When adding attributes to the group such as isolate, blending modes other than normal or Porter Duff compositing operators other than source-over, groups may no longer be invariant.

8.2. 隔離d~group

隔離d~group（ `isolated group^en ）における`初期~後景$は、 `透明な黒$になるモノトスル。 ◎ In an isolated group, the initial backdrop shall be black and fully transparent.

この場合の`初期~後景$は、 `~group後景$と異なる。 `~group後景$との相互作用が生じるのは、 ~groupに算出された［ 色, 図形, ~alpha ］が後景と組成されるときに限るモノトスル。 ◎ In this instance, the initial backdrop is different than the group backdrop. The only interaction with the group backdrop shall occur when the group’s computed color, shape and alpha are composited with it.

組成-法における`隔離d~group$の効果については、 `§ 隔離d~groupと各種~Porter-Duff~mode＠#groupcompositing$ を見よ。 混色-法における`隔離d~group$の効果については、 `~group隔離による混色-法に対する効果$sec を見よ。 ◎ See 'Isolated groups and Porter Duff modes' for a description of the effect of isolated groups on compositing. See 'Effect of group isolation on blending' for a description of the effect of isolated groups on blending.

8.3. 根~要素~group

`根~要素$用の`隔離d~group$は、 根~要素~groupと称される。 すべての［ 要素, 他の~group ］は、 この~groupの中へ組成される。 `~canvas背景$ `CSS3BG$r は，根~要素~groupの中へ塗られ、 それから，根~要素~用の［ ~filter, 切抜き~path, ~mask, 不透明度 ］が（もしあれば） — `根~group$の中へ組成する前に — 適用される。 ◎ The isolated group for the root element is the root element group. All elements and other groups are composited into this group. The canvas background [CSS3BG] is painted into the root element group, and any filter, clip-path, mask and and opacity for the root element is then applied, before compositing into the root group, if present.

8.4. 根~group

根~groupは、 ~canvas全体を包摂し， ~web~pageの`根~要素$の`根~要素~group$を包含する（その~~下地になる）。 ◎ The root group encompasses the entire canvas and contains (or is below) the root element group of the root element of a web page.

注記： ~browserは，最終的な組成~用に［ 根~group内の`~canvas表面$ `CSS3BG$r に無限な`全~不透明な白色＠~CSSCOLOR#valdef-color-canvas$【！~CSSCOLOR#sample】を利用する ］ことが多いが、 これは要求されない。 【例：`暗な色~scheme$】 ◎ Browsers often use an infinite white, 100% opaque canvas surface [CSS3BG] in the root group, for final compositing, but this is not required.

9.1. ~Porter-Duff組成~演算子

組成-法の代数は、 `Lucasfilm^en で働いていた `Thomas Porter^en と `Tom Duff^en による画期的な論文にて定義され， 12 個の “~Porter-Duff” 演算子が開発された。 これらの演算子は、［［ ~alpha, あるいは画素 被覆率 ］［ ~channel／値 ］を持つ~graphicな~obj ］の重合ngから形成される，４つの下位-画素 領域における混合の結果を制御する。 演算子たちには、 ４つの領域による実用的な組合nすべてが利用されている。 ◎ The landmark paper by Thomas Porter and Tom Duff, who worked for Lucasfilm, defined the algebra of compositing and developed the twelve "Porter Duff" operators. These operators control the results of mixing the four sub-pixel regions formed by the overlapping of graphical objects that have an alpha or pixel coverage channel/value. The operators use all practical combinations of the four regions.

12 個の基本的な~Porter-Duff演算子は、 ~sourceと~destのアリな組合nすべてを網羅する。 ◎ There are 12 basic Porter Duff operators, satisfying all possible combinations of source and destination.

各 演算子を幾何的に表現するなら、 各 図形からの寄与分は，出力に対する図形の合計の被覆率として捉えられる。 例えば， `source-over$v においては、 ~sourceが寄与し得る割合分は 全体（ 1.0 ）であり, ~destの寄与し得る割合分は 残る ( 1 − %αs ) になる。 これには、 画素の最終的な被覆率~用の等式を与えるため， ~sourceと~destの被覆率により改変される。 ◎ From the geometric representation of each operator, the contribution of each shape can be seen to be expressed as a fraction of the total coverage of the output. For example, in source over, the possible contribution of source is full (1) and the possible contribution of destination is whatever is remaining (1 – αs). This is modified by the coverage of source and destination to give the equation for the final coverage of the pixel:

%αo = %αs × 1 + %αb × ( 1 − %αs )

各~演算子には、 割合分［ %Fs （この例では 1 ）, %Fb （この例では 1 − %αs ） ］が定義され，［ 最終的な画素 値に寄与し得る図形の被覆率 ］を指定する。 被覆率~用の等式の一般~形は： ◎ The fractional terms Fa (1 in this example) and Fb (1 – αs in this example) are defined for each operator and specify the fraction of the shapes that may contribute to the final pixel value. The general form of the equation for coverage is:

%αs × %Fs + %αb × %Fb

色も組入れられた一般の~Porter-Duff等式は： ◎ and incorporating color gives the general Porter Duff equation

%co = %αs × %Fs × %Cs + %αb × %Fb × %Cb

%Fs = 0 ; %Fb = 0
%co = 0
%αo = 0

%Fs = 1 ; %Fb = 0
%co = %αs × %Cs
%αo = %αs

%Fs = 0 ; %Fb = 1
%co = %αb × %Cb
%αo = %αb

%Fs = 1 ; %Fb = 1 − %αs
%co = %αs × %Cs + %αb × %Cb × ( 1 − %αs )
%αo = %αs + %αb × ( 1 − %αs )

%Fs = 1 − %αb ; %Fb = 1
%co = %αs × %Cs × ( 1 − %αb ) + %αb × %Cb
%αo = %αs × ( 1 − %αb ) + %αb

%Fs = %αb ; %Fb = 0
%co = %αs × %Cs × %αb
%αo = %αs × %αb

%Fs = 0 ; %Fb = %αs
%co = %αb × %Cb × %αs 
%αo = %αb × %αs

%Fs = 1 − %αb ; %Fb = 0
%co = %αs × %Cs × ( 1 − %αb )
%αo = %αs × ( 1 − %αb )

%Fs = 0 ; %Fb = 1 − %αs
%co = %αb × %Cb × ( 1 − %αs )
%αo = %αb × ( 1 − %αs )

%Fs = %αb ; %Fb = 1 − %αs
%co = %αs × %Cs × %αb + %αb × %Cb × ( 1 − %αs )
%αo = %αs × %αb + %αb × ( 1 − %αs )

%Fs = 1 − %αb ; %Fb = %αs
%co = %αs × %Cs × ( 1 − %αb ) + %αb × %Cb × %αs
%αo = %αs × ( 1 − %αb ) + %αb × %αs

%Fs = 1 − %αb ; %Fb = 1 − %αs
%co = %αs × %Cs × ( 1 − %αb ) + %αb × %Cb × ( 1 − %αs )
%αo = %αs × ( 1 − %αb ) + %αb × ( 1 − %αs )

%Fs = 1; %Fb = 1
%co = %αs × %Cs + %αb × %Cb
%αo = %αs + %αb

%Fs = 1; %Fb = 1
%co = max( 0, 1 − %αs x %Cs + 1 − %αb x %Cb )
%αo = max( 0, 1 − %αs + 1 − %αb )

%Fs = 1; %Fb = 1
%co = min( 1, %αs x %Cs + %αb x %Cb )
%αo = min( 1, %αs + %αb )

.container {
  display: grid;
}
.container > div {
  width: 100px;
  height: 100px;
  /* 
要素を互いに重なるよう配置する
◎
Place the elements on top of each other
 */
  grid-area: 1 / 1;
}
.from {
  background-color: rgb(100% 0% 0% / 50%);
}
.to {
  background-color: rgb(0% 0% 100% / 50%);
}

.from {
  opacity: 0.5;
}
.to {
  opacity: 0.5;
}

.container {
  /* 
`plus-lighter^v 演算の視野を制限する
◎
Limit the scope of the plus-lighter operation
 */
  isolation: isolate;
}
.from {
  opacity: 0.5;
}
.to {
  opacity: 0.5;
  mix-blend-mode: plus-lighter;
}

9.2. 各種~Porter-Duff~modeによる~group組成-法の挙動

`隔離d~group$の中の要素を組成するとき、 要素が組成される`初期~後景$は，`透明な黒$にされる。 ~groupの中の最も奥側の要素が，後景に依存する~Porter-Duff組成~演算子 — `destination$v, `source-in$v, `destination-in$v, `destination-out$v, `source-atop$v など — を利用している場合、 組成した結果は空になる。 ~group内の後続な要素は、 最初に組成した結果に組成される。 ◎ When compositing the elements within an isolated group, the elements are composited over a transparent black initial backdrop. If the bottom element in the group uses a Porter Duff compositing operator which is dependent on the backdrop, such as destination, source-in, destination-in, destination-out or source-atop, then the result of the composite will be empty. Subsequent elements within the group are composited with the result of the first composite.

10.1. 成分別の混色-~mode

結果の各 色~成分が，`後景$と~sourceの対応する色~成分のみから決定される場合 — すなわち，混色~公式が，対応する成分ごとに別々に適用される場合 — その混色-~modeを，成分別と呼ぶ。 ◎ A blend mode is termed separable if each component of the result color is completely determined by the corresponding components of the constituent backdrop and source colors — that is, if the mixing formula is applied separately to each set of corresponding components.

以下に挙げる各種 混色-~modeは、 混色~公式 B( %Cb, %Cs ) を，各 色~成分ごとに適用することになる。 単純にするため、 この節のすべての例では， `source-over$v 組成-法を利用する。 ◎ Each of the following blend modes will apply the blending function B(Cb, Cs) on each of the color components. For simplicity, all the examples in this chapter use source-over compositing.

B( %Cb, %Cs ) = %Cs

B( %Cb, %Cs ) = %Cb × %Cs

B( %Cb, %Cs ) = 1 − ( 1 − %Cb ) × ( 1 − %Cs )
          = %Cb + %Cs − ( %Cb × %Cs )

B( %Cb, %Cs ) = HardLight( %Cs, %Cb )

B( %Cb, %Cs ) = min( %Cb, %Cs )

B( %Cb, %Cs ) = max( %Cb, %Cs )

if( %Cb == 0)
    B( %Cb, %Cs ) = 0
else if( %Cs == 1)
    B( %Cb, %Cs ) = 1
else
    B( %Cb, %Cs ) = min( 1, %Cb ÷ ( 1 − %Cs ))

if( %Cb == 1)
    B( %Cb, %Cs ) = 1
else if( %Cs == 0)
    B( %Cb, %Cs ) = 0
else
    B( %Cb, %Cs ) = 1 − min( 1, ( 1 − %Cb ) ÷ %Cs )

if( %Cs ≤ 0.5)
    B( %Cb, %Cs ) = Multiply( %Cb, 2 × %Cs )
else
    B( %Cb, %Cs ) = Screen( %Cb, 2 × %Cs − 1)

if( %Cs ≤ 0.5)
    B( %Cb, %Cs ) = %Cb − ( 1 − 2 × %Cs ) × %Cb × ( 1 − %Cb )
else
    B( %Cb, %Cs ) = %Cb + ( 2 × %Cs − 1 ) × ( D( %Cb ) − %Cb )
    ここで
    if( %Cb ≤ 0.25)
        D( %Cb ) = (( 16 × %Cb − 12 ) × %Cb + 4 ) × %Cb
    else
        D( %Cb ) = sqrt( %Cb )

B( %Cb, %Cs ) = abs( %Cb − %Cs )

B( %Cb, %Cs ) = %Cb + %Cs − 2 × %Cb × %Cs

10.2. 成分別でない混色-~mode

成分別でない混色-~modeでは、 成分ごとに個別に~~扱わずに， すべての色~成分の組合nを考慮する。 これらすべての混色-~modeは、 概念的には，次の手続きを要する： ◎ Nonseparable blend modes consider all color components in combination as opposed to the separable ones that look at each component individually. All of these blend modes conceptually entail the following steps:

1. `後景$と~source色を，混色~用の色~空間から中間処理~用の［ 色相, 彩度, 光度 ］（ `hue-saturation-luminosity^en ）による表現に変換する。 ◎ Convert the backdrop and source colors from the blending color space to an intermediate hue-saturation-luminosity representation.
2. `後景$と~sourceの色から選択される［ 色相, 彩度, 光度 ］成分の何らかの組合nに基づいて，新たな色を作成する。 ◎ Create a new color from some combination of hue, saturation, and luminosity components selected from the backdrop and source colors.
3. 前~段の結果を逆~変換して元の色~空間へ戻す。 ◎ Convert the result back to the original color space.

成分別でない混色-~modeの公式は、 いくつかの補助~関数を用立てる： ◎ The nonseparable blend mode formulas make use of several auxiliary functions:

Lum( %C ) {
    return 0.3 × %C.red + 0.59 × %C.green + 0.11 × %C.blue
}

Max( %C ) {
    return max( %C.red, %C.green, %C.blue )
}

Min( %C ) {
    return min( %C.red, %C.green, %C.blue )
}

ClipColor( %C ) {
    %L = Lum( %C )
    %max = Max( %C )
    %min = Min( %C )
    if( %min < 0 ) {
        %C.red   = %L + ( %C.red   − %L ) × %L ÷ ( %L − %min )
        %C.green = %L + ( %C.green − %L ) × %L ÷ ( %L − %min )
        %C.blue  = %L + ( %C.blue  − %L ) × %L ÷ ( %L − %min )
    }
    if( %max > 1 ) {
        %C.red   = %L + ( %C.red   − %L ) × ( 1 − %L ) ÷ ( %max − %L )
        %C.green = %L + ( %C.green − %L ) × ( 1 − %L ) ÷ ( %max − %L )
        %C.blue  = %L + ( %C.blue  − %L ) × ( 1 − %L ) ÷ ( %max − %L )
    }
    return %C
}

SetLum( %C, %l ) {
    %d = %l − Lum( %C )
    %C.red   += %d
    %C.green += %d
    %C.blue  += %d
    return ClipColor( %C )
}

Sat( %C ) {
    return Max( %C ) − Min( %C )
}

次の関数の［ .min, .mid, .max ］は、 それぞれ，関数に入った時点で値が［ 最小, ~~中央, 最大 ］の異なる色~成分を指すとする。 ◎ The subscripts min, mid, and max in the next function refer to the color components having the minimum, middle, and maximum values upon entry to the function.

SetSat( %C, %s ) {
    if( %C.max > %C.min ) {
        %C.mid = (( %C.mid − %C.min ) ÷ ( %C.max − %C.min )) × %s
        %C.max = %s
    } else {
        %C.mid = %C.max = 0
    }
    %C.min = 0
    return %C
}

B( %Cb, %Cs ) = SetLum(SetSat( %Cs, Sat( %Cb )), Lum( %Cb ))

B( %Cb, %Cs ) = SetLum(SetSat( %Cb, Sat( %Cs )), Lum( %Cb ))

B( %Cb, %Cs ) = SetLum( %Cs, Lum( %Cb ))

B( %Cb, %Cs ) = SetLum( %Cb, Lum( %Cs ))

10.3. ~group隔離による混色-法に対する効果