#5E686B - #3F4851 | colorate

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

Blend #5E686B to #3F4851

#5E686B

#3F4851

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

RGBブレンド

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

0.0%	0.0% #5E686B	RGB 94 104 107	#5E686B
16.7%	16.7% #596367	RGB 89 99 103	#596367
33.3%	33.3% #545E63	RGB 84 94 99	#545E63
50.0%	50.0% #4F585E	RGB 79 88 94	#4F585E
66.7%	66.7% #4A535A	RGB 74 83 90	#4A535A
83.3%	83.3% #454E56	RGB 69 78 86	#454E56
100.0%	100.0% #3F4851	RGB 63 72 81	#3F4851

#5E686B #596367 #545E63 #4F585E #4A535A #454E56 #3F4851

#5E686B - #3F4851

HSVブレンド

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

0.0%	0.0% #5E686B	RGB 94 104 107	#5E686B
16.7%	16.7% #586266	RGB 88 98 102	#586266
33.3%	33.3% #535D62	RGB 83 93 98	#535D62
50.0%	50.0% #4D585E	RGB 77 88 94	#4D585E
66.7%	66.7% #485259	RGB 72 82 89	#485259
83.3%	83.3% #434D55	RGB 67 77 85	#434D55
100.0%	100.0% #3F4851	RGB 63 72 81	#3F4851

#5E686B #586266 #535D62 #4D585E #485259 #434D55 #3F4851

#5E686B - #4D585E - #3F4851

CSSコード

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

/* HSV Gradation */
div {                
    background: -moz-linear-gradient(top, #5E686B 0%, #4D585E 50%, #3F4851 100%);
    background: -webkit-linear-gradient(top, #5E686B 0%, #4D585E 50%, #3F4851 100%);
    background: linear-gradient(to bottom, #5E686B 0%, #4D585E 50%, #3F4851 100%); 
}
</style>