#4A8A8B - #4788A4 | colorate

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

Blend #4A8A8B to #4788A4

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

RGBブレンド

#4A8A8B - #4788A4 | colorate

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

0.0%	0.0% #4A8A8B	RGB 74 138 139	#4A8A8B
16.7%	16.7% #49898F	RGB 73 137 143	#49898F
33.3%	33.3% #498993	RGB 73 137 147	#498993
50.0%	50.0% #488997	RGB 72 137 151	#488997
66.7%	66.7% #48889B	RGB 72 136 155	#48889B
83.3%	83.3% #47889F	RGB 71 136 159	#47889F
100.0%	100.0% #4788A4	RGB 71 136 164	#4788A4

#4A8A8B #49898F #498993 #488997 #48889B #47889F #4788A4

#4A8A8B - #4788A4

HSVブレンド

#4A8A8B - #4788A4 | colorate

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

0.0%	0.0% #4A8A8B	RGB 74 138 139	#4A8A8B
16.7%	16.7% #498A8F	RGB 73 138 143	#498A8F
33.3%	33.3% #498B93	RGB 73 139 147	#498B93
50.0%	50.0% #498B97	RGB 73 139 151	#498B97
66.7%	66.7% #488A9B	RGB 72 138 155	#488A9B
83.3%	83.3% #47899F	RGB 71 137 159	#47899F
100.0%	100.0% #4788A4	RGB 71 136 164	#4788A4

#4A8A8B #498A8F #498B93 #498B97 #488A9B #47899F #4788A4

#4A8A8B - #498B97 - #4788A4

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #4A8A8B 0%, #498B97 50%, #4788A4 100%);
    background: -webkit-linear-gradient(top, #4A8A8B 0%, #498B97 50%, #4788A4 100%);
    background: linear-gradient(to bottom, #4A8A8B 0%, #498B97 50%, #4788A4 100%);
}
</style>