Jasper Sunset カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Jasper Sunset palette

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

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

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

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

Download jasper sunset color palette PNG image (landscape)
Download jasper sunset color palette PNG image (square)

Jasper Sunset カラーパレット CSS

/* CSS */
.color-1 {
color: #cf5a3a;
}
.color-2 {
color: #d3b49c;
}
.color-3 {
color: #7a9b6f;
}
.color-4 {
color: #5e4b8b;
}
.color-5 {
color: #2f296a;
}

/* CSS Variables */
:root {
--color-1: #cf5a3a;
 --color-2: #d3b49c;
 --color-3: #7a9b6f;
 --color-4: #5e4b8b;
 --color-5: #2f296a;
 }

Jasper Sunset の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #cf5a3a, #d3b49c, #7a9b6f, #5e4b8b, #2f296a);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #cf5a3a, #d3b49c, #7a9b6f, #5e4b8b, #2f296a);
}

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

Jasper Sunset color palette created on .