#5B5E4D - #89D9A4 | colorate

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

Blend #5B5E4D to #89D9A4

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

RGBブレンド

#5B5E4D - #89D9A4 | colorate

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

0.0%	0.0% #5B5E4D	RGB 91 94 77	#5B5E4D
16.7%	16.7% #62725B	RGB 98 114 91	#62725B
33.3%	33.3% #6A876A	RGB 106 135 106	#6A876A
50.0%	50.0% #729B78	RGB 114 155 120	#729B78
66.7%	66.7% #79B087	RGB 121 176 135	#79B087
83.3%	83.3% #81C495	RGB 129 196 149	#81C495
100.0%	100.0% #89D9A4	RGB 137 217 164	#89D9A4

#5B5E4D #62725B #6A876A #729B78 #79B087 #81C495 #89D9A4

#5B5E4D - #89D9A4

HSVブレンド

#5B5E4D - #89D9A4 | colorate

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

0.0%	0.0% #5B5E4D	RGB 91 94 77	#5B5E4D
16.7%	16.7% #69725A	RGB 105 114 90	#69725A
33.3%	33.3% #748766	RGB 116 135 102	#748766
50.0%	50.0% #7B9B70	RGB 123 155 112	#7B9B70
66.7%	66.7% #7CB07A	RGB 124 176 122	#7CB07A
83.3%	83.3% #82C48B	RGB 130 196 139	#82C48B
100.0%	100.0% #89D9A4	RGB 137 217 164	#89D9A4

#5B5E4D #69725A #748766 #7B9B70 #7CB07A #82C48B #89D9A4

#5B5E4D - #7B9B70 - #89D9A4

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5B5E4D 0%, #7B9B70 50%, #89D9A4 100%);
    background: -webkit-linear-gradient(top, #5B5E4D 0%, #7B9B70 50%, #89D9A4 100%);
    background: linear-gradient(to bottom, #5B5E4D 0%, #7B9B70 50%, #89D9A4 100%);
}
</style>