#49C0FF - #CBECFF | colorate

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

Blend #49C0FF to #CBECFF

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

RGBブレンド

#49C0FF - #CBECFF | colorate

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

0.0%	0.0% #49C0FF	RGB 73 192 255	#49C0FF
16.7%	16.7% #5EC7FF	RGB 94 199 255	#5EC7FF
33.3%	33.3% #74CEFF	RGB 116 206 255	#74CEFF
50.0%	50.0% #8AD6FF	RGB 138 214 255	#8AD6FF
66.7%	66.7% #9FDDFF	RGB 159 221 255	#9FDDFF
83.3%	83.3% #B5E4FF	RGB 181 228 255	#B5E4FF
100.0%	100.0% #CBECFF	RGB 203 236 255	#CBECFF

#49C0FF #5EC7FF #74CEFF #8AD6FF #9FDDFF #B5E4FF #CBECFF

#49C0FF - #CBECFF

HSVブレンド

#49C0FF - #CBECFF | colorate

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

0.0%	0.0% #49C0FF	RGB 73 192 255	#49C0FF
16.7%	16.7% #5EC6FF	RGB 94 198 255	#5EC6FF
33.3%	33.3% #74CEFF	RGB 116 206 255	#74CEFF
50.0%	50.0% #8AD5FF	RGB 138 213 255	#8AD5FF
66.7%	66.7% #9FDCFF	RGB 159 220 255	#9FDCFF
83.3%	83.3% #B5E4FF	RGB 181 228 255	#B5E4FF
100.0%	100.0% #CBECFF	RGB 203 236 255	#CBECFF

#49C0FF #5EC6FF #74CEFF #8AD5FF #9FDCFF #B5E4FF #CBECFF

#49C0FF - #8AD5FF - #CBECFF

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #49C0FF 0%, #8AD5FF 50%, #CBECFF 100%);
    background: -webkit-linear-gradient(top, #49C0FF 0%, #8AD5FF 50%, #CBECFF 100%);
    background: linear-gradient(to bottom, #49C0FF 0%, #8AD5FF 50%, #CBECFF 100%);
}
</style>