Abyssal Purple カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Abyssal Purple palette

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

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

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

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

Download abyssal purple color palette PNG image (landscape)
Download abyssal purple color palette PNG image (square)

Abyssal Purple カラーパレット CSS

/* CSS */
.color-1 {
color: #4b2d7b;
}
.color-2 {
color: #6f4b8b;
}
.color-3 {
color: #9f6ea0;
}
.color-4 {
color: #d7a3d0;
}
.color-5 {
color: #f4e4f6;
}

/* CSS Variables */
:root {
--color-1: #4b2d7b;
 --color-2: #6f4b8b;
 --color-3: #9f6ea0;
 --color-4: #d7a3d0;
 --color-5: #f4e4f6;
 }

Abyssal Purple の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #4b2d7b, #6f4b8b, #9f6ea0, #d7a3d0, #f4e4f6);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #4b2d7b, #6f4b8b, #9f6ea0, #d7a3d0, #f4e4f6);
}

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

Abyssal Purple color palette created on .