#4D88FF - #8ACBFF | colorate

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

Blend #4D88FF to #8ACBFF

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

RGBブレンド

#4D88FF - #8ACBFF | colorate

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

0.0%	0.0% #4D88FF	RGB 77 136 255	#4D88FF
16.7%	16.7% #5793FF	RGB 87 147 255	#5793FF
33.3%	33.3% #619EFF	RGB 97 158 255	#619EFF
50.0%	50.0% #6BA9FF	RGB 107 169 255	#6BA9FF
66.7%	66.7% #75B4FF	RGB 117 180 255	#75B4FF
83.3%	83.3% #7FBFFF	RGB 127 191 255	#7FBFFF
100.0%	100.0% #8ACBFF	RGB 138 203 255	#8ACBFF

#4D88FF #5793FF #619EFF #6BA9FF #75B4FF #7FBFFF #8ACBFF

#4D88FF - #8ACBFF

HSVブレンド

#4D88FF - #8ACBFF | colorate

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

0.0%	0.0% #4D88FF	RGB 77 136 255	#4D88FF
16.7%	16.7% #5795FF	RGB 87 149 255	#5795FF
33.3%	33.3% #61A1FF	RGB 97 161 255	#61A1FF
50.0%	50.0% #6BACFF	RGB 107 172 255	#6BACFF
66.7%	66.7% #75B7FF	RGB 117 183 255	#75B7FF
83.3%	83.3% #7FC1FF	RGB 127 193 255	#7FC1FF
100.0%	100.0% #8ACBFF	RGB 138 203 255	#8ACBFF

#4D88FF #5795FF #61A1FF #6BACFF #75B7FF #7FC1FF #8ACBFF

#4D88FF - #6BACFF - #8ACBFF

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #4D88FF 0%, #6BACFF 50%, #8ACBFF 100%);
    background: -webkit-linear-gradient(top, #4D88FF 0%, #6BACFF 50%, #8ACBFF 100%);
    background: linear-gradient(to bottom, #4D88FF 0%, #6BACFF 50%, #8ACBFF 100%);
}
</style>