Coastal Charm カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Coastal Charm palette

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

Coastal Charm カラー パレット PNG 画像

Download coastal charm color palette PNG image (landscape)
Download coastal charm color palette PNG image (square)

Coastal Charm カラーパレット CSS

/* CSS */
.color-1 {
color: #f5f5f5;
}
.color-2 {
color: #b1e2d5;
}
.color-3 {
color: #7f5c5c;
}
.color-4 {
color: #edc7a1;
}
.color-5 {
color: #f9d94e;
}

/* CSS Variables */
:root {
--color-1: #f5f5f5;
 --color-2: #b1e2d5;
 --color-3: #7f5c5c;
 --color-4: #edc7a1;
 --color-5: #f9d94e;
 }

Coastal Charm の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f5f5f5, #b1e2d5, #7f5c5c, #edc7a1, #f9d94e);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f5f5f5, #b1e2d5, #7f5c5c, #edc7a1, #f9d94e);
}

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

Coastal Charm color palette created on .