Blue Bay カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Blue Bay palette

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

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

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

Blue Bay カラーパレット CSS

/* CSS */
.color-1 {
color: #5c6c93;
}
.color-2 {
color: #8d9db4;
}
.color-3 {
color: #b7c6d2;
}
.color-4 {
color: #f1c1b6;
}
.color-5 {
color: #e76c6a;
}

/* CSS Variables */
:root {
--color-1: #5c6c93;
 --color-2: #8d9db4;
 --color-3: #b7c6d2;
 --color-4: #f1c1b6;
 --color-5: #e76c6a;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #5c6c93, #8d9db4, #b7c6d2, #f1c1b6, #e76c6a);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #5c6c93, #8d9db4, #b7c6d2, #f1c1b6, #e76c6a);
}

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

Blue Bay color palette created on .