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

rgb(252,206,221)

色の変へん換かん

形式表し方
Hex#fccedd
RGB252,206,221
RGB(%)99%,81%,87%
CMY0.01,0.19,0.13
CMYK0.0,0.18,0.12,0.01
HSV340°,18%,99%
HSL340°,88%,90%

この色について

#fcceddは明るめの色です

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

この色に似ている色(類似色)は#fcd6ce,#fce2ceや#fccef4,#f8cefcです

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

この色より明るい色

#fcceddより10%明るい色:

#ffffff

この色より暗い色

#fcceddより10%暗い色:

#f99fbc

#fcceddより20%暗い色:

#f66f9b

#fcceddより30%暗い色:

#f33f7a

#fcceddより40%暗い色:

#f00f58

#fcceddより50%暗い色:

#c00c47

#fcceddより60%暗い色:

#900935

#fcceddより70%暗い色:

#600623

#fcceddより80%暗い色:

#300312

#fcceddより90%暗い色:

#000000

この色よりあざやかな色

#fcceddより8%あざやかな色:

#feccdc

#fcceddより12%あざやかな色:

#ffcbdc

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

#fcceddより11%あざやかさを下げた色:

#f9d1de

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

#f7d3df

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

#f4d6e0

#fcceddより42%あざやかさを下げた色:

#f1d9e1

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

#efdbe2

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

#ecdee2

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

#eae0e3

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

#e7e3e4

#fcceddより88%あざやかさを下げた色:

#e5e5e5

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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