#202020 - #3B0A00 | colorate

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

Blend #202020 to #3B0A00

#202020 #3B0A00

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

RGBブレンド

#202020 - #3B0A00 | colorate

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

0.0%	0.0% #202020	RGB 32 32 32	#202020
16.7%	16.7% #241C1A	RGB 36 28 26	#241C1A
33.3%	33.3% #291815	RGB 41 24 21	#291815
50.0%	50.0% #2D1510	RGB 45 21 16	#2D1510
66.7%	66.7% #32110A	RGB 50 17 10	#32110A
83.3%	83.3% #360D05	RGB 54 13 5	#360D05
100.0%	100.0% #3B0A00	RGB 59 10 0	#3B0A00

#202020 #241C1A #291815 #2D1510 #32110A #360D05 #3B0A00

#202020 - #3B0A00

HSVブレンド

#202020 - #3B0A00 | colorate

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

0.0%	0.0% #202020	RGB 32 32 32	#202020
16.7%	16.7% #241E1E	RGB 36 30 30	#241E1E
33.3%	33.3% #291C1B	RGB 41 28 27	#291C1B
50.0%	50.0% #2D1816	RGB 45 24 22	#2D1816
66.7%	66.7% #321410	RGB 50 20 16	#321410
83.3%	83.3% #360F09	RGB 54 15 9	#360F09
100.0%	100.0% #3B0A00	RGB 59 10 0	#3B0A00

#202020 #241E1E #291C1B #2D1816 #321410 #360F09 #3B0A00

#202020 - #2D1816 - #3B0A00

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #202020 0%, #2D1816 50%, #3B0A00 100%);
    background: -webkit-linear-gradient(top, #202020 0%, #2D1816 50%, #3B0A00 100%);
    background: linear-gradient(to bottom, #202020 0%, #2D1816 50%, #3B0A00 100%);
}
</style>