HEX(16進しん数すう)#149ece に対応するRGB(10進しん数すう)は...

rgb(20,158,206)

色の変へん換かん

形式表し方
Hex#149ece
RGB20,158,206
RGB(%)8%,62%,81%
CMY0.92,0.38,0.19
CMYK0.9,0.23,0.0,0.19
HSV195°,90%,81%
HSL195°,82%,44%

この色について

#149eceは明るめの色です

この色の反対の色(補色)は#ce4414です

この色に似ている色(類似色)は#1441ce,#1614ceや#14cea1,#14ce73です

この色とバランスが良い色(トライアド配色)は#ce149eと#9ece14です

この色より明るい色

#149eceより10%明るい色:

#29b8ea

#149eceより20%明るい色:

#58c8ef

#149eceより30%明るい色:

#86d7f3

#149eceより40%明るい色:

#b5e6f8

#149eceより50%明るい色:

#e3f6fc

#149eceより56%明るい色:

#ffffff

この色より暗い色

#149eceより10%暗い色:

#0f799e

#149eceより20%暗い色:

#0b5670

#149eceより30%暗い色:

#063241

#149eceより40%暗い色:

#020e13

#149eceより44%暗い色:

#000000

この色よりあざやかな色

#149eceより10%あざやかな色:

#09a3d9

#149eceより18%あざやかな色:

#00a8e2

この色よりあざやかさを下げた色

#149eceより10%あざやかさを下げた色:

#2098c2

#149eceより20%あざやかさを下げた色:

#2b93b7

#149eceより30%あざやかさを下げた色:

#368dac

#149eceより40%あざやかさを下げた色:

#4288a0

#149eceより50%あざやかさを下げた色:

#4d8295

#149eceより60%あざやかさを下げた色:

#587d8a

#149eceより70%あざやかさを下げた色:

#63787f

#149eceより80%あざやかさを下げた色:

#6f7273

#149eceより82%あざやかさを下げた色:

#717171

この色に似ている色

色のブレピュー

#149eceを背景色として利用する

#149eceに白文字を表示する
白の文字が表示されています
background: #149ece;
color: white;
#149eceに黒文字を表示する
黒の文字が表示されています
background: #149ece;
color: black;

#149eceを文字色として利用する

白背景に#149eceを文字色として表示する
白の背景に文字が表示されています
background: white;
color: #149ece;
黒背景に#149eceを文字色として表示する
黒の背景に文字が表示されています
background: black;
color: #149ece;

#149eceを線の色として利用する

白背景に#149eceを線の色として表示する
1pxの#149eceの線に囲まれています
border: 1px solid #149ece;
color: #4a4a4a;
2pxの#149eceの線に囲まれています
border: 2px solid #149ece;
color: #4a4a4a;
3pxの#149eceの線に囲まれています
border: 3px solid #149ece;
color: #4a4a4a;
黒背景に#149eceを線の色として表示する
1pxの#149eceの線に囲まれています
border: 1px solid #149ece;
background: black;
color: white;
2pxの#149eceの線に囲まれています
border: 2px solid #149ece;
background: black;
color: white;
3pxの#149eceの線に囲まれています
border: 3px solid #149ece;
background: black;
color: white;

#149eceをボックスの影の色として利用する

白背景に#149eceを影の色として表示する
#149eceの影に囲まれています
box-shadow: 0 2px 5px #149ece;
color: #4a4a4a;
#149eceを80%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(20,158,206,0.8);
color: #4a4a4a;
#149eceを60%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(20,158,206,0.6);
color: #4a4a4a;
#149eceを40%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(20,158,206,0.4);
color: #4a4a4a;
#149eceを20%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(20,158,206,0.2);
color: #4a4a4a;
黒背景に#149eceを影の色として表示する
#149eceの影に囲まれています
box-shadow: 0 2px 5px #149ece;
background: black;
color: white;
#149eceを80%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(20,158,206,0.8);
background: black;
color: white;
#149eceを60%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(20,158,206,0.6);
background: black;
color: white;
#149eceを40%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(20,158,206,0.4);
background: black;
color: white;
#149eceを20%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(20,158,206,0.2);
background: black;
color: white;

#149eceを文字の影の色として利用する

#149eceを黒文字の影の色として表示する
#149eceの影に囲まれています
text-shadow: 2px 2px 3px #149ece;
color: #4a4a4a;
#149eceを80%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(20,158,206,0.8);
color: #4a4a4a;
#149eceを60%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(20,158,206,0.6);
color: #4a4a4a;
#149eceを40%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(20,158,206,0.4);
color: #4a4a4a;
#149eceを20%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(20,158,206,0.2);
color: #4a4a4a;
#149eceを白文字の影の色として表示する
#149eceの影に囲まれています
text-shadow: 2px 2px 3px #149ece;
background: black;
color: white;
#149eceを80%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(20,158,206,0.8);
background: black;
color: white;
#149eceを60%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(20,158,206,0.6);
background: black;
color: white;
#149eceを40%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(20,158,206,0.4);
background: black;
color: white;
#149eceを20%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(20,158,206,0.2);
background: black;
color: white;