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

rgb(237,191,190)

色の変へん換かん

形式表し方
Hex#edbfbe
RGB237,191,190
RGB(%)93%,75%,75%
CMY0.07,0.25,0.25
CMYK0.0,0.19,0.2,0.07
HSV1°,20%,93%
HSL1°,57%,84%

この色について

#edbfbeは明るめの色です

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

この色に似ている色(類似色)は#edd7be,#ede2beや#edbed5,#edbee0です

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

この色より明るい色

#edbfbeより10%明るい色:

#f8e7e7

#edbfbeより16%明るい色:

#ffffff

この色より暗い色

#edbfbeより10%暗い色:

#e29997

#edbfbeより20%暗い色:

#d7716f

#edbfbeより30%暗い色:

#cc4a47

#edbfbeより40%暗い色:

#b03331

#edbfbeより50%暗い色:

#882826

#edbfbeより60%暗い色:

#601c1b

#edbfbeより70%暗い色:

#38100f

#edbfbeより80%暗い色:

#100504

#edbfbeより84%暗い色:

#000000

この色よりあざやかな色

#edbfbeより9%あざやかな色:

#f1bbba

#edbfbeより19%あざやかな色:

#f5b7b6

#edbfbeより31%あざやかな色:

#fab3b1

#edbfbeより41%あざやかな色:

#feafad

#edbfbeより43%あざやかな色:

#ffaeac

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

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

#e9c3c2

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

#e5c7c6

#edbfbeより29%あざやかさを下げた色:

#e1cbca

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

#ddcfce

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

#d8d3d3

#edbfbeより57%あざやかさを下げた色:

#d6d6d6

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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