Felicity カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Felicity palette

カラーインスピレーション

実際のデザインでこのカラーパレットを紹介する画像

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

Felicity カラーパレット (PNG) をダウンロード

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

Felicity カラーパレット CSS

/* CSS */
.color-1 {
color: #ff9900;
}
.color-2 {
color: #ffb300;
}
.color-3 {
color: #ffd500;
}
.color-4 {
color: #ffea00;
}
.color-5 {
color: #fff700;
}

/* CSS Variables */
:root {
--color-1: #ff9900;
 --color-2: #ffb300;
 --color-3: #ffd500;
 --color-4: #ffea00;
 --color-5: #fff700;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ff9900, #ffb300, #ffd500, #ffea00, #fff700);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ff9900, #ffb300, #ffd500, #ffea00, #fff700);
}

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

Felicity color palette created on .