Plane カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Plane palette

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

Plane カラー パレット PNG 画像

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

Plane カラーパレット CSS

/* CSS */
.color-1 {
color: #5abf9d;
}
.color-2 {
color: #a3e0d5;
}
.color-3 {
color: #f2f6e9;
}
.color-4 {
color: #f9d9a9;
}
.color-5 {
color: #f76e6e;
}

/* CSS Variables */
:root {
--color-1: #5abf9d;
 --color-2: #a3e0d5;
 --color-3: #f2f6e9;
 --color-4: #f9d9a9;
 --color-5: #f76e6e;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #5abf9d, #a3e0d5, #f2f6e9, #f9d9a9, #f76e6e);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #5abf9d, #a3e0d5, #f2f6e9, #f9d9a9, #f76e6e);
}

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

Plane color palette created on .