Sunshine Serenade カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Sunshine Serenade palette

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

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

Download sunshine serenade color palette PNG image (landscape)
Download sunshine serenade color palette PNG image (square)

Sunshine Serenade カラーパレット CSS

/* CSS */
.color-1 {
color: #f6e48e;
}
.color-2 {
color: #f9cb24;
}
.color-3 {
color: #ffb042;
}
.color-4 {
color: #ff9e42;
}
.color-5 {
color: #ff6b6b;
}

/* CSS Variables */
:root {
--color-1: #f6e48e;
 --color-2: #f9cb24;
 --color-3: #ffb042;
 --color-4: #ff9e42;
 --color-5: #ff6b6b;
 }

Sunshine Serenade の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f6e48e, #f9cb24, #ffb042, #ff9e42, #ff6b6b);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f6e48e, #f9cb24, #ffb042, #ff9e42, #ff6b6b);
}

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

Sunshine Serenade color palette created on .