Tokyo カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Tokyo palette

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

Tokyo カラー パレット PNG 画像

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

Tokyo カラーパレット CSS

/* CSS */
.color-1 {
color: #f0a800;
}
.color-2 {
color: #e06900;
}
.color-3 {
color: #d0536e;
}
.color-4 {
color: #a14f85;
}
.color-5 {
color: #6e9da6;
}

/* CSS Variables */
:root {
--color-1: #f0a800;
 --color-2: #e06900;
 --color-3: #d0536e;
 --color-4: #a14f85;
 --color-5: #6e9da6;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f0a800, #e06900, #d0536e, #a14f85, #6e9da6);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f0a800, #e06900, #d0536e, #a14f85, #6e9da6);
}

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

Tokyo color palette created on .