Sparta カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Sparta palette

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

Sparta カラー パレット PNG 画像

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

Sparta カラーパレット CSS

/* CSS */
.color-1 {
color: #a62b2b;
}
.color-2 {
color: #d2691e;
}
.color-3 {
color: #f4a662;
}
.color-4 {
color: #ffd900;
}
.color-5 {
color: #fff8db;
}

/* CSS Variables */
:root {
--color-1: #a62b2b;
 --color-2: #d2691e;
 --color-3: #f4a662;
 --color-4: #ffd900;
 --color-5: #fff8db;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #a62b2b, #d2691e, #f4a662, #ffd900, #fff8db);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #a62b2b, #d2691e, #f4a662, #ffd900, #fff8db);
}

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

Sparta color palette created on .