#00FDFF - #00A2CE | colorate

colorateはデザイナーや開発者向けの配色ツールです。あなたのインスピレーションを引き出し、よりよい配色の構成に役立ちます。サイトをよりよくする

Blend #00FDFF to #00A2CE

#00FDFFと#00A2CEの二色間の色を演算します。色味の近い色同士では滑らかですが、RGB値をもとにした通常のブレンドでは、色味の遠い色同士の中間の色は彩度が低くなりグレーに近くなります。HSV値をもとにしたブレンドでは、色味の遠い色同士でも彩度の低下はありません。

RGBブレンド

#00FDFF - #00A2CE | colorate

RGB値をもとにした二色間のブレンドです。色味の離れた色同士では、二色間の彩度は低下します。#00FDFFを0%、#00A2CEを100%として二色間の色を展開します。

0.0%	0.0% #00FDFF	RGB 0 253 255	#00FDFF
16.7%	16.7% #00EDF6	RGB 0 237 246	#00EDF6
33.3%	33.3% #00DEEE	RGB 0 222 238	#00DEEE
50.0%	50.0% #00CFE6	RGB 0 207 230	#00CFE6
66.7%	66.7% #00C0DE	RGB 0 192 222	#00C0DE
83.3%	83.3% #00B1D6	RGB 0 177 214	#00B1D6
100.0%	100.0% #00A2CE	RGB 0 162 206	#00A2CE

#00FDFF #00EDF6 #00DEEE #00CFE6 #00C0DE #00B1D6 #00A2CE

#00FDFF - #00A2CE

HSVブレンド

#00FDFF - #00A2CE | colorate

HSV値をもとにした二色間のブレンドです。色味の離れた色同士でも、二色間の彩度は低下しません。#00FDFFを0%、#00A2CEを100%として二色間の色を展開します。

0.0%	0.0% #00FDFF	RGB 0 253 255	#00FDFF
16.7%	16.7% #00ECF6	RGB 0 236 246	#00ECF6
33.3%	33.3% #00DCEE	RGB 0 220 238	#00DCEE
50.0%	50.0% #00CCE6	RGB 0 204 230	#00CCE6
66.7%	66.7% #00BEDE	RGB 0 190 222	#00BEDE
83.3%	83.3% #00AFD6	RGB 0 175 214	#00AFD6
100.0%	100.0% #00A2CE	RGB 0 162 206	#00A2CE

#00FDFF #00ECF6 #00DCEE #00CCE6 #00BEDE #00AFD6 #00A2CE

#00FDFF - #00CCE6 - #00A2CE

CSSコード

<style type="text/css">
/* RGB Gradient */
div {
    background: -moz-linear-gradient(top, #00FDFF 0%, #00A2CE 100%);
    background: -webkit-linear-gradient(top, #00FDFF 0%, #00A2CE 100%);
    background: linear-gradient(to bottom, #00FDFF 0%, #00A2CE 100%);
}

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #00FDFF 0%, #00CCE6 50%, #00A2CE 100%);
    background: -webkit-linear-gradient(top, #00FDFF 0%, #00CCE6 50%, #00A2CE 100%);
    background: linear-gradient(to bottom, #00FDFF 0%, #00CCE6 50%, #00A2CE 100%);
}
</style>