Sugar Peaches カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Sugar Peaches palette

カラーインスピレーション

実際のデザインでこのカラーパレットを紹介する画像

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

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

Download sugar peaches color palette PNG image (landscape)
Download sugar peaches color palette PNG image (square)

Sugar Peaches カラーパレット CSS

/* CSS */
.color-1 {
color: #fad8bd;
}
.color-2 {
color: #f8c9b9;
}
.color-3 {
color: #f8bab9;
}
.color-4 {
color: #f8b6a5;
}
.color-5 {
color: #f8ad9b;
}

/* CSS Variables */
:root {
--color-1: #fad8bd;
 --color-2: #f8c9b9;
 --color-3: #f8bab9;
 --color-4: #f8b6a5;
 --color-5: #f8ad9b;
 }

Sugar Peaches の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #fad8bd, #f8c9b9, #f8bab9, #f8b6a5, #f8ad9b);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #fad8bd, #f8c9b9, #f8bab9, #f8b6a5, #f8ad9b);
}

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

Sugar Peaches color palette created on .