Grunge Wave カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Grunge Wave palette

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

Grunge Wave カラー パレット PNG 画像

Download grunge wave color palette PNG image (landscape)
Download grunge wave color palette PNG image (square)

Grunge Wave カラーパレット CSS

/* CSS */
.color-1 {
color: #1c3f73;
}
.color-2 {
color: #4b5d8b;
}
.color-3 {
color: #7b8ba3;
}
.color-4 {
color: #b9c6df;
}
.color-5 {
color: #ff6e61;
}

/* CSS Variables */
:root {
--color-1: #1c3f73;
 --color-2: #4b5d8b;
 --color-3: #7b8ba3;
 --color-4: #b9c6df;
 --color-5: #ff6e61;
 }

Grunge Wave の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1c3f73, #4b5d8b, #7b8ba3, #b9c6df, #ff6e61);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1c3f73, #4b5d8b, #7b8ba3, #b9c6df, #ff6e61);
}

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

Grunge Wave color palette created on .