#457171 - #46778A | colorate

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

Blend #457171 to #46778A

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

RGBブレンド

#457171 - #46778A | colorate

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

0.0%	0.0% #457171	RGB 69 113 113	#457171
16.7%	16.7% #457275	RGB 69 114 117	#457275
33.3%	33.3% #457379	RGB 69 115 121	#457379
50.0%	50.0% #45747D	RGB 69 116 125	#45747D
66.7%	66.7% #457581	RGB 69 117 129	#457581
83.3%	83.3% #457685	RGB 69 118 133	#457685
100.0%	100.0% #46778A	RGB 70 119 138	#46778A

#457171 #457275 #457379 #45747D #457581 #457685 #46778A

#457171 - #46778A

HSVブレンド

#457171 - #46778A | colorate

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

0.0%	0.0% #457171	RGB 69 113 113	#457171
16.7%	16.7% #457275	RGB 69 114 117	#457275
33.3%	33.3% #457479	RGB 69 116 121	#457479
50.0%	50.0% #46757D	RGB 70 117 125	#46757D
66.7%	66.7% #467681	RGB 70 118 129	#467681
83.3%	83.3% #467785	RGB 70 119 133	#467785
100.0%	100.0% #46778A	RGB 70 119 138	#46778A

#457171 #457275 #457479 #46757D #467681 #467785 #46778A

#457171 - #46757D - #46778A

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #457171 0%, #46757D 50%, #46778A 100%);
    background: -webkit-linear-gradient(top, #457171 0%, #46757D 50%, #46778A 100%);
    background: linear-gradient(to bottom, #457171 0%, #46757D 50%, #46778A 100%);
}
</style>