Ocean Armoni カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Ocean Armoni palette

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

Ocean Armoni カラー パレット PNG 画像

Download ocean armoni color palette PNG image (landscape)
Download ocean armoni color palette PNG image (square)

Ocean Armoni カラーパレット CSS

/* CSS */
.color-1 {
color: #0095c7;
}
.color-2 {
color: #00b0e0;
}
.color-3 {
color: #29d4e0;
}
.color-4 {
color: #4fe3d7;
}
.color-5 {
color: #91edd6;
}

/* CSS Variables */
:root {
--color-1: #0095c7;
 --color-2: #00b0e0;
 --color-3: #29d4e0;
 --color-4: #4fe3d7;
 --color-5: #91edd6;
 }

Ocean Armoni の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #0095c7, #00b0e0, #29d4e0, #4fe3d7, #91edd6);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #0095c7, #00b0e0, #29d4e0, #4fe3d7, #91edd6);
}

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

Ocean Armoni color palette created on .