#648F70 - #64A88E | colorate

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

Blend #648F70 to #64A88E

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

RGBブレンド

#648F70 - #64A88E | colorate

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

0.0%	0.0% #648F70	RGB 100 143 112	#648F70
16.7%	16.7% #649375	RGB 100 147 117	#649375
33.3%	33.3% #64977A	RGB 100 151 122	#64977A
50.0%	50.0% #649B7F	RGB 100 155 127	#649B7F
66.7%	66.7% #649F84	RGB 100 159 132	#649F84
83.3%	83.3% #64A389	RGB 100 163 137	#64A389
100.0%	100.0% #64A88E	RGB 100 168 142	#64A88E

#648F70 #649375 #64977A #649B7F #649F84 #64A389 #64A88E

#648F70 - #64A88E

HSVブレンド

#648F70 - #64A88E | colorate

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

0.0%	0.0% #648F70	RGB 100 143 112	#648F70
16.7%	16.7% #649374	RGB 100 147 116	#649374
33.3%	33.3% #649778	RGB 100 151 120	#649778
50.0%	50.0% #649B7D	RGB 100 155 125	#649B7D
66.7%	66.7% #649F82	RGB 100 159 130	#649F82
83.3%	83.3% #64A387	RGB 100 163 135	#64A387
100.0%	100.0% #64A88E	RGB 100 168 142	#64A88E

#648F70 #649374 #649778 #649B7D #649F82 #64A387 #64A88E

#648F70 - #649B7D - #64A88E

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #648F70 0%, #649B7D 50%, #64A88E 100%);
    background: -webkit-linear-gradient(top, #648F70 0%, #649B7D 50%, #64A88E 100%);
    background: linear-gradient(to bottom, #648F70 0%, #649B7D 50%, #64A88E 100%);
}
</style>