#0006FF - #7BF9FF | colorate

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

Blend #0006FF to #7BF9FF

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

RGBブレンド

#0006FF - #7BF9FF | colorate

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

0.0%	0.0% #0006FF	RGB 0 6 255	#0006FF
16.7%	16.7% #142EFF	RGB 20 46 255	#142EFF
33.3%	33.3% #2957FF	RGB 41 87 255	#2957FF
50.0%	50.0% #3D7FFF	RGB 61 127 255	#3D7FFF
66.7%	66.7% #52A8FF	RGB 82 168 255	#52A8FF
83.3%	83.3% #66D0FF	RGB 102 208 255	#66D0FF
100.0%	100.0% #7BF9FF	RGB 123 249 255	#7BF9FF

#0006FF #142EFF #2957FF #3D7FFF #52A8FF #66D0FF #7BF9FF

#0006FF - #7BF9FF

HSVブレンド

#0006FF - #7BF9FF | colorate

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

0.0%	0.0% #0005FF	RGB 0 5 255	#0005FF
16.7%	16.7% #143EFF	RGB 20 62 255	#143EFF
33.3%	33.3% #2870FF	RGB 40 112 255	#2870FF
50.0%	50.0% #3D9CFF	RGB 61 156 255	#3D9CFF
66.7%	66.7% #52C1FF	RGB 82 193 255	#52C1FF
83.3%	83.3% #66E0FF	RGB 102 224 255	#66E0FF
100.0%	100.0% #7BF9FF	RGB 123 249 255	#7BF9FF

#0005FF #143EFF #2870FF #3D9CFF #52C1FF #66E0FF #7BF9FF

#0006FF - #3D9CFF - #7BF9FF

CSSコード

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #0005FF 0%, #3D9CFF 50%, #7BF9FF 100%);
    background: -webkit-linear-gradient(top, #0005FF 0%, #3D9CFF 50%, #7BF9FF 100%);
    background: linear-gradient(to bottom, #0005FF 0%, #3D9CFF 50%, #7BF9FF 100%);
}
</style>