Malibu カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Malibu palette

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

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

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

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

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

Malibu カラーパレット CSS

/* CSS */
.color-1 {
color: #0091eb;
}
.color-2 {
color: #00aeff;
}
.color-3 {
color: #80d9ff;
}
.color-4 {
color: #a8ffeb;
}
.color-5 {
color: #b0ff57;
}

/* CSS Variables */
:root {
--color-1: #0091eb;
 --color-2: #00aeff;
 --color-3: #80d9ff;
 --color-4: #a8ffeb;
 --color-5: #b0ff57;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #0091eb, #00aeff, #80d9ff, #a8ffeb, #b0ff57);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #0091eb, #00aeff, #80d9ff, #a8ffeb, #b0ff57);
}

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

Malibu color palette created on .