Neutral Sage カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Neutral Sage palette

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

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

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

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

Download neutral sage color palette PNG image (landscape)
Download neutral sage color palette PNG image (square)

Neutral Sage カラーパレット CSS

/* CSS */
.color-1 {
color: #b6c9a6;
}
.color-2 {
color: #a9b9a2;
}
.color-3 {
color: #9caa92;
}
.color-4 {
color: #e0d4c2;
}
.color-5 {
color: #c6b1a4;
}

/* CSS Variables */
:root {
--color-1: #b6c9a6;
 --color-2: #a9b9a2;
 --color-3: #9caa92;
 --color-4: #e0d4c2;
 --color-5: #c6b1a4;
 }

Neutral Sage の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #b6c9a6, #a9b9a2, #9caa92, #e0d4c2, #c6b1a4);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #b6c9a6, #a9b9a2, #9caa92, #e0d4c2, #c6b1a4);
}

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

Neutral Sage color palette created on .