Blue Beach カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Blue Beach palette

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

Blue Beach カラー パレット PNG 画像

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

Blue Beach カラーパレット CSS

/* CSS */
.color-1 {
color: #41a0d8;
}
.color-2 {
color: #3bbbc9;
}
.color-3 {
color: #7cbbae;
}
.color-4 {
color: #a6cb95;
}
.color-5 {
color: #d3e2b1;
}

/* CSS Variables */
:root {
--color-1: #41a0d8;
 --color-2: #3bbbc9;
 --color-3: #7cbbae;
 --color-4: #a6cb95;
 --color-5: #d3e2b1;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #41a0d8, #3bbbc9, #7cbbae, #a6cb95, #d3e2b1);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #41a0d8, #3bbbc9, #7cbbae, #a6cb95, #d3e2b1);
}

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

Blue Beach color palette created on .