Hypno カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Hypno palette

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

Hypno カラー パレット PNG 画像

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

Hypno カラーパレット CSS

/* CSS */
.color-1 {
color: #690dab;
}
.color-2 {
color: #8d1c8d;
}
.color-3 {
color: #da1b61;
}
.color-4 {
color: #ff6e00;
}
.color-5 {
color: #ffd900;
}

/* CSS Variables */
:root {
--color-1: #690dab;
 --color-2: #8d1c8d;
 --color-3: #da1b61;
 --color-4: #ff6e00;
 --color-5: #ffd900;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #690dab, #8d1c8d, #da1b61, #ff6e00, #ffd900);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #690dab, #8d1c8d, #da1b61, #ff6e00, #ffd900);
}

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

Hypno color palette created on .