Gustavo カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Gustavo palette

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

Gustavo カラー パレット PNG 画像

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

Gustavo カラーパレット CSS

/* CSS */
.color-1 {
color: #fcce4f;
}
.color-2 {
color: #fcdb5a;
}
.color-3 {
color: #fce8b6;
}
.color-4 {
color: #fbbea2;
}
.color-5 {
color: #fbafa2;
}

/* CSS Variables */
:root {
--color-1: #fcce4f;
 --color-2: #fcdb5a;
 --color-3: #fce8b6;
 --color-4: #fbbea2;
 --color-5: #fbafa2;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #fcce4f, #fcdb5a, #fce8b6, #fbbea2, #fbafa2);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #fcce4f, #fcdb5a, #fce8b6, #fbbea2, #fbafa2);
}

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

Gustavo color palette created on .