Petrichor カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Petrichor palette

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

Petrichor カラー パレット PNG 画像

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

Petrichor カラーパレット CSS

/* CSS */
.color-1 {
color: #e1eed8;
}
.color-2 {
color: #ebf2e8;
}
.color-3 {
color: #fcfbf3;
}
.color-4 {
color: #fcf5cf;
}
.color-5 {
color: #f5d8ad;
}

/* CSS Variables */
:root {
--color-1: #e1eed8;
 --color-2: #ebf2e8;
 --color-3: #fcfbf3;
 --color-4: #fcf5cf;
 --color-5: #f5d8ad;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #e1eed8, #ebf2e8, #fcfbf3, #fcf5cf, #f5d8ad);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #e1eed8, #ebf2e8, #fcfbf3, #fcf5cf, #f5d8ad);
}

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

Petrichor color palette created on .