Summer Vibes カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Summer Vibes palette

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

Summer Vibes カラー パレット PNG 画像

Download summer vibes color palette PNG image (landscape)
Download summer vibes color palette PNG image (square)

Summer Vibes カラーパレット CSS

/* CSS */
.color-1 {
color: #00b3a1;
}
.color-2 {
color: #ff6d1f;
}
.color-3 {
color: #ff9f1a;
}
.color-4 {
color: #ffcc00;
}
.color-5 {
color: #ff2e62;
}

/* CSS Variables */
:root {
--color-1: #00b3a1;
 --color-2: #ff6d1f;
 --color-3: #ff9f1a;
 --color-4: #ffcc00;
 --color-5: #ff2e62;
 }

Summer Vibes の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #00b3a1, #ff6d1f, #ff9f1a, #ffcc00, #ff2e62);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #00b3a1, #ff6d1f, #ff9f1a, #ffcc00, #ff2e62);
}

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

Summer Vibes color palette created on .