Evergreen Harbor カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Evergreen Harbor palette

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

Evergreen Harbor カラー パレット PNG 画像

Download evergreen harbor color palette PNG image (landscape)
Download evergreen harbor color palette PNG image (square)

Evergreen Harbor カラーパレット CSS

/* CSS */
.color-1 {
color: #4f7d7d;
}
.color-2 {
color: #6fbe9e;
}
.color-3 {
color: #98e6b6;
}
.color-4 {
color: #f3e1a0;
}
.color-5 {
color: #f0a800;
}

/* CSS Variables */
:root {
--color-1: #4f7d7d;
 --color-2: #6fbe9e;
 --color-3: #98e6b6;
 --color-4: #f3e1a0;
 --color-5: #f0a800;
 }

Evergreen Harbor の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #4f7d7d, #6fbe9e, #98e6b6, #f3e1a0, #f0a800);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #4f7d7d, #6fbe9e, #98e6b6, #f3e1a0, #f0a800);
}

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

Evergreen Harbor color palette created on .