Dynamic Trio カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Dynamic Trio palette

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

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

Download dynamic trio color palette PNG image (landscape)
Download dynamic trio color palette PNG image (square)

Dynamic Trio カラーパレット CSS

/* CSS */
.color-1 {
color: #1f7c8e;
}
.color-2 {
color: #2cb5a2;
}
.color-3 {
color: #4dd5d1;
}
.color-4 {
color: #86e4e3;
}
.color-5 {
color: #ff6e61;
}

/* CSS Variables */
:root {
--color-1: #1f7c8e;
 --color-2: #2cb5a2;
 --color-3: #4dd5d1;
 --color-4: #86e4e3;
 --color-5: #ff6e61;
 }

Dynamic Trio の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1f7c8e, #2cb5a2, #4dd5d1, #86e4e3, #ff6e61);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1f7c8e, #2cb5a2, #4dd5d1, #86e4e3, #ff6e61);
}

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

Dynamic Trio color palette created on .