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

rgb(115,155,252)

色の変へん換かん

形式表し方
Hex#739bfc
RGB115,155,252
RGB(%)45%,61%,99%
CMY0.55,0.39,0.01
CMYK0.54,0.38,0.0,0.01
HSV222°,54%,99%
HSL222°,96%,72%

この色について

#739bfcは明るめの色です

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

この色に似ている色(類似色)は#8f73fc,#b273fcや#73e0fc,#73fcf6です

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

この色より明るい色

#739bfcより10%明るい色:

#a5bffd

#739bfcより20%明るい色:

#d7e2fe

#739bfcより28%明るい色:

#ffffff

この色より暗い色

#739bfcより10%暗い色:

#4177fb

#739bfcより20%暗い色:

#0f54fa

#739bfcより30%暗い色:

#0440d2

#739bfcより40%暗い色:

#0331a0

#739bfcより50%暗い色:

#02226e

#739bfcより60%暗い色:

#01123c

#739bfcより70%暗い色:

#00030a

#739bfcより72%暗い色:

#000000

この色よりあざやかな色

#739bfcより4%あざやかな色:

#709aff

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

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

#7a9ef5

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

#81a1ee

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

#88a4e7

#739bfcより39%あざやかさを下げた色:

#8fa7e0

#739bfcより51%あざやかさを下げた色:

#97aad8

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

#9eadd1

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

#a5b0ca

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

#acb3c3

#739bfcより90%あざやかさを下げた色:

#b3b6bc

#739bfcより96%あざやかさを下げた色:

#b7b7b7

この色に似ている色

色のブレピュー

#739bfcを背景色として利用する

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

#739bfcを文字色として利用する

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

#739bfcを線の色として利用する

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

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

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

#739bfcを文字の影の色として利用する

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