#CECEFF - #687ED4 | colorate

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

Blend #CECEFF to #687ED4

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

RGBブレンド

#CECEFF - #687ED4 | colorate

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

0.0%	0.0% #CECEFF	RGB 206 206 255	#CECEFF
16.7%	16.7% #BDC0F7	RGB 189 192 247	#BDC0F7
33.3%	33.3% #ACB3F0	RGB 172 179 240	#ACB3F0
50.0%	50.0% #9BA6E9	RGB 155 166 233	#9BA6E9
66.7%	66.7% #8A98E2	RGB 138 152 226	#8A98E2
83.3%	83.3% #798BDB	RGB 121 139 219	#798BDB
100.0%	100.0% #687ED4	RGB 104 126 212	#687ED4

#CECEFF #BDC0F7 #ACB3F0 #9BA6E9 #8A98E2 #798BDB #687ED4

#CECEFF - #687ED4

HSVブレンド

#CECEFF - #687ED4 | colorate

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

0.0%	0.0% #CECEFF	RGB 206 206 255	#CECEFF
16.7%	16.7% #BBBDF7	RGB 187 189 247	#BBBDF7
33.3%	33.3% #A8ADF0	RGB 168 173 240	#A8ADF0
50.0%	50.0% #979FE9	RGB 151 159 233	#979FE9
66.7%	66.7% #8693E2	RGB 134 147 226	#8693E2
83.3%	83.3% #7788DB	RGB 119 136 219	#7788DB
100.0%	100.0% #687ED4	RGB 104 126 212	#687ED4

#CECEFF #BBBDF7 #A8ADF0 #979FE9 #8693E2 #7788DB #687ED4

#CECEFF - #979FE9 - #687ED4

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #CECEFF 0%, #979FE9 50%, #687ED4 100%);
    background: -webkit-linear-gradient(top, #CECEFF 0%, #979FE9 50%, #687ED4 100%);
    background: linear-gradient(to bottom, #CECEFF 0%, #979FE9 50%, #687ED4 100%);
}
</style>