#696764 - #543716 | colorate

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

Blend #696764 to #543716

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

RGBブレンド

#696764 - #543716 | colorate

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

0.0%	0.0% #696764	RGB 105 103 100	#696764
16.7%	16.7% #655F57	RGB 101 95 87	#655F57
33.3%	33.3% #62574A	RGB 98 87 74	#62574A
50.0%	50.0% #5E4F3D	RGB 94 79 61	#5E4F3D
66.7%	66.7% #5B4730	RGB 91 71 48	#5B4730
83.3%	83.3% #573F23	RGB 87 63 35	#573F23
100.0%	100.0% #543716	RGB 84 55 22	#543716

#696764 #655F57 #62574A #5E4F3D #5B4730 #573F23 #543716

#696764 - #543716

HSVブレンド

#696764 - #543716 | colorate

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

0.0%	0.0% #696764	RGB 105 103 100	#696764
16.7%	16.7% #655E54	RGB 101 94 84	#655E54
33.3%	33.3% #625646	RGB 98 86 70	#625646
50.0%	50.0% #5E4E39	RGB 94 78 57	#5E4E39
66.7%	66.7% #5B462C	RGB 91 70 44	#5B462C
83.3%	83.3% #573E20	RGB 87 62 32	#573E20
100.0%	100.0% #543716	RGB 84 55 22	#543716

#696764 #655E54 #625646 #5E4E39 #5B462C #573E20 #543716

#696764 - #5E4E39 - #543716

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #696764 0%, #5E4E39 50%, #543716 100%);
    background: -webkit-linear-gradient(top, #696764 0%, #5E4E39 50%, #543716 100%);
    background: linear-gradient(to bottom, #696764 0%, #5E4E39 50%, #543716 100%);
}
</style>