Cole カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Cole palette

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

Cole カラー パレット PNG 画像

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

Cole カラーパレット CSS

/* CSS */
.color-1 {
color: #1e4c7b;
}
.color-2 {
color: #498c9c;
}
.color-3 {
color: #89b3a2;
}
.color-4 {
color: #f1d27e;
}
.color-5 {
color: #d56b48;
}

/* CSS Variables */
:root {
--color-1: #1e4c7b;
 --color-2: #498c9c;
 --color-3: #89b3a2;
 --color-4: #f1d27e;
 --color-5: #d56b48;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1e4c7b, #498c9c, #89b3a2, #f1d27e, #d56b48);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1e4c7b, #498c9c, #89b3a2, #f1d27e, #d56b48);
}

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

Cole color palette created on .