Pineapple Kitty カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Pineapple Kitty palette

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

Pineapple Kitty カラー パレット PNG 画像

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

Pineapple Kitty カラーパレット CSS

/* CSS */
.color-1 {
color: #f6d12c;
}
.color-2 {
color: #f9b248;
}
.color-3 {
color: #f5a524;
}
.color-4 {
color: #d88b2c;
}
.color-5 {
color: #c86f3c;
}

/* CSS Variables */
:root {
--color-1: #f6d12c;
 --color-2: #f9b248;
 --color-3: #f5a524;
 --color-4: #d88b2c;
 --color-5: #c86f3c;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f6d12c, #f9b248, #f5a524, #d88b2c, #c86f3c);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f6d12c, #f9b248, #f5a524, #d88b2c, #c86f3c);
}

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

Pineapple Kitty color palette created on .