Calix カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Calix palette

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

Calix カラー パレット PNG 画像

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

Calix カラーパレット CSS

/* CSS */
.color-1 {
color: #497b9c;
}
.color-2 {
color: #6eb1c4;
}
.color-3 {
color: #98e6e2;
}
.color-4 {
color: #f0d351;
}
.color-5 {
color: #f77d2b;
}

/* CSS Variables */
:root {
--color-1: #497b9c;
 --color-2: #6eb1c4;
 --color-3: #98e6e2;
 --color-4: #f0d351;
 --color-5: #f77d2b;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #497b9c, #6eb1c4, #98e6e2, #f0d351, #f77d2b);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #497b9c, #6eb1c4, #98e6e2, #f0d351, #f77d2b);
}

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

Calix color palette created on .