Body カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Body palette

このパレットを共有する先：

Body カラー パレット PNG 画像

Download body color palette PNG image (landscape)
Download body color palette PNG image (square)

Body カラーパレット CSS

/* CSS */
.color-1 {
color: #d7c1d7;
}
.color-2 {
color: #f4e7f4;
}
.color-3 {
color: #f9b4d2;
}
.color-4 {
color: #ff6e61;
}
.color-5 {
color: #ff9d5c;
}

/* CSS Variables */
:root {
--color-1: #d7c1d7;
 --color-2: #f4e7f4;
 --color-3: #f9b4d2;
 --color-4: #ff6e61;
 --color-5: #ff9d5c;
 }

Body の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #d7c1d7, #f4e7f4, #f9b4d2, #ff6e61, #ff9d5c);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #d7c1d7, #f4e7f4, #f9b4d2, #ff6e61, #ff9d5c);
}

似たようなカラーパレット

Body color palette created on .