Deep Waters カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Deep Waters palette

カラーインスピレーション

実際のデザインでこのカラーパレットを紹介する画像

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

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

Download deep waters color palette PNG image (landscape)
Download deep waters color palette PNG image (square)

Deep Waters カラーパレット CSS

/* CSS */
.color-1 {
color: #002d61;
}
.color-2 {
color: #a99666;
}
.color-3 {
color: #00306b;
}
.color-4 {
color: #002e66;
}
.color-5 {
color: #003066;
}

/* CSS Variables */
:root {
--color-1: #002d61;
 --color-2: #a99666;
 --color-3: #00306b;
 --color-4: #002e66;
 --color-5: #003066;
 }

Deep Waters の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #002d61, #a99666, #00306b, #002e66, #003066);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #002d61, #a99666, #00306b, #002e66, #003066);
}

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

Deep Waters color palette created on .