Jayfeather カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Jayfeather palette

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

Jayfeather カラー パレット PNG 画像

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

Jayfeather カラーパレット CSS

/* CSS */
.color-1 {
color: #a3c7e0;
}
.color-2 {
color: #71a4c6;
}
.color-3 {
color: #4c7d9a;
}
.color-4 {
color: #b3d5c7;
}
.color-5 {
color: #d8e4af;
}

/* CSS Variables */
:root {
--color-1: #a3c7e0;
 --color-2: #71a4c6;
 --color-3: #4c7d9a;
 --color-4: #b3d5c7;
 --color-5: #d8e4af;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #a3c7e0, #71a4c6, #4c7d9a, #b3d5c7, #d8e4af);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #a3c7e0, #71a4c6, #4c7d9a, #b3d5c7, #d8e4af);
}

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

Jayfeather color palette created on .