Japanese City Pop カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Japanese City Pop palette

カラーインスピレーション

実際のデザインでこのカラーパレットを紹介する画像

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

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

Download japanese city pop color palette PNG image (landscape)
Download japanese city pop color palette PNG image (square)

Japanese City Pop カラーパレット CSS

/* CSS */
.color-1 {
color: #ff7142;
}
.color-2 {
color: #ffb84d;
}
.color-3 {
color: #ffd54d;
}
.color-4 {
color: #50c2f7;
}
.color-5 {
color: #b59edb;
}

/* CSS Variables */
:root {
--color-1: #ff7142;
 --color-2: #ffb84d;
 --color-3: #ffd54d;
 --color-4: #50c2f7;
 --color-5: #b59edb;
 }

Japanese City Pop の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ff7142, #ffb84d, #ffd54d, #50c2f7, #b59edb);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ff7142, #ffb84d, #ffd54d, #50c2f7, #b59edb);
}

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

Japanese City Pop color palette created on .