Oceanic Luminance カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Oceanic Luminance palette

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

Oceanic Luminance カラー パレット PNG 画像

Download oceanic luminance color palette PNG image (landscape)
Download oceanic luminance color palette PNG image (square)

Oceanic Luminance カラーパレット CSS

/* CSS */
.color-1 {
color: #294370;
}
.color-2 {
color: #416a9f;
}
.color-3 {
color: #71aad1;
}
.color-4 {
color: #8fcfe0;
}
.color-5 {
color: #cbdcec;
}

/* CSS Variables */
:root {
--color-1: #294370;
 --color-2: #416a9f;
 --color-3: #71aad1;
 --color-4: #8fcfe0;
 --color-5: #cbdcec;
 }

Oceanic Luminance の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #294370, #416a9f, #71aad1, #8fcfe0, #cbdcec);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #294370, #416a9f, #71aad1, #8fcfe0, #cbdcec);
}

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

Oceanic Luminance color palette created on .