Dandy カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Dandy palette

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

Dandy カラー パレット PNG 画像

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

Dandy カラーパレット CSS

/* CSS */
.color-1 {
color: #f5c400;
}
.color-2 {
color: #f5b800;
}
.color-3 {
color: #f5a524;
}
.color-4 {
color: #f59f00;
}
.color-5 {
color: #f47b1f;
}

/* CSS Variables */
:root {
--color-1: #f5c400;
 --color-2: #f5b800;
 --color-3: #f5a524;
 --color-4: #f59f00;
 --color-5: #f47b1f;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f5c400, #f5b800, #f5a524, #f59f00, #f47b1f);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f5c400, #f5b800, #f5a524, #f59f00, #f47b1f);
}

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

Dandy color palette created on .