Shell カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Shell palette

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

Shell カラー パレット PNG 画像

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

Shell カラーパレット CSS

/* CSS */
.color-1 {
color: #f8e7c4;
}
.color-2 {
color: #f3c9a0;
}
.color-3 {
color: #f9a65d;
}
.color-4 {
color: #f67d3c;
}
.color-5 {
color: #d35d27;
}

/* CSS Variables */
:root {
--color-1: #f8e7c4;
 --color-2: #f3c9a0;
 --color-3: #f9a65d;
 --color-4: #f67d3c;
 --color-5: #d35d27;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f8e7c4, #f3c9a0, #f9a65d, #f67d3c, #d35d27);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f8e7c4, #f3c9a0, #f9a65d, #f67d3c, #d35d27);
}

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

Shell color palette created on .