Character Haven カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Character Haven palette

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

Character Haven カラーパレット CSS

/* CSS */
.color-1 {
color: #4467ab;
}
.color-2 {
color: #6ca1d0;
}
.color-3 {
color: #aecfef;
}
.color-4 {
color: #f7ecc9;
}
.color-5 {
color: #ff94b4;
}

/* CSS Variables */
:root {
--color-1: #4467ab;
 --color-2: #6ca1d0;
 --color-3: #aecfef;
 --color-4: #f7ecc9;
 --color-5: #ff94b4;
 }

Character Haven の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #4467ab, #6ca1d0, #aecfef, #f7ecc9, #ff94b4);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #4467ab, #6ca1d0, #aecfef, #f7ecc9, #ff94b4);
}

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

Character Haven color palette created on .