The Grinch カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with The Grinch palette

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

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

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

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

Download the grinch color palette PNG image (landscape)
Download the grinch color palette PNG image (square)

The Grinch カラーパレット CSS

/* CSS */
.color-1 {
color: #6b8f24;
}
.color-2 {
color: #a9d65c;
}
.color-3 {
color: #ffe5a3;
}
.color-4 {
color: #ff6e61;
}
.color-5 {
color: #c92c3c;
}

/* CSS Variables */
:root {
--color-1: #6b8f24;
 --color-2: #a9d65c;
 --color-3: #ffe5a3;
 --color-4: #ff6e61;
 --color-5: #c92c3c;
 }

The Grinch の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #6b8f24, #a9d65c, #ffe5a3, #ff6e61, #c92c3c);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #6b8f24, #a9d65c, #ffe5a3, #ff6e61, #c92c3c);
}

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

The Grinch color palette created on .