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

rgb(5,150,250)

色の変へん換かん

形式表し方
Hex#0596fa
RGB5,150,250
RGB(%)2%,59%,98%
CMY0.98,0.41,0.02
CMYK0.98,0.4,0.0,0.02
HSV204°,98%,98%
HSL204°,96%,50%

この色について

#0596faは明るめの色です

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

この色に似ている色(類似色)は#051bfa,#2c05faや#05fae3,#05faa6です

この色とバランスが良い色(トライアド配色)は#fa0596と#96fa05です

この色より明るい色

#0596faより10%明るい色:

#37abfb

#0596faより20%明るい色:

#69c0fc

#0596faより30%明るい色:

#9bd5fd

#0596faより40%明るい色:

#cdeafe

#0596faより50%明るい色:

#ffffff

この色より暗い色

#0596faより10%暗い色:

#0478c8

#0596faより20%暗い色:

#035a96

#0596faより30%暗い色:

#023c64

#0596faより40%暗い色:

#011e32

#0596faより50%暗い色:

#000000

この色よりあざやかな色

#0596faより4%あざやかな色:

#0097ff

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

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

#1294ed

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

#1f91e0

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

#2b8fd4

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

#388dc7

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

#458aba

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

#5288ad

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

#5e86a1

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

#6b8394

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

#788187

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

#7f7f7f

この色に似ている色

色のブレピュー

#0596faを背景色として利用する

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

#0596faを文字色として利用する

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

#0596faを線の色として利用する

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

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

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

#0596faを文字の影の色として利用する

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