Tatami Shoji カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Tatami Shoji palette

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

Tatami Shoji カラー パレット PNG 画像

Download tatami shoji color palette PNG image (landscape)
Download tatami shoji color palette PNG image (square)

Tatami Shoji カラーパレット CSS

/* CSS */
.color-1 {
color: #c2b180;
}
.color-2 {
color: #a68a59;
}
.color-3 {
color: #d7c3a7;
}
.color-4 {
color: #e7e1c5;
}
.color-5 {
color: #f5f0d6;
}

/* CSS Variables */
:root {
--color-1: #c2b180;
 --color-2: #a68a59;
 --color-3: #d7c3a7;
 --color-4: #e7e1c5;
 --color-5: #f5f0d6;
 }

Tatami Shoji の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #c2b180, #a68a59, #d7c3a7, #e7e1c5, #f5f0d6);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #c2b180, #a68a59, #d7c3a7, #e7e1c5, #f5f0d6);
}

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

Tatami Shoji color palette created on .