#3A3616 - #2F4617 | colorate

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

Blend #3A3616 to #2F4617

#3A3616

#2F4617

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

RGBブレンド

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

0.0%	0.0% #3A3616	RGB 58 54 22	#3A3616
16.7%	16.7% #393816	RGB 57 56 22	#393816
33.3%	33.3% #373B16	RGB 55 59 22	#373B16
50.0%	50.0% #353E16	RGB 53 62 22	#353E16
66.7%	66.7% #334016	RGB 51 64 22	#334016
83.3%	83.3% #314316	RGB 49 67 22	#314316
100.0%	100.0% #2F4617	RGB 47 70 23	#2F4617

#3A3616 #393816 #373B16 #353E16 #334016 #314316 #2F4617

#3A3616 - #2F4617

HSVブレンド

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

0.0%	0.0% #3A3615	RGB 58 54 21	#3A3615
16.7%	16.7% #3C3B16	RGB 60 59 22	#3C3B16
33.3%	33.3% #3A3E16	RGB 58 62 22	#3A3E16
50.0%	50.0% #384016	RGB 56 64 22	#384016
66.7%	66.7% #354216	RGB 53 66 22	#354216
83.3%	83.3% #324416	RGB 50 68 22	#324416
100.0%	100.0% #2F4617	RGB 47 70 23	#2F4617

#3A3615 #3C3B16 #3A3E16 #384016 #354216 #324416 #2F4617

#3A3615 - #384016 - #2F4617

CSSコード

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

/* HSV Gradation */
div {                
    background: -moz-linear-gradient(top, #3A3615 0%, #384016 50%, #2F4617 100%);
    background: -webkit-linear-gradient(top, #3A3615 0%, #384016 50%, #2F4617 100%);
    background: linear-gradient(to bottom, #3A3615 0%, #384016 50%, #2F4617 100%); 
}
</style>