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

rgb(239,118,250)

色の変へん換かん

形式表し方
Hex#ef76fa
RGB239,118,250
RGB(%)94%,46%,98%
CMY0.06,0.54,0.02
CMYK0.04,0.53,0.0,0.02
HSV295°,53%,98%
HSL295°,93%,72%

この色について

#ef76faは明るめの色です

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

この色に似ている色(類似色)は#fa76c3,#fa76a2や#ad76fa,#8c76faです

この色とバランスが良い色(トライアド配色)は#faef76と#76faefです

この色より明るい色

#ef76faより10%明るい色:

#f5a6fc

#ef76faより20%明るい色:

#fad8fe

#ef76faより28%明るい色:

#ffffff

この色より暗い色

#ef76faより10%暗い色:

#e944f8

#ef76faより20%暗い色:

#e313f6

#ef76faより30%暗い色:

#be08cf

#ef76faより40%暗い色:

#91069d

#ef76faより50%暗い色:

#64046c

#ef76faより60%暗い色:

#36023b

#ef76faより70%暗い色:

#09000a

#ef76faより72%暗い色:

#000000

この色よりあざやかな色

#ef76faより7%あざやかな色:

#f371ff

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

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

#e97df3

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

#e384ec

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

#dd8be5

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

#d792de

#ef76faより49%あざやかさを下げた色:

#d199d7

#ef76faより61%あざやかさを下げた色:

#cca1cf

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

#c6a8c8

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

#c0afc1

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

#bab6ba

#ef76faより93%あざやかさを下げた色:

#b8b8b8

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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