Grom カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Grom palette

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

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

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

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

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

Grom カラーパレット CSS

/* CSS */
.color-1 {
color: #e1c698;
}
.color-2 {
color: #b3a46b;
}
.color-3 {
color: #7e8656;
}
.color-4 {
color: #4a6d4c;
}
.color-5 {
color: #2f4b3a;
}

/* CSS Variables */
:root {
--color-1: #e1c698;
 --color-2: #b3a46b;
 --color-3: #7e8656;
 --color-4: #4a6d4c;
 --color-5: #2f4b3a;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #e1c698, #b3a46b, #7e8656, #4a6d4c, #2f4b3a);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #e1c698, #b3a46b, #7e8656, #4a6d4c, #2f4b3a);
}

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

Grom color palette created on .