Sage Green Serenity カラーパレット
明るさ
彩度
暖かさ
UI Examples
Explore beautiful UI components with Sage Green Serenity palette
カラーインスピレーション
実際のデザインでこのカラーパレットを紹介する画像
Sage Green Serenity カラーパレット (PNG) をダウンロード
Sage Green Serenity カラーパレット CSS
/* CSS */
.color-1 {
color: #a9cbb8;
}
.color-2 {
color: #b6d8b0;
}
.color-3 {
color: #d0e4c4;
}
.color-4 {
color: #e5f1da;
}
.color-5 {
color: #f3f8e2;
}
/* CSS Variables */
:root {
--color-1: #a9cbb8;
--color-2: #b6d8b0;
--color-3: #d0e4c4;
--color-4: #e5f1da;
--color-5: #f3f8e2;
}
Sage Green Serenity の背景のグラデーション CSS
/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #a9cbb8, #b6d8b0, #d0e4c4, #e5f1da, #f3f8e2);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #a9cbb8, #b6d8b0, #d0e4c4, #e5f1da, #f3f8e2);
}
似たようなカラーパレット
Sage Green Serenity color palette created on .