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

rgb(250,173,189)

色の変へん換かん

形式表し方
Hex#faadbd
RGB250,173,189
RGB(%)98%,68%,74%
CMY0.02,0.32,0.26
CMYK0.0,0.31,0.24,0.02
HSV348°,31%,98%
HSL348°,89%,83%

この色について

#faadbdは明るめの色です

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

この色に似ている色(類似色)は#fac4ad,#fad7adや#faade4,#faadf7です

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

この色より明るい色

#faadbdより10%明るい色:

#fddde4

#faadbdより17%明るい色:

#ffffff

この色より暗い色

#faadbdより10%暗い色:

#f77d97

#faadbdより20%暗い色:

#f44d70

#faadbdより30%暗い色:

#f11d49

#faadbdより40%暗い色:

#cf0d35

#faadbdより50%暗い色:

#9f0a29

#faadbdより60%暗い色:

#6f071c

#faadbdより70%暗い色:

#3e0410

#faadbdより80%暗い色:

#0e0104

#faadbdより83%暗い色:

#000000

この色よりあざやかな色

#faadbdより11%あざやかな色:

#ffa8ba

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

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

#f6b1bf

#faadbdより19%あざやかさを下げた色:

#f2b5c2

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

#edbac5

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

#e9bec7

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

#e4c3ca

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

#e0c7cc

#faadbdより69%あざやかさを下げた色:

#dccbcf

#faadbdより81%あざやかさを下げた色:

#d7d0d1

#faadbdより89%あざやかさを下げた色:

#d4d4d4

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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