#475684 - #847447 | colorate

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

Blend #475684 to #847447

#475684

#847447

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

RGBブレンド

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

0.0%	0.0% #475684	RGB 71 86 132	#475684
16.7%	16.7% #515B7A	RGB 81 91 122	#515B7A
33.3%	33.3% #5B6070	RGB 91 96 112	#5B6070
50.0%	50.0% #656566	RGB 101 101 102	#656566
66.7%	66.7% #6F6A5C	RGB 111 106 92	#6F6A5C
83.3%	83.3% #796F52	RGB 121 111 82	#796F52
100.0%	100.0% #847447	RGB 132 116 71	#847447

#475684 #515B7A #5B6070 #656566 #6F6A5C #796F52 #847447

#475684 - #847447

HSVブレンド

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

0.0%	0.0% #475684	RGB 71 86 132	#475684
16.7%	16.7% #564784	RGB 86 71 132	#564784
33.3%	33.3% #744784	RGB 116 71 132	#744784
50.0%	50.0% #844775	RGB 132 71 117	#844775
66.7%	66.7% #844756	RGB 132 71 86	#844756
83.3%	83.3% #845547	RGB 132 85 71	#845547
100.0%	100.0% #847347	RGB 132 115 71	#847347

#475684 #564784 #744784 #844775 #844756 #845547 #847347

#475684 - #844775 - #847347

CSSコード

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

/* HSV Gradation */
div {                
    background: -moz-linear-gradient(top, #475684 0%, #844775 50%, #847347 100%);
    background: -webkit-linear-gradient(top, #475684 0%, #844775 50%, #847347 100%);
    background: linear-gradient(to bottom, #475684 0%, #844775 50%, #847347 100%); 
}
</style>