Ponyta カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Ponyta palette

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

Ponyta カラー パレット PNG 画像

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

Ponyta カラーパレット CSS

/* CSS */
.color-1 {
color: #ff9d00;
}
.color-2 {
color: #ffb84d;
}
.color-3 {
color: #ffcc80;
}
.color-4 {
color: #ffadad;
}
.color-5 {
color: #ff6e61;
}

/* CSS Variables */
:root {
--color-1: #ff9d00;
 --color-2: #ffb84d;
 --color-3: #ffcc80;
 --color-4: #ffadad;
 --color-5: #ff6e61;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ff9d00, #ffb84d, #ffcc80, #ffadad, #ff6e61);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ff9d00, #ffb84d, #ffcc80, #ffadad, #ff6e61);
}

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

Ponyta color palette created on .