Cooper カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Cooper palette

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

Cooper カラー パレット PNG 画像

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

Cooper カラーパレット CSS

/* CSS */
.color-1 {
color: #895b29;
}
.color-2 {
color: #c78a4d;
}
.color-3 {
color: #f6c8a7;
}
.color-4 {
color: #e9a06d;
}
.color-5 {
color: #d85c41;
}

/* CSS Variables */
:root {
--color-1: #895b29;
 --color-2: #c78a4d;
 --color-3: #f6c8a7;
 --color-4: #e9a06d;
 --color-5: #d85c41;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #895b29, #c78a4d, #f6c8a7, #e9a06d, #d85c41);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #895b29, #c78a4d, #f6c8a7, #e9a06d, #d85c41);
}

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

Cooper color palette created on .