#868D4C - #4C878D | colorate

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

Blend #868D4C to #4C878D

#868D4C

#4C878D

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

RGBブレンド

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

0.0%	0.0% #868D4C	RGB 134 141 76	#868D4C
16.7%	16.7% #7D8C56	RGB 125 140 86	#7D8C56
33.3%	33.3% #738B61	RGB 115 139 97	#738B61
50.0%	50.0% #698A6C	RGB 105 138 108	#698A6C
66.7%	66.7% #608977	RGB 96 137 119	#608977
83.3%	83.3% #568882	RGB 86 136 130	#568882
100.0%	100.0% #4C878D	RGB 76 135 141	#4C878D

#868D4C #7D8C56 #738B61 #698A6C #608977 #568882 #4C878D

#868D4C - #4C878D

HSVブレンド

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

0.0%	0.0% #868D4C	RGB 134 141 76	#868D4C
16.7%	16.7% #708D4C	RGB 112 141 76	#708D4C
33.3%	33.3% #5B8D4C	RGB 91 141 76	#5B8D4C
50.0%	50.0% #4C8D52	RGB 76 141 82	#4C8D52
66.7%	66.7% #4C8D68	RGB 76 141 104	#4C8D68
83.3%	83.3% #4C8D7D	RGB 76 141 125	#4C8D7D
100.0%	100.0% #4C878D	RGB 76 135 141	#4C878D

#868D4C #708D4C #5B8D4C #4C8D52 #4C8D68 #4C8D7D #4C878D

#868D4C - #4C8D52 - #4C878D

CSSコード

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

/* HSV Gradation */
div {                
    background: -moz-linear-gradient(top, #868D4C 0%, #4C8D52 50%, #4C878D 100%);
    background: -webkit-linear-gradient(top, #868D4C 0%, #4C8D52 50%, #4C878D 100%);
    background: linear-gradient(to bottom, #868D4C 0%, #4C8D52 50%, #4C878D 100%); 
}
</style>