#172F3B - #2E3B16 | colorate

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

Blend #172F3B to #2E3B16

#172F3B

#2E3B16

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

RGBブレンド

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

0.0%	0.0% #172F3B	RGB 23 47 59	#172F3B
16.7%	16.7% #1A3135	RGB 26 49 53	#1A3135
33.3%	33.3% #1E332F	RGB 30 51 47	#1E332F
50.0%	50.0% #223529	RGB 34 53 41	#223529
66.7%	66.7% #263723	RGB 38 55 35	#263723
83.3%	83.3% #2A391D	RGB 42 57 29	#2A391D
100.0%	100.0% #2E3B16	RGB 46 59 22	#2E3B16

#172F3B #1A3135 #1E332F #223529 #263723 #2A391D #2E3B16

#172F3B - #2E3B16

HSVブレンド

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

0.0%	0.0% #162E3B	RGB 22 46 59	#162E3B
16.7%	16.7% #163A3B	RGB 22 58 59	#163A3B
33.3%	33.3% #163B2F	RGB 22 59 47	#163B2F
50.0%	50.0% #163B22	RGB 22 59 34	#163B22
66.7%	66.7% #163B16	RGB 22 59 22	#163B16
83.3%	83.3% #213B16	RGB 33 59 22	#213B16
100.0%	100.0% #2E3B16	RGB 46 59 22	#2E3B16

#162E3B #163A3B #163B2F #163B22 #163B16 #213B16 #2E3B16

#162E3B - #163B22 - #2E3B16

CSSコード

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

/* HSV Gradation */
div {                
    background: -moz-linear-gradient(top, #162E3B 0%, #163B22 50%, #2E3B16 100%);
    background: -webkit-linear-gradient(top, #162E3B 0%, #163B22 50%, #2E3B16 100%);
    background: linear-gradient(to bottom, #162E3B 0%, #163B22 50%, #2E3B16 100%); 
}
</style>