Rebel Twilight カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Rebel Twilight palette

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

Rebel Twilight カラー パレット PNG 画像

Download rebel twilight color palette PNG image (landscape)
Download rebel twilight color palette PNG image (square)

Rebel Twilight カラーパレット CSS

/* CSS */
.color-1 {
color: #1f2942;
}
.color-2 {
color: #3c4c77;
}
.color-3 {
color: #4d6e93;
}
.color-4 {
color: #7c9cbb;
}
.color-5 {
color: #c8d9e5;
}

/* CSS Variables */
:root {
--color-1: #1f2942;
 --color-2: #3c4c77;
 --color-3: #4d6e93;
 --color-4: #7c9cbb;
 --color-5: #c8d9e5;
 }

Rebel Twilight の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1f2942, #3c4c77, #4d6e93, #7c9cbb, #c8d9e5);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1f2942, #3c4c77, #4d6e93, #7c9cbb, #c8d9e5);
}

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

Rebel Twilight color palette created on .