Oren カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Oren palette

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

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

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

Oren カラーパレット CSS

/* CSS */
.color-1 {
color: #ff6d1f;
}
.color-2 {
color: #ff9d4d;
}
.color-3 {
color: #ffbd7a;
}
.color-4 {
color: #ffe5a3;
}
.color-5 {
color: #ffd5c2;
}

/* CSS Variables */
:root {
--color-1: #ff6d1f;
 --color-2: #ff9d4d;
 --color-3: #ffbd7a;
 --color-4: #ffe5a3;
 --color-5: #ffd5c2;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ff6d1f, #ff9d4d, #ffbd7a, #ffe5a3, #ffd5c2);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ff6d1f, #ff9d4d, #ffbd7a, #ffe5a3, #ffd5c2);
}

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

Oren color palette created on .