Glass カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Glass palette

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

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

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

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

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

Glass カラーパレット CSS

/* CSS */
.color-1 {
color: #a6d2d3;
}
.color-2 {
color: #4c9d9e;
}
.color-3 {
color: #2c8081;
}
.color-4 {
color: #1f5c5c;
}
.color-5 {
color: #094b4e;
}

/* CSS Variables */
:root {
--color-1: #a6d2d3;
 --color-2: #4c9d9e;
 --color-3: #2c8081;
 --color-4: #1f5c5c;
 --color-5: #094b4e;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #a6d2d3, #4c9d9e, #2c8081, #1f5c5c, #094b4e);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #a6d2d3, #4c9d9e, #2c8081, #1f5c5c, #094b4e);
}

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

Glass color palette created on .