Hourglass カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Hourglass palette

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

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

Download hourglass color palette PNG image (landscape)
Download hourglass color palette PNG image (square)

Hourglass カラーパレット CSS

/* CSS */
.color-1 {
color: #d3b58d;
}
.color-2 {
color: #f5deb2;
}
.color-3 {
color: #ffe3b3;
}
.color-4 {
color: #ffd900;
}
.color-5 {
color: #ff8c00;
}

/* CSS Variables */
:root {
--color-1: #d3b58d;
 --color-2: #f5deb2;
 --color-3: #ffe3b3;
 --color-4: #ffd900;
 --color-5: #ff8c00;
 }

Hourglass の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #d3b58d, #f5deb2, #ffe3b3, #ffd900, #ff8c00);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #d3b58d, #f5deb2, #ffe3b3, #ffd900, #ff8c00);
}

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

Hourglass color palette created on .