Peppa Pig カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Peppa Pig palette

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

Peppa Pig カラーパレット (PNG) をダウンロード

Download peppa pig color palette PNG image (landscape)
Download peppa pig color palette PNG image (square)

Peppa Pig カラーパレット CSS

/* CSS */
.color-1 {
color: #ff6e61;
}
.color-2 {
color: #ff9f80;
}
.color-3 {
color: #ffb6a3;
}
.color-4 {
color: #c4e3f3;
}
.color-5 {
color: #6b9cd1;
}

/* CSS Variables */
:root {
--color-1: #ff6e61;
 --color-2: #ff9f80;
 --color-3: #ffb6a3;
 --color-4: #c4e3f3;
 --color-5: #6b9cd1;
 }

Peppa Pig の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ff6e61, #ff9f80, #ffb6a3, #c4e3f3, #6b9cd1);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ff6e61, #ff9f80, #ffb6a3, #c4e3f3, #6b9cd1);
}

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

Peppa Pig color palette created on .