Sporty Coral カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Sporty Coral palette

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

Sporty Coral カラー パレット PNG 画像

Download sporty coral color palette PNG image (landscape)
Download sporty coral color palette PNG image (square)

Sporty Coral カラーパレット CSS

/* CSS */
.color-1 {
color: #ff6e61;
}
.color-2 {
color: #ffcb5c;
}
.color-3 {
color: #88d8b0;
}
.color-4 {
color: #4e9fa6;
}
.color-5 {
color: #2a7e62;
}

/* CSS Variables */
:root {
--color-1: #ff6e61;
 --color-2: #ffcb5c;
 --color-3: #88d8b0;
 --color-4: #4e9fa6;
 --color-5: #2a7e62;
 }

Sporty Coral の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ff6e61, #ffcb5c, #88d8b0, #4e9fa6, #2a7e62);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ff6e61, #ffcb5c, #88d8b0, #4e9fa6, #2a7e62);
}

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

Sporty Coral color palette created on .