#6F9AF2 - #D5E2FB | colorate

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

Blend #6F9AF2 to #D5E2FB

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

RGBブレンド

#6F9AF2 - #D5E2FB | colorate

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

0.0%	0.0% #6F9AF2	RGB 111 154 242	#6F9AF2
16.7%	16.7% #80A6F3	RGB 128 166 243	#80A6F3
33.3%	33.3% #91B2F5	RGB 145 178 245	#91B2F5
50.0%	50.0% #A2BEF6	RGB 162 190 246	#A2BEF6
66.7%	66.7% #B3CAF8	RGB 179 202 248	#B3CAF8
83.3%	83.3% #C4D6F9	RGB 196 214 249	#C4D6F9
100.0%	100.0% #D5E2FB	RGB 213 226 251	#D5E2FB

#6F9AF2 #80A6F3 #91B2F5 #A2BEF6 #B3CAF8 #C4D6F9 #D5E2FB

#6F9AF2 - #D5E2FB

HSVブレンド

#6F9AF2 - #D5E2FB | colorate

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

0.0%	0.0% #6F9AF2	RGB 111 154 242	#6F9AF2
16.7%	16.7% #7FA5F3	RGB 127 165 243	#7FA5F3
33.3%	33.3% #90B1F5	RGB 144 177 245	#90B1F5
50.0%	50.0% #A1BDF6	RGB 161 189 246	#A1BDF6
66.7%	66.7% #B2C9F8	RGB 178 201 248	#B2C9F8
83.3%	83.3% #C3D5F9	RGB 195 213 249	#C3D5F9
100.0%	100.0% #D5E2FB	RGB 213 226 251	#D5E2FB

#6F9AF2 #7FA5F3 #90B1F5 #A1BDF6 #B2C9F8 #C3D5F9 #D5E2FB

#6F9AF2 - #A1BDF6 - #D5E2FB

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #6F9AF2 0%, #A1BDF6 50%, #D5E2FB 100%);
    background: -webkit-linear-gradient(top, #6F9AF2 0%, #A1BDF6 50%, #D5E2FB 100%);
    background: linear-gradient(to bottom, #6F9AF2 0%, #A1BDF6 50%, #D5E2FB 100%);
}
</style>