Scarlet Scorpion カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Scarlet Scorpion palette

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

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

Download scarlet scorpion color palette PNG image (landscape)
Download scarlet scorpion color palette PNG image (square)

Scarlet Scorpion カラーパレット CSS

/* CSS */
.color-1 {
color: #9d1b33;
}
.color-2 {
color: #d94f3a;
}
.color-3 {
color: #fab700;
}
.color-4 {
color: #f6e1b6;
}
.color-5 {
color: #3b7d8c;
}

/* CSS Variables */
:root {
--color-1: #9d1b33;
 --color-2: #d94f3a;
 --color-3: #fab700;
 --color-4: #f6e1b6;
 --color-5: #3b7d8c;
 }

Scarlet Scorpion の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #9d1b33, #d94f3a, #fab700, #f6e1b6, #3b7d8c);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #9d1b33, #d94f3a, #fab700, #f6e1b6, #3b7d8c);
}

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

Scarlet Scorpion color palette created on .