CSS色指定を一括変換デモページ

CSS色指定を一括変換（デモページ）

カラースキームを維持したまま、系列色を変換します

ここはデモページです。変換率のみ入力できます

ソース入力できる本ページはこちら→http://www.ecopls.link/omni/color/index.html

色相（Hue）、彩度（Saturation）、輝度（Lightness）変更指定
色相（Hue）:0-360度
彩度（Saturation）(-)100-100%指定(指定%)
輝度（Lightness）(-)100-100%指定(指定%)

色相(加算)

　現在の色に0-360の範囲で加算度数を指定します

サンプルでは現在の配色が赤系ですので、上の色相で＋120度すると緑系です。「120」と入力してボタンを押すと緑系の配色に変換されます。

彩度（Saturation）(加算)

　現在の彩度に加算減算%を指定します指定％分率変化します

輝度（Lightness）(加算)

　現在の輝度に加算減算%を指定します指定％分率変化します

色相、彩度、輝度を自由に入力してボタンを押してください

サンプル(HTML)(入力できません)

<div style="width:200px">
<p style="background-color:#c42162">#c42162</p>
<p style="background-color:#d09cdd">#d09cdd</p>
<p style="background-color:#e90147">#e90147</p>
<p style="background-color:#d71d43">#d71d43</p>
<p style="background-color:#8e438e">#8e438e</p>
<p style="background-color:#d86ed5">#d86ed5</p>
<p style="background-color:#f86893">#f86893</p>
<p style="background-color:#cb86a7">#cb86a7</p>
<p style="background-color:#e40160">#e40160</p>
<p style="background-color:#ea86be">#ea86be</p>
<p style="background-color:#f2c0e2">#f2c0e2</p>
</div>

変換サンプルHTMLの配色

返還前配色

返還後

#c42162

#d09cdd

#e90147

#d71d43

#8e438e

#d86ed5

#f86893

#cb86a7

#e40160

#ea86be

#f2c0e2

<div style="width:200px">
<p style="background-color:#c42162">#c42162</p>
<p style="background-color:#d09cdd">#d09cdd</p>
<p style="background-color:#e90147">#e90147</p>
<p style="background-color:#d71d43">#d71d43</p>
<p style="background-color:#8e438e">#8e438e</p>
<p style="background-color:#d86ed5">#d86ed5</p>
<p style="background-color:#f86893">#f86893</p>
<p style="background-color:#cb86a7">#cb86a7</p>
<p style="background-color:#e40160">#e40160</p>
<p style="background-color:#ea86be">#ea86be</p>
<p style="background-color:#f2c0e2">#f2c0e2</p>
</div>