Malibu Blue カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Malibu Blue palette

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

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

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

Malibu Blue カラーパレット CSS

/* CSS */
.color-1 {
color: #7ec8f7;
}
.color-2 {
color: #4ab2e3;
}
.color-3 {
color: #2c8eb5;
}
.color-4 {
color: #f0a400;
}
.color-5 {
color: #f75c02;
}

/* CSS Variables */
:root {
--color-1: #7ec8f7;
 --color-2: #4ab2e3;
 --color-3: #2c8eb5;
 --color-4: #f0a400;
 --color-5: #f75c02;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #7ec8f7, #4ab2e3, #2c8eb5, #f0a400, #f75c02);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #7ec8f7, #4ab2e3, #2c8eb5, #f0a400, #f75c02);
}

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

Malibu Blue color palette created on .