Cold Winter カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Cold Winter palette

カラーインスピレーション

実際のデザインでこのカラーパレットを紹介する画像

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

Cold Winter カラーパレット (PNG) をダウンロード

Download cold winter color palette PNG image (landscape)
Download cold winter color palette PNG image (square)

Cold Winter カラーパレット CSS

/* CSS */
.color-1 {
color: #7da7e3;
}
.color-2 {
color: #a3c7e1;
}
.color-3 {
color: #cee0e8;
}
.color-4 {
color: #f5fafa;
}
.color-5 {
color: #bfd5e3;
}

/* CSS Variables */
:root {
--color-1: #7da7e3;
 --color-2: #a3c7e1;
 --color-3: #cee0e8;
 --color-4: #f5fafa;
 --color-5: #bfd5e3;
 }

Cold Winter の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #7da7e3, #a3c7e1, #cee0e8, #f5fafa, #bfd5e3);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #7da7e3, #a3c7e1, #cee0e8, #f5fafa, #bfd5e3);
}

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

Cold Winter color palette created on .