#338686 - #4EB6DF | colorate

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

Blend #338686 to #4EB6DF

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

RGBブレンド

#338686 - #4EB6DF | colorate

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

0.0%	0.0% #338686	RGB 51 134 134	#338686
16.7%	16.7% #378E94	RGB 55 142 148	#378E94
33.3%	33.3% #3C96A3	RGB 60 150 163	#3C96A3
50.0%	50.0% #409EB2	RGB 64 158 178	#409EB2
66.7%	66.7% #45A6C1	RGB 69 166 193	#45A6C1
83.3%	83.3% #49AED0	RGB 73 174 208	#49AED0
100.0%	100.0% #4EB6DF	RGB 78 182 223	#4EB6DF

#338686 #378E94 #3C96A3 #409EB2 #45A6C1 #49AED0 #4EB6DF

#338686 - #4EB6DF

HSVブレンド

#338686 - #4EB6DF | colorate

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

0.0%	0.0% #338686	RGB 51 134 134	#338686
16.7%	16.7% #379094	RGB 55 144 148	#379094
33.3%	33.3% #3C99A3	RGB 60 153 163	#3C99A3
50.0%	50.0% #41A2B2	RGB 65 162 178	#41A2B2
66.7%	66.7% #45AAC1	RGB 69 170 193	#45AAC1
83.3%	83.3% #49B0D0	RGB 73 176 208	#49B0D0
100.0%	100.0% #4EB6DF	RGB 78 182 223	#4EB6DF

#338686 #379094 #3C99A3 #41A2B2 #45AAC1 #49B0D0 #4EB6DF

#338686 - #41A2B2 - #4EB6DF

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #338686 0%, #41A2B2 50%, #4EB6DF 100%);
    background: -webkit-linear-gradient(top, #338686 0%, #41A2B2 50%, #4EB6DF 100%);
    background: linear-gradient(to bottom, #338686 0%, #41A2B2 50%, #4EB6DF 100%);
}
</style>