Indie Vibes カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Indie Vibes palette

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

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

Download indie vibes color palette PNG image (landscape)
Download indie vibes color palette PNG image (square)

Indie Vibes カラーパレット CSS

/* CSS */
.color-1 {
color: #0f161f;
}
.color-2 {
color: #293466;
}
.color-3 {
color: #655c93;
}
.color-4 {
color: #c48e31;
}
.color-5 {
color: #d0394f;
}

/* CSS Variables */
:root {
--color-1: #0f161f;
 --color-2: #293466;
 --color-3: #655c93;
 --color-4: #c48e31;
 --color-5: #d0394f;
 }

Indie Vibes の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #0f161f, #293466, #655c93, #c48e31, #d0394f);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #0f161f, #293466, #655c93, #c48e31, #d0394f);
}

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

Indie Vibes color palette created on .