Floral Harmony カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Floral Harmony palette

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

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

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

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

Download floral harmony color palette PNG image (landscape)
Download floral harmony color palette PNG image (square)

Floral Harmony カラーパレット CSS

/* CSS */
.color-1 {
color: #f1a7c1;
}
.color-2 {
color: #f9d7ae;
}
.color-3 {
color: #d4b4e4;
}
.color-4 {
color: #a9e5b7;
}
.color-5 {
color: #a4c4d0;
}

/* CSS Variables */
:root {
--color-1: #f1a7c1;
 --color-2: #f9d7ae;
 --color-3: #d4b4e4;
 --color-4: #a9e5b7;
 --color-5: #a4c4d0;
 }

Floral Harmony の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f1a7c1, #f9d7ae, #d4b4e4, #a9e5b7, #a4c4d0);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f1a7c1, #f9d7ae, #d4b4e4, #a9e5b7, #a4c4d0);
}

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

Floral Harmony color palette created on .