Oceans Melody カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Oceans Melody palette

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

Oceans Melody カラー パレット PNG 画像

Download oceans melody color palette PNG image (landscape)
Download oceans melody color palette PNG image (square)

Oceans Melody カラーパレット CSS

/* CSS */
.color-1 {
color: #0095c7;
}
.color-2 {
color: #00b2d6;
}
.color-3 {
color: #8fe1ef;
}
.color-4 {
color: #c9f0f8;
}
.color-5 {
color: #03045e;
}

/* CSS Variables */
:root {
--color-1: #0095c7;
 --color-2: #00b2d6;
 --color-3: #8fe1ef;
 --color-4: #c9f0f8;
 --color-5: #03045e;
 }

Oceans Melody の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #0095c7, #00b2d6, #8fe1ef, #c9f0f8, #03045e);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #0095c7, #00b2d6, #8fe1ef, #c9f0f8, #03045e);
}

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

Oceans Melody color palette created on .