#638E66 - #649A88 | colorate

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

Blend #638E66 to #649A88

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

RGBブレンド

#638E66 - #649A88 | colorate

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

0.0%	0.0% #638E66	RGB 99 142 102	#638E66
16.7%	16.7% #63906B	RGB 99 144 107	#63906B
33.3%	33.3% #639271	RGB 99 146 113	#639271
50.0%	50.0% #639477	RGB 99 148 119	#639477
66.7%	66.7% #63967C	RGB 99 150 124	#63967C
83.3%	83.3% #639882	RGB 99 152 130	#639882
100.0%	100.0% #649A88	RGB 100 154 136	#649A88

#638E66 #63906B #639271 #639477 #63967C #639882 #649A88

#638E66 - #649A88

HSVブレンド

#638E66 - #649A88 | colorate

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

0.0%	0.0% #638E66	RGB 99 142 102	#638E66
16.7%	16.7% #63906A	RGB 99 144 106	#63906A
33.3%	33.3% #63926F	RGB 99 146 111	#63926F
50.0%	50.0% #639475	RGB 99 148 117	#639475
66.7%	66.7% #63967B	RGB 99 150 123	#63967B
83.3%	83.3% #639881	RGB 99 152 129	#639881
100.0%	100.0% #649A88	RGB 100 154 136	#649A88

#638E66 #63906A #63926F #639475 #63967B #639881 #649A88

#638E66 - #639475 - #649A88

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #638E66 0%, #639475 50%, #649A88 100%);
    background: -webkit-linear-gradient(top, #638E66 0%, #639475 50%, #649A88 100%);
    background: linear-gradient(to bottom, #638E66 0%, #639475 50%, #649A88 100%);
}
</style>