Tropical Teal カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Tropical Teal palette

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

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

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

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

Download tropical teal color palette PNG image (landscape)
Download tropical teal color palette PNG image (square)

Tropical Teal カラーパレット CSS

/* CSS */
.color-1 {
color: #1d9a9a;
}
.color-2 {
color: #f3ca4f;
}
.color-3 {
color: #f68a1e;
}
.color-4 {
color: #e56b2e;
}
.color-5 {
color: #a14f8c;
}

/* CSS Variables */
:root {
--color-1: #1d9a9a;
 --color-2: #f3ca4f;
 --color-3: #f68a1e;
 --color-4: #e56b2e;
 --color-5: #a14f8c;
 }

Tropical Teal の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1d9a9a, #f3ca4f, #f68a1e, #e56b2e, #a14f8c);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1d9a9a, #f3ca4f, #f68a1e, #e56b2e, #a14f8c);
}

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

Tropical Teal color palette created on .