#20B72F - #DFF4E1 | colorate

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

Blend #20B72F to #DFF4E1

#20B72F

#DFF4E1

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

RGBブレンド

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

0.0%	0.0% #20B72F	RGB 32 183 47	#20B72F
16.7%	16.7% #3FC14C	RGB 63 193 76	#3FC14C
33.3%	33.3% #5FCB6A	RGB 95 203 106	#5FCB6A
50.0%	50.0% #7FD588	RGB 127 213 136	#7FD588
66.7%	66.7% #9FDFA5	RGB 159 223 165	#9FDFA5
83.3%	83.3% #BFE9C3	RGB 191 233 195	#BFE9C3
100.0%	100.0% #DFF4E1	RGB 223 244 225	#DFF4E1

#20B72F #3FC14C #5FCB6A #7FD588 #9FDFA5 #BFE9C3 #DFF4E1

#20B72F - #DFF4E1

HSVブレンド

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

0.0%	0.0% #20B72F	RGB 32 183 47	#20B72F
16.7%	16.7% #39C146	RGB 57 193 70	#39C146
33.3%	33.3% #55CB61	RGB 85 203 97	#55CB61
50.0%	50.0% #74D57D	RGB 116 213 125	#74D57D
66.7%	66.7% #95DF9C	RGB 149 223 156	#95DF9C
83.3%	83.3% #B8E9BD	RGB 184 233 189	#B8E9BD
100.0%	100.0% #DFF4E1	RGB 223 244 225	#DFF4E1

#20B72F #39C146 #55CB61 #74D57D #95DF9C #B8E9BD #DFF4E1

#20B72F - #74D57D - #DFF4E1

CSSコード

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

/* HSV Gradation */
div {                
    background: -moz-linear-gradient(top, #20B72F 0%, #74D57D 50%, #DFF4E1 100%);
    background: -webkit-linear-gradient(top, #20B72F 0%, #74D57D 50%, #DFF4E1 100%);
    background: linear-gradient(to bottom, #20B72F 0%, #74D57D 50%, #DFF4E1 100%); 
}
</style>