Kitty カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Kitty palette

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

Kitty カラー パレット PNG 画像

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

Kitty カラーパレット CSS

/* CSS */
.color-1 {
color: #f6a7c1;
}
.color-2 {
color: #f1b1e4;
}
.color-3 {
color: #e5bfe8;
}
.color-4 {
color: #d2d6ea;
}
.color-5 {
color: #a3c7e0;
}

/* CSS Variables */
:root {
--color-1: #f6a7c1;
 --color-2: #f1b1e4;
 --color-3: #e5bfe8;
 --color-4: #d2d6ea;
 --color-5: #a3c7e0;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f6a7c1, #f1b1e4, #e5bfe8, #d2d6ea, #a3c7e0);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f6a7c1, #f1b1e4, #e5bfe8, #d2d6ea, #a3c7e0);
}

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

Kitty color palette created on .