Orange Sport カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Orange Sport palette

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

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

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

Orange Sport カラーパレット CSS

/* CSS */
.color-1 {
color: #ff6d1f;
}
.color-2 {
color: #ffb05c;
}
.color-3 {
color: #ffe1a8;
}
.color-4 {
color: #a1d6e2;
}
.color-5 {
color: #2b3d50;
}

/* CSS Variables */
:root {
--color-1: #ff6d1f;
 --color-2: #ffb05c;
 --color-3: #ffe1a8;
 --color-4: #a1d6e2;
 --color-5: #2b3d50;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ff6d1f, #ffb05c, #ffe1a8, #a1d6e2, #2b3d50);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ff6d1f, #ffb05c, #ffe1a8, #a1d6e2, #2b3d50);
}

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

Orange Sport color palette created on .