Kingfin カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Kingfin palette

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

Kingfin カラー パレット PNG 画像

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

Kingfin カラーパレット CSS

/* CSS */
.color-1 {
color: #d0e7e1;
}
.color-2 {
color: #3bbaa7;
}
.color-3 {
color: #007a5e;
}
.color-4 {
color: #006152;
}
.color-5 {
color: #004d40;
}

/* CSS Variables */
:root {
--color-1: #d0e7e1;
 --color-2: #3bbaa7;
 --color-3: #007a5e;
 --color-4: #006152;
 --color-5: #004d40;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #d0e7e1, #3bbaa7, #007a5e, #006152, #004d40);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #d0e7e1, #3bbaa7, #007a5e, #006152, #004d40);
}

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

Kingfin color palette created on .