#ADE9FF - #5CB9F2 | colorate

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

Blend #ADE9FF to #5CB9F2

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

RGBブレンド

#ADE9FF - #5CB9F2 | colorate

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

0.0%	0.0% #ADE9FF	RGB 173 233 255	#ADE9FF
16.7%	16.7% #9FE1FC	RGB 159 225 252	#9FE1FC
33.3%	33.3% #92D9FA	RGB 146 217 250	#92D9FA
50.0%	50.0% #84D1F8	RGB 132 209 248	#84D1F8
66.7%	66.7% #77C9F6	RGB 119 201 246	#77C9F6
83.3%	83.3% #69C1F4	RGB 105 193 244	#69C1F4
100.0%	100.0% #5CB9F2	RGB 92 185 242	#5CB9F2

#ADE9FF #9FE1FC #92D9FA #84D1F8 #77C9F6 #69C1F4 #5CB9F2

#ADE9FF - #5CB9F2

HSVブレンド

#ADE9FF - #5CB9F2 | colorate

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

0.0%	0.0% #ADE9FF	RGB 173 233 255	#ADE9FF
16.7%	16.7% #9EE1FC	RGB 158 225 252	#9EE1FC
33.3%	33.3% #91DAFA	RGB 145 218 250	#91DAFA
50.0%	50.0% #83D2F8	RGB 131 210 248	#83D2F8
66.7%	66.7% #76CAF6	RGB 118 202 246	#76CAF6
83.3%	83.3% #68C1F4	RGB 104 193 244	#68C1F4
100.0%	100.0% #5CB9F2	RGB 92 185 242	#5CB9F2

#ADE9FF #9EE1FC #91DAFA #83D2F8 #76CAF6 #68C1F4 #5CB9F2

#ADE9FF - #83D2F8 - #5CB9F2

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #ADE9FF 0%, #83D2F8 50%, #5CB9F2 100%);
    background: -webkit-linear-gradient(top, #ADE9FF 0%, #83D2F8 50%, #5CB9F2 100%);
    background: linear-gradient(to bottom, #ADE9FF 0%, #83D2F8 50%, #5CB9F2 100%);
}
</style>