Yellow Pineapple カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Yellow Pineapple palette

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

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

Download yellow pineapple color palette PNG image (landscape)
Download yellow pineapple color palette PNG image (square)

Yellow Pineapple カラーパレット CSS

/* CSS */
.color-1 {
color: #f8e6aa;
}
.color-2 {
color: #f9c54e;
}
.color-3 {
color: #f9b248;
}
.color-4 {
color: #f9a12f;
}
.color-5 {
color: #f7b1a1;
}

/* CSS Variables */
:root {
--color-1: #f8e6aa;
 --color-2: #f9c54e;
 --color-3: #f9b248;
 --color-4: #f9a12f;
 --color-5: #f7b1a1;
 }

Yellow Pineapple の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f8e6aa, #f9c54e, #f9b248, #f9a12f, #f7b1a1);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f8e6aa, #f9c54e, #f9b248, #f9a12f, #f7b1a1);
}

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

Yellow Pineapple color palette created on .