Japanese Serene Nature カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Japanese Serene Nature palette

カラーインスピレーション

実際のデザインでこのカラーパレットを紹介する画像

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

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

Download japanese serene nature color palette PNG image (landscape)
Download japanese serene nature color palette PNG image (square)

Japanese Serene Nature カラーパレット CSS

/* CSS */
.color-1 {
color: #a9c7b7;
}
.color-2 {
color: #f1e7d0;
}
.color-3 {
color: #ffe4b3;
}
.color-4 {
color: #f2b0a6;
}
.color-5 {
color: #e4b4d5;
}

/* CSS Variables */
:root {
--color-1: #a9c7b7;
 --color-2: #f1e7d0;
 --color-3: #ffe4b3;
 --color-4: #f2b0a6;
 --color-5: #e4b4d5;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #a9c7b7, #f1e7d0, #ffe4b3, #f2b0a6, #e4b4d5);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #a9c7b7, #f1e7d0, #ffe4b3, #f2b0a6, #e4b4d5);
}

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

Japanese Serene Nature color palette created on .