Gentle Sky Dreams カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Gentle Sky Dreams palette

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

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

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

Gentle Sky Dreams カラーパレット (PNG) をダウンロード

Download gentle sky dreams color palette PNG image (landscape)
Download gentle sky dreams color palette PNG image (square)

Gentle Sky Dreams カラーパレット CSS

/* CSS */
.color-1 {
color: #9fc4e9;
}
.color-2 {
color: #6ebeed;
}
.color-3 {
color: #419bc8;
}
.color-4 {
color: #1a7b99;
}
.color-5 {
color: #0a4d61;
}

/* CSS Variables */
:root {
--color-1: #9fc4e9;
 --color-2: #6ebeed;
 --color-3: #419bc8;
 --color-4: #1a7b99;
 --color-5: #0a4d61;
 }

Gentle Sky Dreams の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #9fc4e9, #6ebeed, #419bc8, #1a7b99, #0a4d61);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #9fc4e9, #6ebeed, #419bc8, #1a7b99, #0a4d61);
}

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

Gentle Sky Dreams color palette created on .