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

rgb(57,155,238)

色の変へん換かん

形式表し方
Hex#399bee
RGB57,155,238
RGB(%)22%,61%,93%
CMY0.78,0.39,0.07
CMYK0.76,0.35,0.0,0.07
HSV208°,76%,93%
HSL208°,84%,58%

この色について

#399beeは明るめの色です

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

この色に似ている色(類似色)は#3941ee,#5f39eeや#39eee7,#39eeb9です

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

この色より明るい色

#399beeより10%明るい色:

#69b3f2

#399beeより20%明るい色:

#98cbf6

#399beeより30%明るい色:

#c7e3fa

#399beeより40%明るい色:

#f6fafe

#399beeより42%明るい色:

#ffffff

この色より暗い色

#399beeより10%暗い色:

#1383e1

#399beeより20%暗い色:

#0f68b2

#399beeより30%暗い色:

#0b4c84

#399beeより40%暗い色:

#073155

#399beeより50%暗い色:

#031626

#399beeより58%暗い色:

#000000

この色よりあざやかな色

#399beeより10%あざやかな色:

#2e9cf9

#399beeより16%あざやかな色:

#289cff

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

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

#449ae3

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

#4f99d8

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

#5998ce

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

#6497c3

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

#6f97b8

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

#7a96ad

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

#8495a3

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

#8f9498

#399beeより84%あざやかさを下げた色:

#949494

この色に似ている色

色のブレピュー

#399beeを背景色として利用する

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

#399beeを文字色として利用する

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

#399beeを線の色として利用する

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

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

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

#399beeを文字の影の色として利用する

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