Blossom Breeze カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Blossom Breeze palette

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

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

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

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

Download blossom breeze color palette PNG image (landscape)
Download blossom breeze color palette PNG image (square)

Blossom Breeze カラーパレット CSS

/* CSS */
.color-1 {
color: #f97bb2;
}
.color-2 {
color: #fad1dc;
}
.color-3 {
color: #f1b1c5;
}
.color-4 {
color: #f1e4ea;
}
.color-5 {
color: #f5bccf;
}

/* CSS Variables */
:root {
--color-1: #f97bb2;
 --color-2: #fad1dc;
 --color-3: #f1b1c5;
 --color-4: #f1e4ea;
 --color-5: #f5bccf;
 }

Blossom Breeze の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f97bb2, #fad1dc, #f1b1c5, #f1e4ea, #f5bccf);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f97bb2, #fad1dc, #f1b1c5, #f1e4ea, #f5bccf);
}

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

Blossom Breeze color palette created on .