Buzzfeed カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Buzzfeed palette

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

Buzzfeed カラー パレット PNG 画像

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

Buzzfeed カラーパレット CSS

/* CSS */
.color-1 {
color: #ff3c00;
}
.color-2 {
color: #ff9100;
}
.color-3 {
color: #ffea00;
}
.color-4 {
color: #00c753;
}
.color-5 {
color: #00aeff;
}

/* CSS Variables */
:root {
--color-1: #ff3c00;
 --color-2: #ff9100;
 --color-3: #ffea00;
 --color-4: #00c753;
 --color-5: #00aeff;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ff3c00, #ff9100, #ffea00, #00c753, #00aeff);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ff3c00, #ff9100, #ffea00, #00c753, #00aeff);
}

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

Buzzfeed color palette created on .