New Year's Day カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with New Year's Day palette

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

New Year's Day カラー パレット PNG 画像

Download new year's day color palette PNG image (landscape)
Download new year's day color palette PNG image (square)

New Year's Day カラーパレット CSS

/* CSS */
.color-1 {
color: #f3f7b1;
}
.color-2 {
color: #f7e7ab;
}
.color-3 {
color: #f3b78c;
}
.color-4 {
color: #f57b6b;
}
.color-5 {
color: #d93f5e;
}

/* CSS Variables */
:root {
--color-1: #f3f7b1;
 --color-2: #f7e7ab;
 --color-3: #f3b78c;
 --color-4: #f57b6b;
 --color-5: #d93f5e;
 }

New Year's Day の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f3f7b1, #f7e7ab, #f3b78c, #f57b6b, #d93f5e);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f3f7b1, #f7e7ab, #f3b78c, #f57b6b, #d93f5e);
}

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

New Year's Day color palette created on .