#4EB664 - #16331C | colorate

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

Blend #4EB664 to #16331C

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

RGBブレンド

#4EB664 - #16331C | colorate

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

0.0%	0.0% #4EB664	RGB 78 182 100	#4EB664
16.7%	16.7% #44A058	RGB 68 160 88	#44A058
33.3%	33.3% #3B8A4C	RGB 59 138 76	#3B8A4C
50.0%	50.0% #327440	RGB 50 116 64	#327440
66.7%	66.7% #285E34	RGB 40 94 52	#285E34
83.3%	83.3% #1F4828	RGB 31 72 40	#1F4828
100.0%	100.0% #16331C	RGB 22 51 28	#16331C

#4EB664 #44A058 #3B8A4C #327440 #285E34 #1F4828 #16331C

#4EB664 - #16331C

HSVブレンド

#4EB664 - #16331C | colorate

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

0.0%	0.0% #4EB664	RGB 78 182 100	#4EB664
16.7%	16.7% #44A057	RGB 68 160 87	#44A057
33.3%	33.3% #3B8A4B	RGB 59 138 75	#3B8A4B
50.0%	50.0% #32743F	RGB 50 116 63	#32743F
66.7%	66.7% #285E33	RGB 40 94 51	#285E33
83.3%	83.3% #1F4827	RGB 31 72 39	#1F4827
100.0%	100.0% #16331C	RGB 22 51 28	#16331C

#4EB664 #44A057 #3B8A4B #32743F #285E33 #1F4827 #16331C

#4EB664 - #32743F - #16331C

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #4EB664 0%, #32743F 50%, #16331C 100%);
    background: -webkit-linear-gradient(top, #4EB664 0%, #32743F 50%, #16331C 100%);
    background: linear-gradient(to bottom, #4EB664 0%, #32743F 50%, #16331C 100%);
}
</style>