#7D7E81 - #86899A | colorate

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

Blend #7D7E81 to #86899A

#7D7E81 #86899A

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

RGBブレンド

#7D7E81 - #86899A | colorate

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

0.0%	0.0% #7D7E81	RGB 125 126 129	#7D7E81
16.7%	16.7% #7E7F85	RGB 126 127 133	#7E7F85
33.3%	33.3% #808189	RGB 128 129 137	#808189
50.0%	50.0% #81838D	RGB 129 131 141	#81838D
66.7%	66.7% #838591	RGB 131 133 145	#838591
83.3%	83.3% #848795	RGB 132 135 149	#848795
100.0%	100.0% #86899A	RGB 134 137 154	#86899A

#7D7E81 #7E7F85 #808189 #81838D #838591 #848795 #86899A

#7D7E81 - #86899A

HSVブレンド

#7D7E81 - #86899A | colorate

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

0.0%	0.0% #7D7E81	RGB 125 126 129	#7D7E81
16.7%	16.7% #7E8085	RGB 126 128 133	#7E8085
33.3%	33.3% #808289	RGB 128 130 137	#808289
50.0%	50.0% #82848D	RGB 130 132 141	#82848D
66.7%	66.7% #838691	RGB 131 134 145	#838691
83.3%	83.3% #848795	RGB 132 135 149	#848795
100.0%	100.0% #86899A	RGB 134 137 154	#86899A

#7D7E81 #7E8085 #808289 #82848D #838691 #848795 #86899A

#7D7E81 - #82848D - #86899A

CSSコード

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

/* HSV Gradation */
div {
    background: -moz-linear-gradient(top, #7D7E81 0%, #82848D 50%, #86899A 100%);
    background: -webkit-linear-gradient(top, #7D7E81 0%, #82848D 50%, #86899A 100%);
    background: linear-gradient(to bottom, #7D7E81 0%, #82848D 50%, #86899A 100%);
}
</style>