Faelyn カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Faelyn palette

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

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

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

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

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

Faelyn カラーパレット CSS

/* CSS */
.color-1 {
color: #f1d3a2;
}
.color-2 {
color: #e9b6a0;
}
.color-3 {
color: #d69c94;
}
.color-4 {
color: #c67b8d;
}
.color-5 {
color: #b95f8e;
}

/* CSS Variables */
:root {
--color-1: #f1d3a2;
 --color-2: #e9b6a0;
 --color-3: #d69c94;
 --color-4: #c67b8d;
 --color-5: #b95f8e;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f1d3a2, #e9b6a0, #d69c94, #c67b8d, #b95f8e);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f1d3a2, #e9b6a0, #d69c94, #c67b8d, #b95f8e);
}

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

Faelyn color palette created on .