Cottage Core カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Cottage Core palette

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

Cottage Core カラーパレット (PNG) をダウンロード

Download cottage core color palette PNG image (landscape)
Download cottage core color palette PNG image (square)

Cottage Core カラーパレット CSS

/* CSS */
.color-1 {
color: #b7c7a8;
}
.color-2 {
color: #e0d6c7;
}
.color-3 {
color: #f3e9d3;
}
.color-4 {
color: #f6b492;
}
.color-5 {
color: #eab8b8;
}

/* CSS Variables */
:root {
--color-1: #b7c7a8;
 --color-2: #e0d6c7;
 --color-3: #f3e9d3;
 --color-4: #f6b492;
 --color-5: #eab8b8;
 }

Cottage Core の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #b7c7a8, #e0d6c7, #f3e9d3, #f6b492, #eab8b8);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #b7c7a8, #e0d6c7, #f3e9d3, #f6b492, #eab8b8);
}

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

Cottage Core color palette created on .