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

rgb(240,171,222)

色の変へん換かん

形式表し方
Hex#f0abde
RGB240,171,222
RGB(%)94%,67%,87%
CMY0.06,0.33,0.13
CMYK0.0,0.29,0.08,0.06
HSV316°,29%,94%
HSL316°,70%,81%

この色について

#f0abdeは明るめの色です

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

この色に似ている色(類似色)は#f0abbb,#f0acabや#e0abf0,#ceabf0です

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

この色より明るい色

#f0abdeより10%明るい色:

#f8d8f0

#f0abdeより19%明るい色:

#ffffff

この色より暗い色

#f0abdeより10%暗い色:

#e982ce

#f0abdeより20%暗い色:

#e156bd

#f0abdeより30%暗い色:

#d92bac

#f0abdeより40%暗い色:

#b1208b

#f0abdeより50%暗い色:

#861869

#f0abdeより60%暗い色:

#5b1047

#f0abdeより70%暗い色:

#300825

#f0abdeより80%暗い色:

#040103

#f0abdeより81%暗い色:

#000000

この色よりあざやかな色

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

#f5a6e0

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

#faa1e3

#f0abdeより30%あざやかな色:

#ff9ce5

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

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

#ebb0dc

#f0abdeより21%あざやかさを下げた色:

#e6b5d9

#f0abdeより31%あざやかさを下げた色:

#e1bad7

#f0abdeより41%あざやかさを下げた色:

#dcbfd5

#f0abdeより51%あざやかさを下げた色:

#d7c4d2

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

#d2c9d0

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

#cecece

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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