#578F4E - #4BA856 | colorate

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

Blend #578F4E to #4BA856

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

RGBブレンド

#578F4E - #4BA856 | colorate

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

0.0%	0.0% #578F4E	RGB 87 143 78	#578F4E
16.7%	16.7% #55934F	RGB 85 147 79	#55934F
33.3%	33.3% #539750	RGB 83 151 80	#539750
50.0%	50.0% #519B52	RGB 81 155 82	#519B52
66.7%	66.7% #4F9F53	RGB 79 159 83	#4F9F53
83.3%	83.3% #4DA354	RGB 77 163 84	#4DA354
100.0%	100.0% #4BA856	RGB 75 168 86	#4BA856

#578F4E #55934F #539750 #519B52 #4F9F53 #4DA354 #4BA856

#578F4E - #4BA856

HSVブレンド

#578F4E - #4BA856 | colorate

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

0.0%	0.0% #568F4E	RGB 86 143 78	#568F4E
16.7%	16.7% #54934D	RGB 84 147 77	#54934D
33.3%	33.3% #51974D	RGB 81 151 77	#51974D
50.0%	50.0% #4D9B4D	RGB 77 155 77	#4D9B4D
66.7%	66.7% #4C9F4F	RGB 76 159 79	#4C9F4F
83.3%	83.3% #4BA352	RGB 75 163 82	#4BA352
100.0%	100.0% #4BA856	RGB 75 168 86	#4BA856

#568F4E #54934D #51974D #4D9B4D #4C9F4F #4BA352 #4BA856

#578F4E - #4D9B4D - #4BA856

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #568F4E 0%, #4D9B4D 50%, #4BA856 100%);
    background: -webkit-linear-gradient(top, #568F4E 0%, #4D9B4D 50%, #4BA856 100%);
    background: linear-gradient(to bottom, #568F4E 0%, #4D9B4D 50%, #4BA856 100%);
}
</style>