Dusty Midnight カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Dusty Midnight palette

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

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

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

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

Download dusty midnight color palette PNG image (landscape)
Download dusty midnight color palette PNG image (square)

Dusty Midnight カラーパレット CSS

/* CSS */
.color-1 {
color: #192a4d;
}
.color-2 {
color: #394e74;
}
.color-3 {
color: #5b749a;
}
.color-4 {
color: #87a3c5;
}
.color-5 {
color: #d4e8f2;
}

/* CSS Variables */
:root {
--color-1: #192a4d;
 --color-2: #394e74;
 --color-3: #5b749a;
 --color-4: #87a3c5;
 --color-5: #d4e8f2;
 }

Dusty Midnight の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #192a4d, #394e74, #5b749a, #87a3c5, #d4e8f2);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #192a4d, #394e74, #5b749a, #87a3c5, #d4e8f2);
}

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

Dusty Midnight color palette created on .