HEX(16進数)#efccda に対応するRGB(10進数)は...
rgb(239,204,218)
色の変換
形式 | 表し方 |
---|---|
Hex | #efccda |
RGB | 239,204,218 |
RGB(%) | 94%,80%,85% |
CMY | 0.06,0.2,0.15 |
CMYK | 0.0,0.15,0.09,0.06 |
HSV | 336°,15%,94% |
HSL | 336°,52%,87% |
この色について
#efccdaは明るめの色です
この色の反対の色(補色)は#ccefe1です
この色に似ている色(類似色)は#efd0cc,#efd8ccや#efcceb,#eaccefです
この色とバランスが良い色(トライアド配色)は#daefccと#ccdaefです
この色より明るい色
#efccdaより10%明るい色: | |
#efccdaより13%明るい色: |
この色より暗い色
#efccdaより10%暗い色: | |
#efccdaより20%暗い色: | |
#efccdaより30%暗い色: | |
#efccdaより40%暗い色: | |
#efccdaより50%暗い色: | |
#efccdaより60%暗い色: | |
#efccdaより70%暗い色: | |
#efccdaより80%暗い色: | |
#efccdaより87%暗い色: |
この色よりあざやかな色
#efccdaより9%あざやかな色: | |
#efccdaより21%あざやかな色: | |
#efccdaより30%あざやかな色: | |
#efccdaより39%あざやかな色: | |
#efccdaより48%あざやかな色: |
この色よりあざやかさを下げた色
#efccdaより9%あざやかさを下げた色: | |
#efccdaより21%あざやかさを下げた色: | |
#efccdaより30%あざやかさを下げた色: | |
#efccdaより39%あざやかさを下げた色: | |
#efccdaより51%あざやかさを下げた色: | |
#efccdaより52%あざやかさを下げた色: |
この色に似ている色
色のブレピュー
#efccdaを背景色として利用する
- #efccdaに白文字を表示する
- 白の文字が表示されています
background: #efccda;
color: white; - #efccdaに黒文字を表示する
- 黒の文字が表示されています
background: #efccda;
color: black;
#efccdaを文字色として利用する
- 白背景に#efccdaを文字色として表示する
- 白の背景に文字が表示されています
background: white;
color: #efccda; - 黒背景に#efccdaを文字色として表示する
- 黒の背景に文字が表示されています
background: black;
color: #efccda;
#efccdaを線の色として利用する
- 白背景に#efccdaを線の色として表示する
- 1pxの#efccdaの線に囲まれています
border: 1px solid #efccda;
color: #4a4a4a; - 2pxの#efccdaの線に囲まれています
border: 2px solid #efccda;
color: #4a4a4a; - 3pxの#efccdaの線に囲まれています
border: 3px solid #efccda;
color: #4a4a4a; - 黒背景に#efccdaを線の色として表示する
- 1pxの#efccdaの線に囲まれています
border: 1px solid #efccda;
background: black;
color: white; - 2pxの#efccdaの線に囲まれています
border: 2px solid #efccda;
background: black;
color: white; - 3pxの#efccdaの線に囲まれています
border: 3px solid #efccda;
background: black;
color: white;
#efccdaをボックスの影の色として利用する
- 白背景に#efccdaを影の色として表示する
- #efccdaの影に囲まれています
box-shadow: 0 2px 5px #efccda;
color: #4a4a4a; - #efccdaを80%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(239,204,218,0.8);
color: #4a4a4a; - #efccdaを60%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(239,204,218,0.6);
color: #4a4a4a; - #efccdaを40%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(239,204,218,0.4);
color: #4a4a4a; - #efccdaを20%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(239,204,218,0.2);
color: #4a4a4a; - 黒背景に#efccdaを影の色として表示する
- #efccdaの影に囲まれています
box-shadow: 0 2px 5px #efccda;
background: black;
color: white; - #efccdaを80%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(239,204,218,0.8);
background: black;
color: white; - #efccdaを60%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(239,204,218,0.6);
background: black;
color: white; - #efccdaを40%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(239,204,218,0.4);
background: black;
color: white; - #efccdaを20%うすくした影に囲まれています
box-shadow: 0 2px 5px rgba(239,204,218,0.2);
background: black;
color: white;
#efccdaを文字の影の色として利用する
- #efccdaを黒文字の影の色として表示する
- #efccdaの影に囲まれています
text-shadow: 2px 2px 3px #efccda;
color: #4a4a4a; - #efccdaを80%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(239,204,218,0.8);
color: #4a4a4a; - #efccdaを60%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(239,204,218,0.6);
color: #4a4a4a; - #efccdaを40%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(239,204,218,0.4);
color: #4a4a4a; - #efccdaを20%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(239,204,218,0.2);
color: #4a4a4a; - #efccdaを白文字の影の色として表示する
- #efccdaの影に囲まれています
text-shadow: 2px 2px 3px #efccda;
background: black;
color: white; - #efccdaを80%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(239,204,218,0.8);
background: black;
color: white; - #efccdaを60%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(239,204,218,0.6);
background: black;
color: white; - #efccdaを40%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(239,204,218,0.4);
background: black;
color: white; - #efccdaを20%うすくした影に囲まれています
text-shadow: 2px 2px 3px rgba(239,204,218,0.2);
background: black;
color: white;