Sunlit Shores カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Sunlit Shores palette

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

Sunlit Shores カラー パレット PNG 画像

Download sunlit shores color palette PNG image (landscape)
Download sunlit shores color palette PNG image (square)

Sunlit Shores カラーパレット CSS

/* CSS */
.color-1 {
color: #f7e8cf;
}
.color-2 {
color: #f4cbae;
}
.color-3 {
color: #f1a88e;
}
.color-4 {
color: #e77d5f;
}
.color-5 {
color: #d9613f;
}

/* CSS Variables */
:root {
--color-1: #f7e8cf;
 --color-2: #f4cbae;
 --color-3: #f1a88e;
 --color-4: #e77d5f;
 --color-5: #d9613f;
 }

Sunlit Shores の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f7e8cf, #f4cbae, #f1a88e, #e77d5f, #d9613f);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f7e8cf, #f4cbae, #f1a88e, #e77d5f, #d9613f);
}

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

Sunlit Shores color palette created on .