Cosmo Sprout カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Cosmo Sprout palette

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

Cosmo Sprout カラー パレット PNG 画像

Download cosmo sprout color palette PNG image (landscape)
Download cosmo sprout color palette PNG image (square)

Cosmo Sprout カラーパレット CSS

/* CSS */
.color-1 {
color: #5f9b7c;
}
.color-2 {
color: #ade1d6;
}
.color-3 {
color: #f7d9a1;
}
.color-4 {
color: #f4a462;
}
.color-5 {
color: #c55959;
}

/* CSS Variables */
:root {
--color-1: #5f9b7c;
 --color-2: #ade1d6;
 --color-3: #f7d9a1;
 --color-4: #f4a462;
 --color-5: #c55959;
 }

Cosmo Sprout の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #5f9b7c, #ade1d6, #f7d9a1, #f4a462, #c55959);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #5f9b7c, #ade1d6, #f7d9a1, #f4a462, #c55959);
}

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

Cosmo Sprout color palette created on .