Loading...

Orange Bucket カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Orange Bucket palette

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

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

Download orange bucket color palette PNG image (landscape)
Download orange bucket color palette PNG image (square)

Orange Bucket カラーパレット CSS

/* CSS */
.color-1 {
color: #ff8c00;
}
.color-2 {
color: #ffb84d;
}
.color-3 {
color: #ffda85;
}
.color-4 {
color: #ffe3b3;
}
.color-5 {
color: #ffffff;
}

/* CSS Variables */
:root {
--color-1: #ff8c00;
 --color-2: #ffb84d;
 --color-3: #ffda85;
 --color-4: #ffe3b3;
 --color-5: #ffffff;
 }

Orange Bucket の背景のグラデーション CSS

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

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

Orange Bucket color palette created on .