#304447 - #374F60 | colorate

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

Blend #304447 to #374F60

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

RGBブレンド

#304447 - #374F60 | colorate

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

0.0%	0.0% #304447	RGB 48 68 71	#304447
16.7%	16.7% #31454B	RGB 49 69 75	#31454B
33.3%	33.3% #32474F	RGB 50 71 79	#32474F
50.0%	50.0% #334953	RGB 51 73 83	#334953
66.7%	66.7% #344B57	RGB 52 75 87	#344B57
83.3%	83.3% #354D5B	RGB 53 77 91	#354D5B
100.0%	100.0% #374F60	RGB 55 79 96	#374F60

#304447 #31454B #32474F #334953 #344B57 #354D5B #374F60

#304447 - #374F60

HSVブレンド

#304447 - #374F60 | colorate

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

0.0%	0.0% #304447	RGB 48 68 71	#304447
16.7%	16.7% #31464B	RGB 49 70 75	#31464B
33.3%	33.3% #32484F	RGB 50 72 79	#32484F
50.0%	50.0% #344A53	RGB 52 74 83	#344A53
66.7%	66.7% #354C57	RGB 53 76 87	#354C57
83.3%	83.3% #364E5B	RGB 54 78 91	#364E5B
100.0%	100.0% #374F60	RGB 55 79 96	#374F60

#304447 #31464B #32484F #344A53 #354C57 #364E5B #374F60

#304447 - #344A53 - #374F60

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #304447 0%, #344A53 50%, #374F60 100%);
    background: -webkit-linear-gradient(top, #304447 0%, #344A53 50%, #374F60 100%);
    background: linear-gradient(to bottom, #304447 0%, #344A53 50%, #374F60 100%);
}
</style>