Hombre カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Hombre palette

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

Hombre カラー パレット PNG 画像

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

Hombre カラーパレット CSS

/* CSS */
.color-1 {
color: #96a9ca;
}
.color-2 {
color: #a8c2d6;
}
.color-3 {
color: #c4dce4;
}
.color-4 {
color: #dbf0db;
}
.color-5 {
color: #fbf7ef;
}

/* CSS Variables */
:root {
--color-1: #96a9ca;
 --color-2: #a8c2d6;
 --color-3: #c4dce4;
 --color-4: #dbf0db;
 --color-5: #fbf7ef;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #96a9ca, #a8c2d6, #c4dce4, #dbf0db, #fbf7ef);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #96a9ca, #a8c2d6, #c4dce4, #dbf0db, #fbf7ef);
}

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

Hombre color palette created on .