Shell Candy カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Shell Candy palette

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

Shell Candy カラー パレット PNG 画像

Download shell candy color palette PNG image (landscape)
Download shell candy color palette PNG image (square)

Shell Candy カラーパレット CSS

/* CSS */
.color-1 {
color: #f8c3a0;
}
.color-2 {
color: #f8b2a0;
}
.color-3 {
color: #f6a7c1;
}
.color-4 {
color: #d6a4e0;
}
.color-5 {
color: #a7d8e7;
}

/* CSS Variables */
:root {
--color-1: #f8c3a0;
 --color-2: #f8b2a0;
 --color-3: #f6a7c1;
 --color-4: #d6a4e0;
 --color-5: #a7d8e7;
 }

Shell Candy の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f8c3a0, #f8b2a0, #f6a7c1, #d6a4e0, #a7d8e7);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f8c3a0, #f8b2a0, #f6a7c1, #d6a4e0, #a7d8e7);
}

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

Shell Candy color palette created on .