#496A80 - #304066 | colorate

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

Blend #496A80 to #304066

#496A80 #304066

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

RGBブレンド

#496A80 - #304066 | colorate

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

0.0%	0.0% #496A80	RGB 73 106 128	#496A80
16.7%	16.7% #44637B	RGB 68 99 123	#44637B
33.3%	33.3% #405C77	RGB 64 92 119	#405C77
50.0%	50.0% #3C5573	RGB 60 85 115	#3C5573
66.7%	66.7% #384E6E	RGB 56 78 110	#384E6E
83.3%	83.3% #34476A	RGB 52 71 106	#34476A
100.0%	100.0% #304066	RGB 48 64 102	#304066

#496A80 #44637B #405C77 #3C5573 #384E6E #34476A #304066

#496A80 - #304066

HSVブレンド

#496A80 - #304066 | colorate

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

0.0%	0.0% #496A80	RGB 73 106 128	#496A80
16.7%	16.7% #44627B	RGB 68 98 123	#44627B
33.3%	33.3% #405B77	RGB 64 91 119	#405B77
50.0%	50.0% #3B5473	RGB 59 84 115	#3B5473
66.7%	66.7% #374D6E	RGB 55 77 110	#374D6E
83.3%	83.3% #33466A	RGB 51 70 106	#33466A
100.0%	100.0% #304066	RGB 48 64 102	#304066

#496A80 #44627B #405B77 #3B5473 #374D6E #33466A #304066

#496A80 - #3B5473 - #304066

CSSコード

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

/* HSV Gradation */
div {
    background: -moz-linear-gradient(top, #496A80 0%, #3B5473 50%, #304066 100%);
    background: -webkit-linear-gradient(top, #496A80 0%, #3B5473 50%, #304066 100%);
    background: linear-gradient(to bottom, #496A80 0%, #3B5473 50%, #304066 100%);
}
</style>