Circe カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Circe palette

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

Circe カラー パレット PNG 画像

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

Circe カラーパレット CSS

/* CSS */
.color-1 {
color: #f5e2b7;
}
.color-2 {
color: #e2a1c4;
}
.color-3 {
color: #d58bb0;
}
.color-4 {
color: #c7709d;
}
.color-5 {
color: #b54f7a;
}

/* CSS Variables */
:root {
--color-1: #f5e2b7;
 --color-2: #e2a1c4;
 --color-3: #d58bb0;
 --color-4: #c7709d;
 --color-5: #b54f7a;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f5e2b7, #e2a1c4, #d58bb0, #c7709d, #b54f7a);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f5e2b7, #e2a1c4, #d58bb0, #c7709d, #b54f7a);
}

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

Circe color palette created on .