Sunbeam Lotus カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Sunbeam Lotus palette

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

Sunbeam Lotus カラー パレット PNG 画像

Download sunbeam lotus color palette PNG image (landscape)
Download sunbeam lotus color palette PNG image (square)

Sunbeam Lotus カラーパレット CSS

/* CSS */
.color-1 {
color: #f7c750;
}
.color-2 {
color: #f5a300;
}
.color-3 {
color: #e69d00;
}
.color-4 {
color: #c27800;
}
.color-5 {
color: #8f5d00;
}

/* CSS Variables */
:root {
--color-1: #f7c750;
 --color-2: #f5a300;
 --color-3: #e69d00;
 --color-4: #c27800;
 --color-5: #8f5d00;
 }

Sunbeam Lotus の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f7c750, #f5a300, #e69d00, #c27800, #8f5d00);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f7c750, #f5a300, #e69d00, #c27800, #8f5d00);
}

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

Sunbeam Lotus color palette created on .