Dyatopia カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Dyatopia palette

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

Dyatopia カラー パレット PNG 画像

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

Dyatopia カラーパレット CSS

/* CSS */
.color-1 {
color: #1a1f23;
}
.color-2 {
color: #3a4d59;
}
.color-3 {
color: #5a707c;
}
.color-4 {
color: #8ab7c1;
}
.color-5 {
color: #e0f0f5;
}

/* CSS Variables */
:root {
--color-1: #1a1f23;
 --color-2: #3a4d59;
 --color-3: #5a707c;
 --color-4: #8ab7c1;
 --color-5: #e0f0f5;
 }

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

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1a1f23, #3a4d59, #5a707c, #8ab7c1, #e0f0f5);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1a1f23, #3a4d59, #5a707c, #8ab7c1, #e0f0f5);
}

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

Dyatopia color palette created on .