Supernatural カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Supernatural palette

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

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

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

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

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

Supernatural カラーパレット CSS

/* CSS */
.color-1 {
color: #4b3c5d;
}
.color-2 {
color: #7f5b9a;
}
.color-3 {
color: #a76fae;
}
.color-4 {
color: #df9a6d;
}
.color-5 {
color: #f4c24e;
}

/* CSS Variables */
:root {
--color-1: #4b3c5d;
 --color-2: #7f5b9a;
 --color-3: #a76fae;
 --color-4: #df9a6d;
 --color-5: #f4c24e;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #4b3c5d, #7f5b9a, #a76fae, #df9a6d, #f4c24e);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #4b3c5d, #7f5b9a, #a76fae, #df9a6d, #f4c24e);
}

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

Supernatural color palette created on .