Sapphire Uniform カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Sapphire Uniform palette

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

Sapphire Uniform カラー パレット PNG 画像

Download sapphire uniform color palette PNG image (landscape)
Download sapphire uniform color palette PNG image (square)

Sapphire Uniform カラーパレット CSS

/* CSS */
.color-1 {
color: #1f4e7a;
}
.color-2 {
color: #4a8ea1;
}
.color-3 {
color: #79c0c8;
}
.color-4 {
color: #ade1e0;
}
.color-5 {
color: #f6f1d5;
}

/* CSS Variables */
:root {
--color-1: #1f4e7a;
 --color-2: #4a8ea1;
 --color-3: #79c0c8;
 --color-4: #ade1e0;
 --color-5: #f6f1d5;
 }

Sapphire Uniform の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #1f4e7a, #4a8ea1, #79c0c8, #ade1e0, #f6f1d5);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #1f4e7a, #4a8ea1, #79c0c8, #ade1e0, #f6f1d5);
}

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

Sapphire Uniform color palette created on .