Hippy カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Hippy palette

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

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

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

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

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

Hippy カラーパレット CSS

/* CSS */
.color-1 {
color: #ffc300;
}
.color-2 {
color: #ff5833;
}
.color-3 {
color: #c70038;
}
.color-4 {
color: #920c3f;
}
.color-5 {
color: #581845;
}

/* CSS Variables */
:root {
--color-1: #ffc300;
 --color-2: #ff5833;
 --color-3: #c70038;
 --color-4: #920c3f;
 --color-5: #581845;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ffc300, #ff5833, #c70038, #920c3f, #581845);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ffc300, #ff5833, #c70038, #920c3f, #581845);
}

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

Hippy color palette created on .