Airy Breeze カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Airy Breeze palette

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

Airy Breeze カラー パレット PNG 画像

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

Airy Breeze カラーパレット CSS

/* CSS */
.color-1 {
color: #a3d5e0;
}
.color-2 {
color: #6dc3d5;
}
.color-3 {
color: #92d4e8;
}
.color-4 {
color: #f7b8a1;
}
.color-5 {
color: #f6d2b6;
}

/* CSS Variables */
:root {
--color-1: #a3d5e0;
 --color-2: #6dc3d5;
 --color-3: #92d4e8;
 --color-4: #f7b8a1;
 --color-5: #f6d2b6;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #a3d5e0, #6dc3d5, #92d4e8, #f7b8a1, #f6d2b6);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #a3d5e0, #6dc3d5, #92d4e8, #f7b8a1, #f6d2b6);
}

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

Airy Breeze color palette created on .