#335B42 - #5B334C | colorate

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

Blend #335B42 to #5B334C

#335B42

#5B334C

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

RGBブレンド

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

0.0%	0.0% #335B42	RGB 51 91 66	#335B42
16.7%	16.7% #395543	RGB 57 85 67	#395543
33.3%	33.3% #404E45	RGB 64 78 69	#404E45
50.0%	50.0% #474747	RGB 71 71 71	#474747
66.7%	66.7% #4D4148	RGB 77 65 72	#4D4148
83.3%	83.3% #543A4A	RGB 84 58 74	#543A4A
100.0%	100.0% #5B334C	RGB 91 51 76	#5B334C

#335B42 #395543 #404E45 #474747 #4D4148 #543A4A #5B334C

#335B42 - #5B334C

HSVブレンド

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

0.0%	0.0% #335B42	RGB 51 91 66	#335B42
16.7%	16.7% #335B56	RGB 51 91 86	#335B56
33.3%	33.3% #334C5B	RGB 51 76 91	#334C5B
50.0%	50.0% #33385B	RGB 51 56 91	#33385B
66.7%	66.7% #41335B	RGB 65 51 91	#41335B
83.3%	83.3% #56335B	RGB 86 51 91	#56335B
100.0%	100.0% #5B334C	RGB 91 51 76	#5B334C

#335B42 #335B56 #334C5B #33385B #41335B #56335B #5B334C

#335B42 - #33385B - #5B334C

CSSコード

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

/* HSV Gradation */
div {                
    background: -moz-linear-gradient(top, #335B42 0%, #33385B 50%, #5B334C 100%);
    background: -webkit-linear-gradient(top, #335B42 0%, #33385B 50%, #5B334C 100%);
    background: linear-gradient(to bottom, #335B42 0%, #33385B 50%, #5B334C 100%); 
}
</style>