Seaside Bliss カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Seaside Bliss palette

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

Seaside Bliss カラー パレット PNG 画像

Download seaside bliss color palette PNG image (landscape)
Download seaside bliss color palette PNG image (square)

Seaside Bliss カラーパレット CSS

/* CSS */
.color-1 {
color: #f1a8a2;
}
.color-2 {
color: #f9c5a9;
}
.color-3 {
color: #f4e2c3;
}
.color-4 {
color: #b1dff2;
}
.color-5 {
color: #7bc2e5;
}

/* CSS Variables */
:root {
--color-1: #f1a8a2;
 --color-2: #f9c5a9;
 --color-3: #f4e2c3;
 --color-4: #b1dff2;
 --color-5: #7bc2e5;
 }

Seaside Bliss の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f1a8a2, #f9c5a9, #f4e2c3, #b1dff2, #7bc2e5);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f1a8a2, #f9c5a9, #f4e2c3, #b1dff2, #7bc2e5);
}

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

Seaside Bliss color palette created on .