Diamond カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Diamond palette

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

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

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

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

Download diamond color palette PNG image (landscape)
Download diamond color palette PNG image (square)

Diamond カラーパレット CSS

/* CSS */
.color-1 {
color: #b9dae9;
}
.color-2 {
color: #a5c6d5;
}
.color-3 {
color: #7ca2b1;
}
.color-4 {
color: #4f7f8c;
}
.color-5 {
color: #2d5b67;
}

/* CSS Variables */
:root {
--color-1: #b9dae9;
 --color-2: #a5c6d5;
 --color-3: #7ca2b1;
 --color-4: #4f7f8c;
 --color-5: #2d5b67;
 }

Diamond の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #b9dae9, #a5c6d5, #7ca2b1, #4f7f8c, #2d5b67);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #b9dae9, #a5c6d5, #7ca2b1, #4f7f8c, #2d5b67);
}

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

Diamond color palette created on .