Retro Orange カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Retro Orange palette

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

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

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

Retro Orange カラーパレット CSS

/* CSS */
.color-1 {
color: #ff6e00;
}
.color-2 {
color: #ffb300;
}
.color-3 {
color: #ffcc80;
}
.color-4 {
color: #ffec3d;
}
.color-5 {
color: #fffde5;
}

/* CSS Variables */
:root {
--color-1: #ff6e00;
 --color-2: #ffb300;
 --color-3: #ffcc80;
 --color-4: #ffec3d;
 --color-5: #fffde5;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ff6e00, #ffb300, #ffcc80, #ffec3d, #fffde5);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ff6e00, #ffb300, #ffcc80, #ffec3d, #fffde5);
}

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

Retro Orange color palette created on .