Sunrise Shore カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Sunrise Shore palette

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

Sunrise Shore カラー パレット PNG 画像

Download sunrise shore color palette PNG image (landscape)
Download sunrise shore color palette PNG image (square)

Sunrise Shore カラーパレット CSS

/* CSS */
.color-1 {
color: #f5d4b2;
}
.color-2 {
color: #f2e3e7;
}
.color-3 {
color: #a2c8c8;
}
.color-4 {
color: #d1a589;
}
.color-5 {
color: #e6b689;
}

/* CSS Variables */
:root {
--color-1: #f5d4b2;
 --color-2: #f2e3e7;
 --color-3: #a2c8c8;
 --color-4: #d1a589;
 --color-5: #e6b689;
 }

Sunrise Shore の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f5d4b2, #f2e3e7, #a2c8c8, #d1a589, #e6b689);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f5d4b2, #f2e3e7, #a2c8c8, #d1a589, #e6b689);
}

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

Sunrise Shore color palette created on .