Habitorrabbit カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Habitorrabbit palette

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

Habitorrabbit カラー パレット PNG 画像

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

Habitorrabbit カラーパレット CSS

/* CSS */
.color-1 {
color: #f7c94b;
}
.color-2 {
color: #f0a800;
}
.color-3 {
color: #d68f00;
}
.color-4 {
color: #a86d00;
}
.color-5 {
color: #6b4d00;
}

/* CSS Variables */
:root {
--color-1: #f7c94b;
 --color-2: #f0a800;
 --color-3: #d68f00;
 --color-4: #a86d00;
 --color-5: #6b4d00;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f7c94b, #f0a800, #d68f00, #a86d00, #6b4d00);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f7c94b, #f0a800, #d68f00, #a86d00, #6b4d00);
}

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

Habitorrabbit color palette created on .