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

rgb(237,255,222)

色の変へん換かん

形式表し方
Hex#edffde
RGB237,255,222
RGB(%)93%,100%,87%
CMY0.07,0.0,0.13
CMYK0.07,0.0,0.13,0.0
HSV93°,13%,100%
HSL93°,100%,94%

この色について

#edffdeは明るめの色です

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

この色に似ている色(類似色)は#deffe0,#deffe8や#fdffde,#fff8deです

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

この色より明るい色

#edffdeより6%明るい色:

#ffffff

この色より暗い色

#edffdeより10%暗い色:

#d2ffad

#edffdeより20%暗い色:

#b7ff7a

#edffdeより30%暗い色:

#9bff47

#edffdeより40%暗い色:

#7fff14

#edffdeより50%暗い色:

#66e000

#edffdeより60%暗い色:

#4fad00

#edffdeより70%暗い色:

#387a00

#edffdeより80%暗い色:

#204700

#edffdeより90%暗い色:

#091400

#edffdeより94%暗い色:

#000000

この色よりあざやかな色

この色が一番あざやかな色です

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

#edffdeより12%あざやかさを下げた色:

#edfde0

#edffdeより18%あざやかさを下げた色:

#edfce1

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

#edfae3

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

#eef8e5

#edffdeより48%あざやかさを下げた色:

#eef7e6

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

#eef5e8

#edffdeより73%あざやかさを下げた色:

#eef3ea

#edffdeより79%あざやかさを下げた色:

#eef2eb

#edffdeより91%あざやかさを下げた色:

#eef0ed

#edffdeより100%あざやかさを下げた色:

#efefef

この色に似ている色

色のブレピュー

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

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

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

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

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

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

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

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

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

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