Teto カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Teto palette

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

Teto カラー パレット PNG 画像

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

Teto カラーパレット CSS

/* CSS */
.color-1 {
color: #2e6385;
}
.color-2 {
color: #588fb6;
}
.color-3 {
color: #a1cbde;
}
.color-4 {
color: #f4d69f;
}
.color-5 {
color: #f56679;
}

/* CSS Variables */
:root {
--color-1: #2e6385;
 --color-2: #588fb6;
 --color-3: #a1cbde;
 --color-4: #f4d69f;
 --color-5: #f56679;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #2e6385, #588fb6, #a1cbde, #f4d69f, #f56679);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #2e6385, #588fb6, #a1cbde, #f4d69f, #f56679);
}

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

Teto color palette created on .