Kairo カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Kairo palette

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

Kairo カラー パレット PNG 画像

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

Kairo カラーパレット CSS

/* CSS */
.color-1 {
color: #f0a800;
}
.color-2 {
color: #d68f00;
}
.color-3 {
color: #c77e00;
}
.color-4 {
color: #b36e00;
}
.color-5 {
color: #9e6100;
}

/* CSS Variables */
:root {
--color-1: #f0a800;
 --color-2: #d68f00;
 --color-3: #c77e00;
 --color-4: #b36e00;
 --color-5: #9e6100;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f0a800, #d68f00, #c77e00, #b36e00, #9e6100);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f0a800, #d68f00, #c77e00, #b36e00, #9e6100);
}

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

Kairo color palette created on .