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

rgb(151,13,186)

色の変へん換かん

形式表し方
Hex#970dba
RGB151,13,186
RGB(%)59%,5%,73%
CMY0.41,0.95,0.27
CMYK0.19,0.93,0.0,0.27
HSV288°,93%,73%
HSL288°,87%,39%

この色について

#970dbaは暗めの色です

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

この色に似ている色(類似色)は#ba0d86,#ba0d5bや#410dba,#150dbaです

この色とバランスが良い色(トライアド配色)は#ba970dと#0dba97です

この色より明るい色

#970dbaより10%明るい色:

#be10ea

#970dbaより20%明るい色:

#cd3cf1

#970dbaより30%明るい色:

#d96bf5

#970dbaより40%明るい色:

#e59bf8

#970dbaより50%明るい色:

#f1cbfb

#970dbaより60%明るい色:

#fefaff

#970dbaより61%明るい色:

#ffffff

この色より暗い色

#970dbaより10%暗い色:

#700a8a

#970dbaより20%暗い色:

#4a065b

#970dbaより30%暗い色:

#23032b

#970dbaより39%暗い色:

#000000

この色よりあざやかな色

#970dbaより10%あざやかな色:

#9d03c4

#970dbaより13%あざやかな色:

#9f00c7

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

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

#9117b0

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

#8b21a6

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

#852b9c

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

#7f3592

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

#793f88

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

#73497e

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

#6e5374

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

#685d6a

#970dbaより87%あざやかさを下げた色:

#646464

この色に似ている色

色のブレピュー

#970dbaを背景色として利用する

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

#970dbaを文字色として利用する

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

#970dbaを線の色として利用する

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

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

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

#970dbaを文字の影の色として利用する

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