Serene Grayscale カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Serene Grayscale palette

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

Serene Grayscale カラーパレット (PNG) をダウンロード

Download serene grayscale color palette PNG image (landscape)
Download serene grayscale color palette PNG image (square)

Serene Grayscale カラーパレット CSS

/* CSS */
.color-1 {
color: #a6c9a6;
}
.color-2 {
color: #8c8c8c;
}
.color-3 {
color: #2e2e4d;
}
.color-4 {
color: #4c9a9a;
}
.color-5 {
color: #b8b8b8;
}

/* CSS Variables */
:root {
--color-1: #a6c9a6;
 --color-2: #8c8c8c;
 --color-3: #2e2e4d;
 --color-4: #4c9a9a;
 --color-5: #b8b8b8;
 }

Serene Grayscale の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #a6c9a6, #8c8c8c, #2e2e4d, #4c9a9a, #b8b8b8);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #a6c9a6, #8c8c8c, #2e2e4d, #4c9a9a, #b8b8b8);
}

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

Serene Grayscale color palette created on .