Serene Scene カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Serene Scene palette

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

Serene Scene カラー パレット PNG 画像

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

Serene Scene カラーパレット CSS

/* CSS */
.color-1 {
color: #b3c4d1;
}
.color-2 {
color: #6a8ea9;
}
.color-3 {
color: #a1d3e8;
}
.color-4 {
color: #ffb13d;
}
.color-5 {
color: #ff6e61;
}

/* CSS Variables */
:root {
--color-1: #b3c4d1;
 --color-2: #6a8ea9;
 --color-3: #a1d3e8;
 --color-4: #ffb13d;
 --color-5: #ff6e61;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #b3c4d1, #6a8ea9, #a1d3e8, #ffb13d, #ff6e61);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #b3c4d1, #6a8ea9, #a1d3e8, #ffb13d, #ff6e61);
}

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

Serene Scene color palette created on .