Chrome カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Chrome palette

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

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

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

Chrome カラーパレット CSS

/* CSS */
.color-1 {
color: #d1d1d1;
}
.color-2 {
color: #a3a3a3;
}
.color-3 {
color: #737373;
}
.color-4 {
color: #4d4d4d;
}
.color-5 {
color: #1c1c1c;
}

/* CSS Variables */
:root {
--color-1: #d1d1d1;
 --color-2: #a3a3a3;
 --color-3: #737373;
 --color-4: #4d4d4d;
 --color-5: #1c1c1c;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #d1d1d1, #a3a3a3, #737373, #4d4d4d, #1c1c1c);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #d1d1d1, #a3a3a3, #737373, #4d4d4d, #1c1c1c);
}

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

Chrome color palette created on .