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

rgb(130,26,218)

色の変へん換かん

形式表し方
Hex#821ada
RGB130,26,218
RGB(%)51%,10%,85%
CMY0.49,0.9,0.15
CMYK0.4,0.88,0.0,0.15
HSV273°,88%,85%
HSL273°,79%,48%

この色について

#821adaは暗めの色です

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

この色に似ている色(類似色)は#da1ad2,#da1aa2や#221ada,#1a42daです

この色とバランスが良い色(トライアド配色)は#da821aと#1ada82です

この色より明るい色

#821adaより10%明るい色:

#9b40e8

#821adaより20%明るい色:

#b36dee

#821adaより30%明るい色:

#cb9bf3

#821adaより40%明るい色:

#e2c8f8

#821adaより50%明るい色:

#faf6fe

#821adaより52%明るい色:

#ffffff

この色より暗い色

#821adaより10%暗い色:

#6715ad

#821adaより20%暗い色:

#4c0f80

#821adaより30%暗い色:

#310a52

#821adaより40%暗い色:

#160424

#821adaより48%暗い色:

#000000

この色よりあざやかな色

#821adaより10%あざやかな色:

#830de7

#821adaより20%あざやかな色:

#8401f3

#821adaより21%あざやかな色:

#8400f4

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

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

#8126ce

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

#8032c2

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

#7f3eb6

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

#7e4aaa

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

#7d579d

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

#7c6391

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

#7b6f85

#821adaより79%あざやかさを下げた色:

#7a7a7a

この色に似ている色

色のブレピュー

#821adaを背景色として利用する

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

#821adaを文字色として利用する

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

#821adaを線の色として利用する

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

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

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

#821adaを文字の影の色として利用する

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